/*
Theme Name: IKONIC Lead Generation
Description: Custom child theme for the IKONIC Lead Generation website.
Author: IKONIC Lead Generation
Template: twentytwentyfive
Version: 1.0.0
Text Domain: ikonic-lead-generation
*/

/*@import url("https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500&display=swap");*/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500&display=swap');
/*@font-face {*/
/*	font-family: "NAURYZ RED KEDS";*/
/*	src: url("./assets/fonts/NAURYZREDKEDS.ttf") format("truetype");*/
/*	font-style: normal;*/
/*	font-weight: 400;*/
/*	font-display: swap;*/
/*}*/

/*
 * GLOBAL DESIGN TOKENS
 *
 * Edit this section to update colors, typography, spacing, and shared
 * component styling across this page and future pages.
 */
:root {
	/* Typography */
	--ik-font-body: "Manrope", Arial, sans-serif;
	/*--ik-font-display: "NAURYZ RED KEDS", Arial, sans-serif;*/
	--ik-font-display: "Bricolage Grotesque", Arial, sans-serif;

	--ik-font-banner: "Anton", Impact, sans-serif;
	/*--ik-font-button: "NAURYZ RED KEDS", Arial, sans-serif;*/
	--ik-font-button: "Bricolage Grotesque", Arial, sans-serif;
	--ik-font-question: "Unbounded", Arial, sans-serif;

	--ik-font-weight-regular: 400;
	--ik-font-weight-medium: 500;
	--ik-font-weight-semibold: 600;
	--ik-font-weight-bold: 700;
	--ik-font-weight-display: 400;
	--ik-font-weight-banner: 400;
	--ik-font-weight-question: 500;

	--ik-font-size-body: 1rem;
	--ik-font-size-small: 0.84rem;
	--ik-font-size-copy: 1.05rem;
	--ik-nav-font-size: 0.875rem; /* 14px */
	--ik-font-size-h1: clamp(3.6rem, 4.5vw, 4.1rem);
	/*--ik-font-size-h2: clamp(2.2rem, 2.32vw, 2.52rem);*/
	--ik-font-size-h2: clamp(2.75rem, 2.9vw, 3.15rem);
	--ik-font-size-h3: 1.38rem;
	--ik-font-size-manifesto: clamp(3.35rem, 4.2vw, 3.85rem);
	--ik-font-size-cta: clamp(3.7rem, 5.25vw, 4.75rem);
	--ik-font-size-question: 1.15rem;
	--ik-project-stage-height: 40rem;
	--ik-project-image-height: 27rem;
	--ik-project-card-padding: clamp(1.5rem, 3vw, 2.5rem);
	--ik-header-logo-width: 7rem;
	--ik-footer-logo-width: 8rem;
    --ik-header-height: 6.5rem;
	--ik-hero-spacing: clamp(3rem, 4.5vw, 7rem);
	--ik-marquee-item-spacing: 1.25rem;



	/* Core colors */
	/*--ik-color-black: #0b0a0a;*/
	--ik-color-black: #110F0F;
	--ik-color-panel: #110F0F;
	--ik-color-card: #1a1818;
	--ik-color-ink: #FFFFFF;
	--ik-color-muted: rgba(251, 249, 246, .7);
	--ik-color-orange: #EF7927;
	--ik-color-red: #E6362B;
	--ik-color-cyan: #63C3DB;
	--ik-color-pink: #F090B8;
	--ik-color-yellow: #F3B721;
	/*--ik-color-teal: #173640;*/
	--ik-color-teal: #22363F;
	--ik-color-teal-deep: #102b34;
	--ik-color-neutral-card: rgba(251, 249, 246, .06);
	--ik-color-warm-card: #e8d6c1;
	--ik-color-border: rgba(251, 249, 246, 10%);
	--ik-color-grid: rgb(255 255 255 / 3.5%);
	--ik-nav-color: #fbf9f6;

	/* Banner colors */
	--ik-banner-orange: var(--ik-color-orange);
	--ik-banner-red: var(--ik-color-red);
	--ik-banner-cyan: var(--ik-color-cyan);
	--ik-banner-pink: var(--ik-color-pink);
	--ik-banner-yellow: var(--ik-color-yellow);

	/* Layout */
	--ik-shell-width: 74rem;
	--ik-shell-gutter: 1.5rem;
	--ik-section-space: clamp(4rem, 9vw, 8rem);
	--ik-grid-size: 2.25rem;

	/* Shape and motion */
	--ik-radius-small: 0.65rem;
	--ik-radius-medium: 0.8rem;
	--ik-radius-large: 1.4rem;
	--ik-transition-fast: 160ms ease;
	
	--ik-process-card-width: 16rem;
	--ik-process-card-height: 20rem;

	--ik-process-card-mobile-width: min(18rem, calc(100vw - 4.5rem));
	--ik-process-card-mobile-height: 21rem;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ik-color-black);
	letter-spacing: 0px;
}

