/*
 * Homepage-only layout and section styling.
 *
 * Change shared colors, fonts, heading sizes, and spacing in /style.css.
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.ik-hero-region {
	position: relative;
	background-color: var(--ik-color-black);
}

.ik-hero {
	display: grid;
	min-height: 40rem;
	padding-block: var(--ik-hero-spacing);
	align-items: center;
	background: transparent;
}

.ik-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(21rem, 0.75fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.ik-hero h1 {
	max-width: 51rem;
	margin-bottom: 2rem;
}

.ik-hero .ik-copy {
	margin-bottom: 2.25rem;
}

.ik-collage {
	position: relative;
	min-height: 34rem;
}

.ik-collage__block {
	position: absolute;
	overflow: hidden;
	border: 0.35rem solid var(--ik-color-black);
	border-radius: var(--ik-radius-large);
	box-shadow: 0.4rem 0.4rem 0 rgb(255 255 255 / 14%);
}

.ik-collage__laptop {
	inset: 0 0 auto 8%;
	height: 52%;
	background: var(--ik-color-orange);
}

.ik-collage__laptop img,
.ik-collage__golf img {
	object-fit: contain;
}

.ik-collage__golf {
	inset: auto 52% 0 0;
	height: 48%;
	background: var(--ik-color-red);
}

.ik-collage__cricket {
	inset: auto 0 0 48%;
	height: 48%;
	background: var(--ik-color-warm-card);
}

/* ==========================================================================
   Shared grid sections
   ========================================================================== */

.ik-problem,
.ik-process,
.ik-faq {
	background-color: var(--ik-color-teal);
	background-image:
		linear-gradient(rgb(255 255 255 / 3.5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 3.5%) 1px, transparent 1px);
	background-size: var(--ik-grid-size) var(--ik-grid-size);
}

/* ==========================================================================
   Problem
   ========================================================================== */

.ik-problem {
	min-height: 47rem;
	padding-bottom: 10rem;
}

.ik-problem .ik-copy {
	max-width: 66rem;
}

.ik-problem__questions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 3rem;
	border-top: 1px solid var(--ik-color-border);
	border-left: 1px solid var(--ik-color-border);
}

.ik-question {
	min-height: 7.25rem;
	padding: 1.75rem;
	border-right: 1px solid var(--ik-color-border);
	border-bottom: 1px solid var(--ik-color-border);
	font-size: 1.15rem;
}

.ik-question > br {
	display: none;
}

.ik-question strong {
	display: block;
	color: var(--ik-color-cyan);
	font-family: var(--ik-font-body);
	font-size: var(--ik-font-size-small);
	font-weight: 700;
	text-transform: uppercase;
}

.ik-question__text {
	font-family: var(--ik-font-question);
	font-size: var(--ik-font-size-question);
	font-weight: var(--ik-font-weight-question);
}

/* ==========================================================================
   Benefits
   ========================================================================== */

.ik-benefits {
	min-height: 57rem;
	background: var(--ik-color-black);
}

.ik-benefits__intro {
	margin-bottom: 3.25rem;
}

.ik-benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.ik-benefit {
	padding: 1.65rem;
	border: 2px solid var(--ik-color-black);
	border-radius: var(--ik-radius-medium);
	background: var(--ik-color-card);
	color: var(--ik-color-black);
	box-shadow: 0 0 0 rgb(255 255 255 / 0%);
	transition:
		box-shadow var(--ik-transition-fast),
		transform var(--ik-transition-fast);
}

.ik-benefit:nth-child(1) {
	background: var(--ik-color-orange);
}

.ik-benefit:nth-child(2) {
	background: var(--ik-color-red);
}

.ik-benefit:nth-child(3) {
	background: var(--ik-color-cyan);
}

.ik-benefit:nth-child(4) {
	background: var(--ik-color-yellow);
}

.ik-benefit:nth-child(5) {
	background: var(--ik-color-neutral-card);
}

.ik-benefit:nth-child(6) {
	background: var(--ik-color-pink);
}

.ik-benefit--inverse,
.ik-benefit--inverse h3,
.ik-benefit--inverse p,
.ik-benefit--inverse .ik-benefit__icon {
	color: var(--ik-color-ink);
}