.wp-site-blocks {
	padding: 0;
}

.ik-site,
.ik-site * {
	box-sizing: border-box;
}

.ik-site {
	position: relative;
	width: 100%;
	overflow: clip;
	background: var(--ik-color-black);
	color: var(--ik-color-ink);
	font-family: var(--ik-font-body);
}

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

.ik-site > p:empty {
    display: none;
}

.ik-site h1,
.ik-site h2,
.ik-site h3,
.ik-site p {
	margin-block-start: 0;
}

.ik-site h1,
.ik-site h2,
.ik-site .ik-display {
	font-family: var(--ik-font-display);
	font-weight: var(--ik-font-weight-bold);
	line-height: 1.14;
}

.ik-site h1 {
	font-size: var(--ik-font-size-h1);
}

.ik-site .ik-section h2 {
	margin-bottom: 1.75rem;
	font-size: var(--ik-font-size-h2);
}

.ik-site p {
	line-height: 1.65;
}

.ik-shell {
	width: min(calc(100% - (var(--ik-shell-gutter) * 2)), var(--ik-shell-width));
	margin-inline: auto;
}

.ik-section {
	padding-block: var(--ik-section-space);
}

.ik-grid-bg {
	background-color: var(--ik-color-black);
	background-image:
		linear-gradient(var(--ik-color-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--ik-color-grid) 1px, transparent 1px);
	background-size: var(--ik-grid-size) var(--ik-grid-size);
}

.ik-kicker {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	color: var(--ik-color-yellow);
	font-family: var(--ik-font-body);
	font-weight: var(--ik-font-weight-bold);
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ik-kicker small {
	font-size: var(--ik-font-size-small);
}

.ik-kicker::before {
	content: "";
	width: 0.55rem;
	aspect-ratio: 1;
	background: currentColor;
	transform: rotate(45deg);
}

.ik-copy {
	max-width: 44rem;
	color: var(--ik-color-muted);
	font-size: var(--ik-font-size-copy);
	line-height: 1.75;
}

.ik-menu-button {
	position: relative;
	display: none;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--ik-color-border);
	border-radius: 0.5rem;
	background: var(--ik-color-panel);
	color: var(--ik-color-ink);
	font: inherit;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.ik-menu-button::before,
.ik-menu-button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4rem;
	height: 0.125rem;
	border-radius: 999px;
	background: currentColor;
	transition:
		box-shadow var(--ik-transition-fast),
		transform var(--ik-transition-fast);
}

/* Top and middle hamburger lines. */
.ik-menu-button::before {
	box-shadow: 0 0.38rem 0 currentColor;
	transform: translate(-50%, calc(-50% - 0.38rem));
}

/* Bottom hamburger line. */
.ik-menu-button::after {
	transform: translate(-50%, calc(-50% + 0.38rem));
}

/* Turn the hamburger into an X. */
.ik-menu-button[aria-expanded="true"]::before {
	box-shadow: none;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ik-menu-button[aria-expanded="true"]::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ik-button {
	--ik-button-face: var(--ik-color-orange);
	--ik-button-shadow: var(--ik-color-yellow);
	--ik-button-text: var(--ik-color-black);
	--ik-button-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M24 0C9 0 0 9 0 23V57C0 71 9 80 24 80L376 68C391 68 400 60 400 48V32C400 20 391 12 376 12Z'/%3E%3C/svg%3E");
	font-family: var(--ik-font-button);
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	min-height: 4.25rem;
	padding: 1rem 1.8rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ik-button-text);
	font-weight: var(--ik-font-weight-medium);
	text-decoration: none;
	transform: translateY(0);
	transition: transform var(--ik-transition-fast);
}

.ik-button::before,
.ik-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
	pointer-events: none;
	-webkit-mask: var(--ik-button-mask) center / 100% 100% no-repeat;
	mask: var(--ik-button-mask) center / 100% 100% no-repeat;
}

.ik-button::before {
	z-index: -1;
	background: var(--ik-button-face);
	filter: drop-shadow(0 0 0.04rem rgb(11 10 10 / 40%));
}

.ik-button::after {
	z-index: -2;
	background: var(--ik-button-shadow);
	transform: translate(-0.12rem, 0.28rem);
	transition: transform var(--ik-transition-fast);
}

.ik-button:hover {
	transform: translateY(-0.16rem);
}

.ik-button:hover::after {
	transform: translate(-0.12rem, 0.54rem);
}

.ik-button:active {
	transform: translateY(0.16rem);
}

.ik-button:active::after {
	transform: translate(-0.04rem, 0.16rem);
}

.ik-button:focus-visible,
.ik-menu-button:focus-visible,
.ik-carousel-button:focus-visible,
.ik-site a:focus-visible,
.ik-site summary:focus-visible {
	outline: 0.2rem solid var(--ik-color-cyan);
	outline-offset: 0.25rem;
}

.ik-button--dark {
	--ik-button-face: var(--ik-color-black);
	--ik-button-text: var(--ik-color-ink);
}

/*.ik-header {*/
/*	position: absolute;*/
/*	inset: 0 0 auto;*/
/*	z-index: 20;*/
/*	width: 100%;*/
/*	border: 0;*/
/*	background: transparent;*/
/*	box-shadow: none;*/
/*}*/

.ik-header {
	position: relative;
	z-index: 20;
	width: 100%;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.ik-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.ik-site .ik-header__logo-image {
	display: block;
	width: var(--ik-header-logo-width);
	height: auto;
	max-height: 3.5rem;
	object-fit: contain;
}

.ik-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ik-header-height);
	min-height: 0;
	padding-block: 0;
	gap: 1.5rem;
}

.ik-logo {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--ik-color-orange);
	font-family: var(--ik-font-display);
	font-weight: var(--ik-font-weight-medium);
	text-decoration: none;
}

.ik-logo__mark {
	display: grid;
	place-items: center;
	width: 2.4rem;
	aspect-ratio: 1.6;
	background: var(--ik-color-orange);
	color: var(--ik-color-black);
	clip-path: polygon(13% 0, 100% 0, 87% 100%, 0 100%);
}

.ik-nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.ik-nav .ik-button {
	min-height: 3.25rem;
	padding: 0.75rem 1.35rem;
	font-size: 1.125rem; /* 18px */
}