.ik-benefit__icon {
	display: flex;
	width: 2rem;
	height: 2rem;
	margin-top: 0;
	margin-bottom: 1.2rem;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.ik-benefit__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ik-benefit h3 {
	margin-bottom: 0.75rem;
	font-size: var(--ik-font-size-h3);
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.2;
}

.ik-benefit p {
	margin-bottom: 0;
	font-size: 0.95rem;
}

.ik-benefits__cta {
	margin-top: 2.75rem;
	text-align: center;
}

/*
 * WordPress may add empty paragraphs and line breaks to shortcode output.
 */
.ik-benefit > br,
.ik-benefit__icon > br,
.ik-benefit > p:empty {
	display: none !important;
	margin: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
	.ik-benefit:hover {
		box-shadow: 0.25rem 0.25rem 0 rgb(255 255 255 / 16%);
		transform: translate(-0.15rem, -0.15rem);
	}
}

/* ==========================================================================
   Manifesto
   ========================================================================== */

.ik-manifesto {
	--ik-manifesto-inactive: rgb(247 244 239 / 22%);
	position: relative;
	min-height: 210svh;
	background:
		linear-gradient(rgb(11 10 10 / 55%), rgb(11 10 10 / 92%)),
		repeating-linear-gradient(
			90deg,
			transparent 0 3rem,
			rgb(255 255 255 / 3%) 3rem calc(3rem + 1px)
		),
		var(--ik-color-black);
	text-align: center;
}

.ik-manifesto__sticky {
	position: sticky;
	top: 0;
	display: grid;
	min-height: 100svh;
	padding: clamp(4rem, 10vw, 9rem) 1.5rem;
	place-items: center;
}

.ik-manifesto h2 {
	max-width: 72rem;
	margin: 0;
	font-size: var(--ik-font-size-manifesto);
	line-height: 1.25;
}

.ik-manifesto__word {
	color: var(--ik-manifesto-inactive);
	transition: color 160ms ease;
}

.ik-manifesto__word.is-active {
	color: var(--ik-color-ink);
}

/* ==========================================================================
   Audience
   ========================================================================== */

.ik-audience {
	min-height: 48rem;
	padding-bottom: 11rem;
	background: var(--ik-color-black);
}

.ik-audience .ik-shell h2 {
	max-width: 911px;
}

.ik-audience-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
}

.ik-audience-item {
	min-height: 11.75rem;
	padding: 1.75rem;
	border: 1px solid var(--ik-color-border);
	border-radius: var(--ik-radius-small);
	background: var(--ik-color-card);
}