.ik-nav > a:not(.ik-button) {
	color: var(--ik-nav-color);
	font-family: var(--ik-font-body);
	font-size: var(--ik-nav-font-size);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

.ik-nav > a:not(.ik-button):hover,
.ik-footer__links a:hover {
	color: var(--ik-color-orange);
}



.ik-marquee {
	--ik-banner-angle: 0deg;
	position: relative;
	z-index: 4;
	display: flex;
	width: max-content;
	min-width: 200%;
	padding-block: 0.6rem;
	background: var(--ik-banner-orange);
	color: var(--ik-color-ink);
	font-family: var(--ik-font-banner);
	font-weight: var(--ik-font-weight-medium);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	transform: rotate(var(--ik-banner-angle)) scale(1.04);
	animation: ikonic-marquee 24s linear infinite;
}

.ik-marquee span {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	margin-right: var(--ik-marquee-item-spacing);
	padding: 0;
	white-space: nowrap;
}

.ik-marquee span::after {
	content: "·";
	margin-left: var(--ik-marquee-item-spacing);
}

.ik-marquee--red {
	background: var(--ik-banner-red);
}

.ik-marquee--cyan {
	background: var(--ik-banner-cyan);
}

.ik-marquee--pink {
	background: var(--ik-banner-pink);
}

.ik-marquee--yellow {
	background: var(--ik-banner-yellow);
}

.ik-marquee--straight {
	--ik-banner-angle: 0deg;
	align-items: center;
	min-height: 3.125rem;
	padding-block: 0;
}

@keyframes ikonic-marquee {
	to {
		transform: translateX(-50%) rotate(var(--ik-banner-angle)) scale(1.04);
	}
}

.ik-banner-stack {
	--ik-stack-height: 5.25rem;
	--ik-stack-upper: var(--ik-color-black);
	--ik-stack-lower: var(--ik-color-teal);
	--ik-stack-front: var(--ik-banner-orange);
	--ik-stack-front-angle: -3deg;
	--ik-stack-front-top: 1rem;
	position: relative;
	z-index: 8;
	height: var(--ik-stack-height);
	margin-block: -1.75rem;
	background: linear-gradient(
		to bottom,
		var(--ik-stack-upper) 0 50%,
		var(--ik-stack-lower) 50% 100%
	);
}

.ik-banner-stack--from-teal {
	--ik-stack-upper: var(--ik-color-teal);
	--ik-stack-lower: var(--ik-color-black);
}

.ik-banner-stack--red-pink {
	--ik-stack-front: var(--ik-banner-red);
	--ik-stack-back: var(--ik-banner-pink);
	--ik-stack-front-angle: -3deg;
	--ik-stack-back-angle: 10.95deg;
	--ik-stack-back-top: 4.125rem;
	--ik-stack-back-origin: right center;
}

.ik-banner-stack--orange-yellow-reverse {
	--ik-stack-height: 5.25rem;
	--ik-stack-front: var(--ik-banner-orange);
	--ik-stack-front-angle: 3deg;
	--ik-stack-front-top: 1rem;
	margin-block: -1.75rem;
}

.ik-banner-stack .ik-marquee {
	position: absolute;
	top: var(--ik-stack-front-top);
	left: -5%;
	z-index: 3;
	width: max-content;
	min-width: 220%;
	height: 3.125rem;
	padding-block: 0;
	background: var(--ik-stack-front);
	transform-origin: left center;
	animation: ikonic-marquee 24s linear infinite;
}

.ik-banner-stack .ik-marquee span {
	will-change: transform;
	animation: none;
}

.ik-banner-stack .ik-marquee--front {
	--ik-banner-angle: var(--ik-stack-front-angle);
	z-index: 3;
	top: var(--ik-stack-front-top);
	background: var(--ik-stack-front);
	transform-origin: left center;
}

.ik-carousel-button {
	display: inline-grid;
	width: 3rem;
	aspect-ratio: 1;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 42%);
	border-radius: 50%;
	background: transparent;
	color: var(--ik-color-ink);
	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-carousel-button:hover:not(:disabled) {
	border-color: var(--ik-color-orange);
	background: var(--ik-color-orange);
	color: var(--ik-color-black);
	transform: translateY(-0.12rem);
}

.ik-carousel-button:active:not(:disabled) {
	transform: translateY(0.08rem);
}

.ik-carousel-button:disabled {
	opacity: 0.28;
	cursor: not-allowed;
}

.ik-carousel-button svg {
	width: 1.15rem;
	height: 1.15rem;
}

.ik-footer {
	position: relative;
	z-index: 2;
	padding: 2rem 2.75rem 2.75rem;
	background: var(--ik-color-black);
}

.ik-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.ik-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.ik-footer__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.ik-site .ik-footer__logo-image {
	display: block;
	width: var(--ik-footer-logo-width);
	height: auto;
	max-height: 3.5rem;
	object-fit: contain;
}

.ik-footer__links a {
	color: var(--ik-nav-color);
	font-family: var(--ik-font-body);
	font-size: var(--ik-nav-font-size);
	font-weight: 400;
}

.ik-site .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (min-width: 48.0625rem) {
	.ik-nav {
		align-items: center;
		height: 100%;
	}

	.ik-nav > a:not(.ik-button) {
		display: inline-flex;
		align-items: center;
		height: 100%;
		line-height: 1;
	}

	.ik-nav .ik-button {
		align-self: center;
	}
}

@media (max-width: 48rem) {
	:root {
		--ik-shell-gutter: 1rem;
		--ik-font-size-h1: clamp(3rem, 8vw, 3.8rem);
		--ik-font-size-h2: clamp(2.65rem, 7vw, 3.15rem);
		--ik-font-size-manifesto: clamp(3rem, 8vw, 3.5rem);
		--ik-font-size-cta: clamp(2.8rem, 8.5vw, 4rem);
	}

    .ik-nav {
    	position: absolute;
    	inset: 100% 0 auto;
    	display: none;
    	flex-direction: column;
    	align-items: stretch;
    	padding: 1rem;
    	border-bottom: 1px solid var(--ik-color-border);
    	background: var(--ik-color-black);
		gap: 20px;

    }
    
    .ik-nav.is-open {
    	display: flex;
    }
	
    .ik-nav > br {
    	display: none !important;
    }
    
    .ik-nav > a:not(.ik-button) {
    	display: block;
    	margin: 0 !important;
    	padding: 0.4rem 0;
    	font-family: var(--ik-font-body);
    	font-size: 1.125rem !important; /* 18px */
    	font-weight: 400;
    	line-height: 1.25;
    }

	.ik-nav.is-open {
		display: flex;
	}

	.ik-nav .ik-button {
		width: 100%;
	}

	.ik-kicker {
		justify-content: center;
	}

	.ik-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.ik-menu-button {
	display: inline-flex;
}

/*
 * Push the menu toggle to the far right.
 */
.ik-menu-button {
	display: inline-grid;
	margin-left: auto;
	place-items: center;
}

/*
 * WordPress wraps the menu button in a paragraph.
 * Push that wrapper to the right too.
 */
.ik-header__inner > p:has(> .ik-menu-button) {
	margin: 0 0 0 auto !important;
}

.ik-menu-button > br {
	display: none !important;
}

/*
 * Completely remove the mobile navigation CTA.
 */
.ik-site .ik-nav a.ik-button,
.ik-site .ik-nav a[href="#ik-contact"] {
	display: none !important;
	visibility: hidden !important;
}

/*
 * Remove the paragraph wrapper WordPress may add around the CTA.
 */
.ik-nav > p:has(> a.ik-button),
.ik-nav > p:has(> a[href="#ik-contact"]) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
}

@media (max-width: 30rem) {
	:root {
		--ik-font-size-h1: clamp(2.1rem, 9.5vw, 2.6rem);
		--ik-font-size-h2: clamp(2rem, 8.5vw, 2.45rem);
		--ik-font-size-manifesto: clamp(2rem, 8.75vw, 2.5rem);
		--ik-font-size-cta: clamp(2rem, 9vw, 2.6rem);
		--ik-header-height: 4.5rem;
	}
	
	.ik-hero {
		min-height: auto;
		padding-bottom: 5.5rem;
	}

	.ik-logo__word {
		display: none;
	}

	.ik-site h1,
	.ik-site h2 {
		overflow-wrap: break-word;
	}

	.ik-button {
		width: min(100%, 20rem);
		min-height: 3.9rem;
		padding-inline: 1rem;
		font-size: 0.8rem;
		line-height: 1.25;
		text-align: center;
	}
}

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

	.ik-marquee,
	.ik-banner-stack .ik-marquee span {
		animation: none;
	}

	.ik-button,
	.ik-button::after,
	.ik-carousel-button,
	.ik-project-card {
		transition: none;
	}
}