.ik-audience-item small {
	display: block;
	margin-bottom: 0.55rem;
	color: var(--ik-color-orange);
	font-weight: var(--ik-font-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ik-audience-item h3 {
	margin-bottom: 0.85rem;
	font-size: 1.32rem;
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.25;
}

.ik-audience-item p {
	margin-bottom: 0;
	color: var(--ik-color-muted);
	font-size: 0.95rem;
}

/* ==========================================================================
   Process carousel
   ========================================================================== */

.ik-process {
	min-height: 57rem;
}

.ik-process h2,
.ik-process .ik-copy {
	max-width: 715px;
}

.ik-process-carousel {
	margin-top: 3.25rem;
}

.ik-process-viewport {
	margin-inline: -0.75rem;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
	-webkit-overflow-scrolling: touch;
}

.ik-process-viewport::-webkit-scrollbar {
	display: none;
}

.ik-process-viewport.is-repositioning {
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.ik-process__track {
	position: relative;
	display: flex;
	width: max-content;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem;
}

.ik-process-step {
	/*
	 * Wider at the top and narrower at the bottom.
	 */
	--ik-process-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 460' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M18 0H282C294 0 302 10 300 22L260 438C259 451 250 460 237 460H63C50 460 41 451 40 438L0 22C-2 10 6 0 18 0Z'/%3E%3C/svg%3E");

	display: flex;
	min-height: var(--ik-process-card-height);
	padding: 2.25rem 2.5rem;
	flex: 0 0 var(--ik-process-card-width);
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	color: var(--ik-color-ink);
	text-align: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	-webkit-mask: var(--ik-process-mask) center / 100% 100% no-repeat;
	mask: var(--ik-process-mask) center / 100% 100% no-repeat;
}

.ik-process-step--inverted {
	/*
	 * Narrower at the top and wider at the bottom.
	 */
	--ik-process-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 460' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M63 0H237C250 0 259 9 260 22L300 438C302 450 294 460 282 460H18C6 460-2 450 0 438L40 22C41 9 50 0 63 0Z'/%3E%3C/svg%3E");
}

.ik-process-step--orange {
	background: var(--ik-color-orange);
}

.ik-process-step--red {
	background: var(--ik-color-red);
}

.ik-process-step--pink {
	background: var(--ik-color-pink);
}

.ik-process-step--slate {
	background: rgb(251 249 246 / 10%);
}

.ik-process-step--cyan {
	background: var(--ik-color-cyan);
}

.ik-process-step--yellow {
	background: var(--ik-color-yellow);
}

.ik-process-step h3 {
	margin-bottom: 1.25rem;
	font-family: var(--ik-font-body);
	font-size: 1.28rem;
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.2;
}

.ik-process-step p {
	margin-bottom: 0;
	color: rgb(251 249 246 / 60%);
	font-size: 0.92rem;
	line-height: 1.6;
}

.ik-process-carousel__controls,
.ik-project-deck__controls {
	display: flex;
	margin-top: 1.25rem;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.ik-process__cta {
	margin-top: 2.75rem;
}

/* ==========================================================================
   Main call to action
   ========================================================================== */

.ik-orange-cta {
	display: grid;
	min-height: 45rem;
	padding-block: clamp(7rem, 10vw, 9rem);
	place-items: center;
	background-color: var(--ik-color-orange);
	background-image:
		linear-gradient(rgb(11 10 10 / 7.5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(11 10 10 / 7.5%) 1px, transparent 1px);
	background-size: 4.1rem 4.1rem;
	color: var(--ik-color-black);
	text-align: center;
}

.ik-orange-cta__inner {
	display: flex;
	max-width: 61rem;
	margin-inline: auto;
	flex-direction: column;
	align-items: center;
}

.ik-orange-cta__kicker {
	margin-bottom: 2.75rem;
	justify-content: center;
	color: var(--ik-color-black);
	letter-spacing: 0.14em;
}

.ik-orange-cta__kicker::before {
	background: var(--ik-color-yellow);
}

.ik-orange-cta h2 {
	max-width: 58rem;
	margin-bottom: 2.75rem;
	font-size: var(--ik-font-size-cta);
	line-height: 1.18;
}

.ik-orange-cta__copy {
	max-width: 48rem;
	margin-bottom: 2.75rem;
	font-size: 1.15rem;
	line-height: 1.65;
}

/* ==========================================================================
   Project deck
   ========================================================================== */

.ik-projects {
	min-height: 55rem;
	background: var(--ik-color-black);
}

.ik-project-deck {
	margin-top: 3rem;
}

.ik-project-deck__stage {
	position: relative;
	min-height: var(--ik-project-stage-height);
	overflow: hidden;
	isolation: isolate;
}

.ik-project-card {
	position: absolute;
	inset: 1.5rem 1.5rem 3rem;
	display: grid;
	padding: var(--ik-project-card-padding);
	grid-template-columns: minmax(0, 2.1fr) minmax(14rem, 0.9fr);
	align-items: stretch;
	gap: 2.5rem;
	border-radius: 1rem;
	background: var(--ik-project-card-background);
	color: var(--ik-color-black);
}

.ik-project-card--yellow {
	--ik-project-card-background: var(--ik-color-yellow);
}

.ik-project-card--cyan {
	--ik-project-card-background: var(--ik-color-cyan);
}

.ik-project-card--pink {
	--ik-project-card-background: var(--ik-color-pink);
}

.ik-project-card--orange {
	--ik-project-card-background: var(--ik-color-orange);
}

.ik-project-card[data-deck-position="0"] {
	z-index: 4;
	filter: brightness(1);
	transform: translate(0, 0) rotate(0deg) scale(1);
}

.ik-project-card[data-deck-position="1"] {
	z-index: 3;
	filter: brightness(0.96);
	transform: translate(1.8%, 1.8%) rotate(1.5deg) scale(0.985);
}

.ik-project-card[data-deck-position="2"] {
	z-index: 2;
	filter: brightness(0.91);
	transform: translate(-1.6%, 3%) rotate(-1.9deg) scale(0.97);
}

.ik-project-card[data-deck-position="3"] {
	z-index: 1;
	filter: brightness(0.86);
	transform: translate(0.5%, 4.1%) rotate(0.8deg) scale(0.955);
}

.ik-project-card.is-shuffling-next {
	z-index: 8;
	animation: ikonic-project-next 620ms cubic-bezier(0.55, 0, 0.2, 1) both;
}

.ik-project-card.is-shuffling-previous {
	z-index: 8;
	animation: ikonic-project-previous 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ik-project-card.is-swiping-left {
	z-index: 8;
	animation: ikonic-project-swipe-left 620ms cubic-bezier(0.55, 0, 0.2, 1) both;
}

.ik-project-card.is-swiping-right {
	z-index: 8;
	animation: ikonic-project-swipe-right 620ms cubic-bezier(0.55, 0, 0.2, 1) both;
}

@keyframes ikonic-project-next {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	100% {
		transform: translate(112%, -5%) rotate(8deg) scale(0.96);
	}
}

@keyframes ikonic-project-previous {
	0% {
		transform: translate(-112%, 5%) rotate(-8deg) scale(0.96);
	}

	100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
}

@keyframes ikonic-project-swipe-left {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	100% {
		transform: translate(-112%, -5%) rotate(-8deg) scale(0.96);
	}
}

@keyframes ikonic-project-swipe-right {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}

	100% {
		transform: translate(112%, -5%) rotate(8deg) scale(0.96);
	}
}

.ik-project-card__image {
	min-height: var(--ik-project-image-height);
	overflow: hidden;
	border: 0.35rem solid var(--ik-color-black);
	border-radius: var(--ik-radius-medium);
	background: var(--ik-color-black);
}

.ik-project-card__image img {
	object-fit: contain;
}

.ik-project-card__copy {
	display: flex;
	padding: 1.5rem;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--ik-color-black);
}

.ik-project-card__copy h3 {
	margin-bottom: 1rem;
	font-size: 1.8rem;
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.2;
}

.ik-project-card__copy p {
	margin-bottom: 0;
	color: rgb(17 15 15 / 75%);
	font-size: 1rem;
}

.ik-project-card .ik-project-card__button {
	width: max-content;
	max-width: 100%;
	min-height: 3rem;
	margin-top: 1.5rem;
	padding: 0.65rem 1.15rem;
	align-self: flex-start;
	border: 0;
	font-family: var(--ik-font-button);
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
}

/*
 * WordPress shortcode formatting fixes for the project deck.
 */
.ik-project-deck > p:empty,
.ik-project-deck__stage > p:empty,
.ik-project-card > p:empty {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ik-project-card__copy > p:has(> .ik-project-card__button),
.ik-project-deck__controls > p {
	display: contents;
}

.ik-project-card__copy small > br,
.ik-project-card__button > br,
.ik-project-deck__controls > br,
.ik-project-deck__controls button > br {
	display: none !important;
}

/* ==========================================================================
   Project prototype modal
   ========================================================================== */

.ik-project-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	width: 85vw;
	max-width: 100rem;
	height: 85vh;
	height: 85dvh;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ik-color-border);
	border-radius: 1.25rem;
	background: var(--ik-color-black);
	color: var(--ik-color-ink);
	box-shadow: 0 2rem 6rem rgb(0 0 0 / 65%);
}

.ik-project-modal[open] {
	display: block;
}

.ik-project-modal::backdrop {
	background: rgb(0 0 0 / 82%);
	backdrop-filter: blur(4px);
}

.ik-project-modal__inner {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-rows: auto minmax(0, 1fr);
}

.ik-project-modal__header {
	position: relative;
	z-index: 5;
	display: grid;
	min-height: 5rem;
	padding: 0.75rem 1.25rem 0.75rem 1.75rem;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	border-bottom: 1px solid var(--ik-color-border);
	background: var(--ik-color-panel);
}

.ik-project-modal .ik-project-modal__heading {
	display: flex;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	color: var(--ik-color-ink);
	font-family: var(--ik-font-body) !important;
	font-size: 1rem;
	line-height: 1.25;
	letter-spacing: normal;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.ik-project-modal .ik-project-modal__prefix {
	display: block;
	color: var(--ik-color-orange);
	font-family: var(--ik-font-body) !important;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.ik-project-modal [data-project-modal-title] {
	display: block;
	color: var(--ik-color-ink);
	font-family: var(--ik-font-body) !important;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.ik-project-modal__actions {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	align-self: center;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
}

.ik-project-modal__control,
.ik-project-modal__close {
	display: inline-grid !important;
	margin: 0 !important;
	padding: 0 !important;
	place-items: center !important;
	align-self: center;
	flex: 0 0 auto;
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 50%;
	background: transparent;
	color: var(--ik-color-ink);
	line-height: 0 !important;
	vertical-align: middle;
	cursor: pointer;
	transition:
		border-color var(--ik-transition-fast),
		background-color var(--ik-transition-fast),
		color var(--ik-transition-fast),
		transform var(--ik-transition-fast);
}

.ik-project-modal__control {
	width: 2.8rem;
	height: 2.8rem;
}

.ik-project-modal__control svg {
	display: block !important;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 !important;
	padding: 0 !important;
	flex: none;
}

.ik-project-modal__close {
	width: 3rem;
	height: 3rem;
	margin-left: 0.25rem !important;
	border-width: 2px;
	font-family: Arial, sans-serif;
	font-size: 1.75rem;
	font-weight: 400;
}

.ik-project-modal__control:hover,
.ik-project-modal__close:hover {
	border-color: var(--ik-color-orange);
	background: var(--ik-color-orange);
	color: var(--ik-color-black);
	transform: translateY(-2px);
}

.ik-project-modal__control:focus-visible,
.ik-project-modal__close:focus-visible {
	outline: 0.2rem solid var(--ik-color-cyan);
	outline-offset: 0.15rem;
}

.ik-project-modal__viewport {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--ik-color-black);
}

.ik-project-modal__prototype {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 100%;
	margin: 0;
	border: 0;
	background: var(--ik-color-black);
	opacity: 1;
	transition: opacity 180ms ease;
}

.ik-project-modal.is-loading .ik-project-modal__prototype {
	opacity: 0.15;
}

.ik-project-modal__loader {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	background: var(--ik-color-black);
	color: var(--ik-color-ink);
	font-family: var(--ik-font-body);
	font-size: 0.95rem;
}

.ik-project-modal:not(.is-loading) .ik-project-modal__loader {
	display: none !important;
}

.ik-project-modal.is-loading .ik-project-modal__loader {
	display: flex !important;
}

.ik-project-modal__spinner {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	border: 0.2rem solid rgb(255 255 255 / 25%);
	border-top-color: var(--ik-color-orange);
	border-radius: 50%;
	animation: ik-project-modal-spin 700ms linear infinite;
}

@keyframes ik-project-modal-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * WordPress shortcode formatting fixes for the modal.
 */
.ik-project-modal p:empty,
.ik-project-modal br {
	display: none !important;
}

.ik-project-modal > p,
.ik-project-modal__heading > p,
.ik-project-modal__actions > p,
.ik-project-modal__loader > p {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ik-project-modal__viewport > p {
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.ik-project-modal__viewport > p > .ik-project-modal__prototype {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 100%;
}

html.ik-project-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.ik-testimonials {
	min-height: 48rem;
	padding-bottom: 11rem;
	background: var(--ik-color-black);
}

.ik-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3.25rem;
}

.ik-testimonial {
	display: flex;
	min-height: 17.5rem;
	padding: 1.75rem;
	flex-direction: column;
	border: 1px solid var(--ik-color-border);
	border-radius: var(--ik-radius-small);
	background: var(--ik-color-card);
}

.ik-testimonial__quote {
	color: var(--ik-color-orange);
	font-family: var(--ik-font-display);
	font-size: 2.75rem;
	line-height: 1;
}

.ik-testimonial > p {
	color: var(--ik-color-muted);
	font-size: 1rem;
}

.ik-testimonial__person {
	display: flex;
	margin-top: auto;
	align-items: center;
	gap: 0.75rem;
}

.ik-testimonial__person img,
.ik-testimonial__avatar {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
}

.ik-testimonial__avatar {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	color: var(--ik-color-black);
	font-weight: 700;
	background: var(--ik-color-orange);
}

.ik-testimonial__person strong {
	display: block;
	color: var(--ik-color-orange);
}

.ik-testimonial__person div > br {
	display: none;
}

/* ==========================================================================
   Founder
   ========================================================================== */

.ik-founder {
	position: relative;
	overflow: hidden;
	padding-block: clamp(6rem, 10vw, 10rem);
	background-color: var(--ik-color-teal-deep);
}

.ik-founder__layout {
	display: grid;
	grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 7rem);
}

.ik-founder__visual {
	position: relative;
	width: min(100%, 30rem);
	margin-inline: auto;
}

.ik-founder__visual::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1rem 3.25rem 1rem;
	background: var(--ik-color-orange);
	border-radius: var(--ik-radius-medium);
	transform: rotate(-3deg);
}

.ik-founder__portrait {
	position: relative;
	z-index: 1;
	display: grid;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	place-items: center;
	background:
		linear-gradient(145deg, var(--ik-color-cyan), var(--ik-color-teal));
	border: 1px solid var(--ik-color-border);
	border-radius: var(--ik-radius-medium);
}

.ik-founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ik-founder__placeholder {
	color: var(--ik-color-black);
	font-family: var(--ik-font-display);
	font-size: clamp(8rem, 20vw, 15rem);
	line-height: 1;
}

.ik-founder__caption {
	position: relative;
	z-index: 2;
	line-height: 0!important;
	top:-80px;
	display: flex;
	width: calc(100% - 2rem);
	margin: -2.75rem auto 0;
	padding: 1.8rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--ik-color-black);
	background: var(--ik-color-yellow);
	border-radius: var(--ik-radius-small);
	box-shadow: 0.45rem 0.45rem 0 rgb(0 0 0 / 28%);
}

.ik-founder__caption strong,
.ik-founder__caption span {
	font-family: var(--ik-font-body);
}

.ik-founder__caption strong {
	font-size: 1.1rem;
}

.ik-founder__caption span {
	font-size: 0.78rem;
	text-align: right;
}

.ik-founder__content {
	position: relative;
	z-index: 1;
}

.ik-founder__content .ik-kicker {
	margin-bottom: 1.25rem;
}

.ik-founder__content h2 {
	max-width: 48rem;
	margin: 0 0 2rem;
}

.ik-founder__copy {
	display: grid;
	max-width: 45rem;
	gap: 1.15rem;
}

.ik-founder__copy p {
	margin: 0;
	color: var(--ik-color-muted);
	font-size: clamp(1rem, 1.25vw, 1.1rem);
	line-height: 1.75;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.ik-faq {
	min-height: 65rem;
}

.ik-faq__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.ik-faq__layout > div:first-child {
	position: relative;
	z-index: 1;
	width: 100%;
}

.ik-faq__layout > div:first-child h2 {
	width: min(100%, 70rem);
	max-width: 100%;
}

.ik-faq-list {
	width: min(100%, 54rem);
	margin: 4rem auto 0;
	border-top: 1px solid var(--ik-color-border);
}

.ik-faq-list details {
	border-bottom: 1px solid var(--ik-color-border);
}

.ik-faq-list summary {
	display: flex;
	min-height: 4.75rem;
	padding-block: 1.45rem;
	justify-content: space-between;
	gap: 1rem;
	font-size: 1.06rem;
	font-weight: var(--ik-font-weight-bold);
	list-style: none;
	cursor: pointer;
}

.ik-faq-list summary::-webkit-details-marker {
	display: none;
}

.ik-faq-list summary::after {
	content: "+";
	color: var(--ik-color-orange);
}

.ik-faq-list details[open] summary::after {
	content: "−";
}

.ik-faq-list details p {
	max-width: 44rem;
	padding-bottom: 1.5rem;
	color: var(--ik-color-muted);
	font-size: 1rem;
}

/* ==========================================================================
   Responsive: tablet and below
   ========================================================================== */

@media (max-width: 48rem) {
	.ik-hero__layout,
	.ik-project-card {
		grid-template-columns: 1fr;
	}

	.ik-hero__content {
		text-align: center;
	}

	.ik-hero .ik-copy {
		margin-inline: auto;
	}

	.ik-collage {
		min-height: 28rem;
	}

	.ik-benefits,
	.ik-audience,
	.ik-process,
	.ik-projects,
	.ik-testimonials,
	.ik-founder,
	.ik-faq {
		min-height: auto;
	}

	.ik-problem,
	.ik-audience,
	.ik-testimonials {
		padding-bottom: 8rem;
	}

	.ik-problem__questions,
	.ik-benefit-grid,
	.ik-audience-grid,
	.ik-testimonial-grid {
		grid-template-columns: 1fr;
	}

	.ik-founder__layout {
		grid-template-columns: 1fr;
	}

	.ik-founder__visual {
		width: min(100%, 24rem);
	}

	.ik-founder__content {
		text-align: left;
	}

	.ik-founder__content .ik-kicker {
		justify-content: flex-start;
	}

	.ik-process-step {
		min-height: var(--ik-process-card-mobile-height);
		padding: 2rem 1.75rem;
		flex-basis: var(--ik-process-card-mobile-width);
	}

	.ik-orange-cta {
		min-height: 40rem;
		padding-block: 6.5rem;
	}

	.ik-project-deck__stage {
		min-height: 46rem;
		touch-action: pan-y;
	}

	.ik-project-card {
		padding: 1.25rem;
	}

	.ik-project-card[aria-hidden="true"] .ik-project-card__button {
		visibility: hidden;
		pointer-events: none;
	}

	.ik-project-card__image {
		min-height: 20rem;
	}

	.ik-project-card__copy {
		padding: 1rem 0 0;
	}

	.ik-project-card .ik-project-card__button {
		width: max-content;
		min-height: 2.85rem;
		margin-top: 1.25rem;
		padding: 0.6rem 1rem;
		font-size: 0.9rem;
	}

	.ik-project-modal {
		width: calc(100vw - 1rem);
		height: calc(100dvh - 1rem);
		border-radius: 0.8rem;
	}

	.ik-project-modal__header {
		min-height: 4.5rem;
		padding-inline: 1rem 0.75rem;
		gap: 0.6rem;
	}

	.ik-project-modal .ik-project-modal__heading {
		font-size: 0.9rem;
	}

	.ik-project-modal__control,
	.ik-project-modal__close {
		width: 2.5rem;
		height: 2.5rem;
	}

	.ik-project-modal__close {
		font-size: 1.7rem;
	}

	.ik-project-modal__actions {
		gap: 0.4rem;
	}

	.ik-faq__layout > div:first-child h2 {
		width: auto;
		max-width: 100%;
	}

	.ik-faq-list {
		width: 100%;
		margin: 3rem auto 0;
	}
}

/* ==========================================================================
   Responsive: mobile
   ========================================================================== */

@media (max-width: 30rem) {
	.ik-hero {
		min-height: auto;
		padding-block: 5.5rem;
	}

	.ik-collage {
		min-height: 23rem;
	}

	.ik-problem {
		min-height: auto;
	}

	.ik-problem,
	.ik-audience,
	.ik-testimonials {
		padding-bottom: 6.5rem;
	}

	.ik-process-step {
		min-height: 21rem;
		padding-inline: 1.75rem;
		flex-basis: min(18rem, calc(100vw - 4.5rem));
	}

	.ik-orange-cta {
		min-height: 38rem;
		padding-block: 5.5rem;
	}

	.ik-orange-cta__kicker,
	.ik-orange-cta h2,
	.ik-orange-cta__copy {
		margin-bottom: 2rem;
	}

	.ik-orange-cta h2 {
		line-height: 1.15;
	}

	.ik-orange-cta__copy {
		font-size: 1rem;
	}

	.ik-project-deck__stage {
		min-height: 48rem;
	}

	.ik-project-card {
		inset: 1rem 0.5rem 2.5rem;
	}

	.ik-project-card__image {
		min-height: 16rem;
	}

	.ik-manifesto {
		min-height: 220svh;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ik-project-card.is-shuffling-next,
	.ik-project-card.is-shuffling-previous,
	.ik-project-card.is-swiping-left,
	.ik-project-card.is-swiping-right {
		animation-duration: 1ms;
	}

	.ik-process-viewport {
		scroll-behavior: auto;
	}

	.ik-manifesto {
		min-height: 100svh;
	}

	.ik-manifesto__word {
		color: var(--ik-color-ink);
		transition: none;
	}
}