/*
Theme Name:    Celeste
Theme URI:     https://www.itsonmedia.com/
Author:         IOM
Author URI:    https://www.itsonmedia.com/
Description:   WooCommerce Theme
Version:       1.0.0
*/
/*@import url("../fonts/fonts.css");*/
/* /////// Global & Reset */

	*, *::before, *::after {
		box-sizing: border-box;
	}
	* {
		margin: 0;
		padding: 0;
	}
	html {
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		scroll-behavior: smooth;
		interpolate-size: allow-keywords;
	}
	body {
		min-height: 100vh;
		text-rendering: optimizeSpeed;
		position: relative;
		line-height: inherit;
		line-height: 1.1;
		font-weight: 500;
		font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-optical-sizing: auto;
		transition: background-color .25s cubic-bezier(0, 0.8, 0.2, 0.9);
	}
	a {
		color: inherit;
	}
	p {
		line-height: 1.3;
		font-weight: 500;
	}
	p+p { margin-top: .75em; }
	strong { font-weight: 900; }
	ul, ol {
		padding: 0;
		list-style: none;
		margin: .75em 0 1em .75em;
	}
	ol li { list-style: decimal outside; }
	ul li { list-style: disc outside; }
	li { line-height: 1.3; }
	li+li { margin-top: 1em; }
	img, picture, video, canvas, svg {
		display: block;
		max-width: 100%;
		height: auto;
	}
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		font-size: inherit;
	}
	h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]), h6:not([class]) {
		margin: 0.25em 0;
		font-weight: 900;
	}
	hr {
		margin: 1.5rem 0;
		height: 0;
		border: none;
		border-top: 1px solid var(--content--default);
		opacity: .2;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
	}
	th, td {
		text-align: left;
		padding: 0.5em;
	}
	input, button, textarea, select {
		font: inherit;
	}
	li + li:not([class]),
	li + .li { margin-top: 0.5em; }
	pre,code,kbd,samp,tt {
		font-family: monospace;
		line-height: 100%;
	}
	small {
		font-size: .6em;
		line-height: 1em;
	}
	small p {
		opacity: .6;
	}
	::selection {
		background-color: #bfe500d7;
		color: #374200;
	}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}
img:not([src]) {
  opacity: 0; 
  transition: opacity .3s ease;
}
img[src] {
  opacity: 1;
  transition: opacity .3s ease;
}
section { position: relative; }
sup {
	font-size: .5em;
	font-weight: 500;
}

@media (max-width: 899px) { .desktoponly { display: none; } }
@media (min-width: 900px) { .mobileonly { display: none; } }

a.nav {
	text-decoration: none;
	display: flex;
	font-weight: 900;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
	letter-spacing: -.01em;
}
.close {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	font-size: 0;
	color: transparent;
}
section:target .close { display: block;}

.herotext {
	font-weight: 900;
	line-height: 1em;
	letter-spacing: -.02em;
}
@media (max-width: 899px) { .herotext { font-size: 9vw;} }
@media (min-width: 900px) { .herotext { font-size: 3.5vw;} }

.herotext + p { margin-top: .75em; }

.textblock {
	color: var(--content--default);
	padding: 7% 5%;
	margin-bottom: 1rem;
	background: url(../../../wp-content/uploads/2025/08/box.svg) 100% 100% no-repeat;
	background-size: 100% 100%;
	z-index: 2;
	position: relative;
}
.textblock a {
	text-decoration-color: hsla(205,100%,10%,.2);
	text-underline-offset: 2px;
	transition: all .25s ease-in-out;
}
.textblock a:hover {
	text-decoration-color: #00CCCC;
}
.bglines {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	z-index: 0;
	pointer-events: none;
	height: auto;
	max-width: none;
}
@media (max-width: 899px) {
	.bglines {
		top: 16vw;
		left: -10vw;
		right: -10vw;
		width: 120vw;
	}
}
@media (min-width: 900px) {
	.bglines {
		right: -7.1428571429vw;
		left: -7.1428571429vw;
		top: 0;
		max-width: none;
		width: 57.1428571426vw;	
	}
}
.bglines path {
	height: auto;
	stroke: #000;
	stroke-width: 5;
	stroke-dasharray: 5 10;
	stroke-linecap: square;
	stroke-linejoin: round;
	stroke-miterlimit: 1.2;
	fill: none;
	animation: bglines 1s linear infinite;
	opacity: .5;
}
@keyframes bglines {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: -15; }
}

img.photo {
	margin: 2rem 0;
	border-radius: 1rem;
	height: auto;
}
.caption {
	font-size: .625em;
	margin: 1rem 0;
	opacity: .65;
}
img + .caption,
picture + .caption {
	margin-top: -1.75rem;
}
a.ilio,
a.ilio:hover {
	color: #0092DF;
	text-decoration: none;
	white-space: nowrap;
}
a.ilio .bluedot, a.ilio .oh {
	width: 1em;
	display: inline-block;
	text-align: right;
}
a.ilio .bluedot,
a.ilio:hover .oh { display: none; }
a.ilio:hover .bluedot { display: inline-block; }
a.gbr {
	color: #d00000;
	text-decoration: none;
}
a.gbr:hover {
	background-color: #d00000;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}


/* /////// Themes */

:root {
	--content--contrast: hsla(205,100%,10%,1);
	--content--default: hsla(205,100%,10%,.8);
	--content--subtle: hsla(205,100%,10%,.6);
	--content--nonessential: hsla(205,100%,10%,.4);
	--action-ui: hsla(185,100%,28%,1);
}

body {background-color: #154751;}
#smile {background-color: #154751;}
#hello {background-color: #123F4A;}
#about {background-color: #103743;}
#craft {background-color: #0D2F3C;}
#work {background-color: #0B2836;}
#questions {background-color: #081F2E;}
#contact {background-color: #051626;}
#basement {background-color: #051626;}

body:has([id^="hello"]:target) { background-color: #FFCC3D;}
body:has([id^="hello"]:target) #smile {background-color: #FFCC3D;}
body:has([id^="hello"]:target) #hello {background-color: #FFBB33;}
body:has([id^="hello"]:target) #about {background-color: #FF9D33;}
body:has([id^="hello"]:target) #craft {background-color: #FF8733;}
body:has([id^="hello"]:target) #work {background-color: #FF7233;}
body:has([id^="hello"]:target) #questions {background-color: #FF5E33;}
body:has([id^="hello"]:target) #contact {background-color: #FF4733;}
body:has([id^="hello"]:target) #basement {background-color: #FF4733;}

body:has([id^="about"]:target) {background-color: #FF80FF;}
body:has([id^="about"]:target) #smile {background-color: #FF80FF;}
body:has([id^="about"]:target) #hello {background-color: #E97AFF;}
body:has([id^="about"]:target) #about {background-color: #D175FF;}
body:has([id^="about"]:target) #craft {background-color: #B870FF;}
body:has([id^="about"]:target) #work {background-color: #9966FF;}
body:has([id^="about"]:target) #questions {background-color: #7C5CFF;}
body:has([id^="about"]:target) #contact {background-color: #644DFF;}
body:has([id^="about"]:target) #basement {background-color: #644DFF;}

body:has([id^="craft"]:target) {background-color: #00EBD3;}
body:has([id^="craft"]:target) #smile {background-color: #00EBD3;}
body:has([id^="craft"]:target) #hello {background-color: #00E0D1;}
body:has([id^="craft"]:target) #about {background-color: #00D6CF;}
body:has([id^="craft"]:target) #craft {background-color: #00CCCC;}
body:has([id^="craft"]:target) #work {background-color: #00ADB2;}
body:has([id^="craft"]:target) #questions {background-color: #008F99;}
body:has([id^="craft"]:target) #contact {background-color: #007380;}
body:has([id^="craft"]:target) #basement {background-color: #007380;}

body:has([id^="work"]:target) {background-color: #008080;}
body:has([id^="work"]:target) #smile {background-color: #008080;}
body:has([id^="work"]:target) #hello {background-color: #007780;}
body:has([id^="work"]:target) #about {background-color: #006A7A;}
body:has([id^="work"]:target) #craft {background-color: #005A70;}
body:has([id^="work"]:target) #work {background-color: #004B66;}
body:has([id^="work"]:target) #questions {background-color: #003A5C;}
body:has([id^="work"]:target) #contact {background-color: #002C52;}
body:has([id^="work"]:target) #basement {background-color: #002C52;}

body:has([id^="questions"]:target) {background-color: #FF6666;}
body:has([id^="questions"]:target) #smile {background-color: #FF6666;}
body:has([id^="questions"]:target) #hello {background-color: #F65859;}
body:has([id^="questions"]:target) #about {background-color: #EC494C;}
body:has([id^="questions"]:target) #craft {background-color: #E43D41;}
body:has([id^="questions"]:target) #work {background-color: #DE3338;}
body:has([id^="questions"]:target) #questions {background-color: #D7282E;}
body:has([id^="questions"]:target) #contact {background-color: #CC181F;}
body:has([id^="questions"]:target) #basement {background-color: #CC181F;}

body:has([id^="contact"]:target) {background-color: #B1CC00;}
body:has([id^="contact"]:target) #smile {background-color: #B1CC00;}
body:has([id^="contact"]:target) #hello {background-color: #A1C200;}
body:has([id^="contact"]:target) #about {background-color: #86B200;}
body:has([id^="contact"]:target) #craft {background-color: #70A800;}
body:has([id^="contact"]:target) #work {background-color: #5C9E00;}
body:has([id^="contact"]:target) #questions {background-color: #3E9400;}
body:has([id^="contact"]:target) #contact {background-color: #2C8500;}
body:has([id^="contact"]:target) #basement {background-color: #2C8500;}


/* /////// Mobile */

@media (max-width: 899px) {

		html { font-size: 16px; }
		body { font-size: clamp(1rem, 4vw, 1.6rem); }

		.content {
			height: 0;
			opacity: 0;
			padding: 0 1rem;
			transition: opacity .125s linear;
			overflow: hidden;
		}
		section {
			overflow: hidden;
			transition: background-color .25s cubic-bezier(0, 0.8, 0.2, 0.9);
		}
		section,
		section:target {
			scroll-margin-top: 0;
		}
		section:target .content,
		section:has(*:target) .content,
		body:has([id^="work"]:target) #work .content {
			height: auto;
			opacity: 100; 
			transition: opacity 1s linear;
		}
		a.nav {
			flex-direction: column;
			justify-content: center;
			height: 12.5vh;
			min-height: 2.5rem;
			padding: 0 1em;
			font-size: 1.375rem;
			font-size: clamp(1.375rem, 5.5vw, 2.2rem);
			width: 100%;
		}
		#logo {
			margin: 0 auto;
			width: 1.5em;
			height: 1.5em;
		}
		#basement { height: 100vh; }
		.close {
			height: 12.5vh;
			min-height: 2.5rem;
			max-height: 6rem;
		}
		section:target .close { display: block;}
		.next-cta {
			display: none;
		}
	}


/* /////// Desktop */

@media (min-width: 900px) {
	html { font-size: 16px; }
	body {
		display: flex;
		flex-direction: row;
		font-size: clamp(1rem, 1.4vw, 1.2rem);
	}
	body > section {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-shrink: 0;
		flex: 1;
		transition: flex .4s cubic-bezier(0.5, 1.3, 0.7, 0.97), background-color .25s cubic-bezier(0, 0.8, 0.2, 0.9);
	}
	body > section:target,
	body > section:has(*:target),
	body:has([id^="work"]:target) #work {
		flex: 4;
	}
	body > section:not(:target):not(:has(:target)) {
		flex: 0.5; 
	}
	.nav {
		display: flex;
		align-items: center;
		width: 14.2857142857vw;
		min-width: 14.2857142857vw;
		height: auto;
		font-size: 2rem;
		position: relative;
		writing-mode: vertical-lr;
		padding: 2.5rem 0;
		transition: font-size .25s ease-out;
		top: 0;
	}
	body:has(*:target) .nav {
		width: 7vw;
		min-width: 7vw;
		font-size: 1.5rem;
		padding: 2.25rem 0;
		transition: font-size .25s ease-out, width .25s ease-out;
	}
	#logo {
		width: 2em;
		height: 2em;
		transform: translateX(-50%);
		transition:
			top .125s ease-out,
			left .25s ease-out,
			width .125s cubic-bezier(0.4, 2, 0.7, 0.8),
			height .125s cubic-bezier(0.4, 2, 0.7, 0.8);
		position: absolute;
		top: 1.125em;
		left: 7.1428571429vw;
	}
	body:has(*:target) #logo {
		width: 2em;
		height: 2em;
		top: 1.3em;
		left: 3.5vw;
	}
	.content {
		/* overflow: hidden; IS THIS NEEDED? */
		width: 0;
		height: 0;
		transition: opacity .05s ease-in-out;
		opacity: 0;
	}
	section:target .content ,
	section:has(*:target) .content {
		width: 43vw;
		height: auto;
		opacity: 100;
		padding: 0 0 4rem;
		transition: opacity 1s ease-in-out;
	}
	.content__scaffold {
		width: 43vw;
		position: relative;
		padding-top: 3vw;
	}
	.close {
		height: 100%;
		width: 7vw;
	}

	

	section:target .close { display: block;}

	#basement { display: none; }

	.next-cta {
		position: relative;
		aspect-ratio: 10 / 3;
	}
	.next-cta a {
		display: block;
		color: white;
		position: absolute;
		display: flex;
		justify-content: center;
		flex-direction: column;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		font-size: 1.5rem;
		text-align: center;
		text-decoration: none;
		font-weight: 900;
	}
}

/* Project Modal */

	body:has(dialog:target),
	body:has(dialog *:target) {
		overflow: hidden;
		background-color: #F1F7F7 !important;
	}
	dialog {
		display: block;
		position: fixed;
		top: 100vh;
		right:0;
		bottom: -5vh;
		left: 0;
		width: 100vw;
		height: 105vh;
		background-color: #fff;
		overflow: hidden;
		transition: top .25s cubic-bezier(0.05, 0.7, 0.6, 1), max-height .25s cubic-bezier(0.05, 0.7, 0.6, 1);
		border: 0;
		z-index: 10;
		max-height:0;
		overflow: hidden;
	}
	dialog:target,
	dialog:has(*:target) {
		top: 0;
		max-height: none;
		overflow-y: auto;
	}
	.dialog__container {
		position: relative;
	}
	dialog header {
		background-color: hsla(180,29%,94%,.7);
		backdrop-filter: blur(10px); 
		-webkit-backdrop-filter: blur(10px);
		position: fixed;		
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		overflow: hidden;
		z-index: 1;
		opacity: 0;
		transition: opacity .25s cubic-bezier(1, 0, 1, 0.25);
	}
	dialog:target header,
	dialog:has(*:target) header {
		height:4rem;
		opacity: 1;
	}
	dialog header a {
		display: block;
		width: 4rem;
		height: 4rem;
		transition: .25s opacity ease-in-out;
		opacity: .4;
		color: transparent;
	}
	dialog header > a:hover { opacity: .6; }
	dialog header > a:first-child {
		background: url(../../../wp-content/uploads/2025/08/work-icon.svg) no-repeat center center;
		position: absolute;
		left: 50%;
  		transform: translateX(-50%);
	}
	dialog header > a:last-child {
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		position: relative;
	}
	dialog header > a:last-child::before,
	dialog header > a:last-child::after {
		content: '';
		position: absolute;
		width: 20px;
		height: 3px;
		background-color: #001E33;
		border-radius: 1px;
	}
	dialog header > a:last-child::before { transform: rotate(45deg); }
	dialog header > a:last-child::after { transform: rotate(-45deg); }
	
	dialog article {
		padding: 0;
		height: 0;
		overflow: hidden;
		max-width: 90rem;
		margin: 0 auto;
		opacity: 0;
		transition: opacity .5s ease-in-out;
	}
	dialog:target article,
	dialog:has(*:target) article { 
		height: auto;
		opacity: 1;
	}
	.work__project__content h1:not([class]),
	.work__project__content h2:not([class]) {
		font-size: 2.25rem;
		font-weight: 900;
		letter-spacing: -.02em;
		margin: .125em 0 .25em;
		color: var(--content--contrast);
	}
	.work__project__content h2:not([class]) {
		font-size: 1.6rem;
	}
	.work__project__content p {
		color: var(--content--default);
	}
	.work__project__content a.breadcrumb {
		color: var(--content--subtle);
		text-decoration: none;
		font-size: .8rem;
		font-weight: 900;
		text-transform: uppercase;
		transition: color .25s ease-in-out;
		&:hover { color: var(--action-ui); }
	}
	.work__project__content a {
		color: var(--content--default);
		transition: color .25s ease-in-out;
		&:hover { color: var(--action-ui); }
	}
	.work__project__content img {
		aspect-ratio: 1 / 1;
		height: auto;
	}

	@media (max-width: 899px) {

		dialog article {
			padding: 0 0 15vh;
			position: relative;
			overflow: hidden;
			width: 100%;
		}
		.work__project__content {
			display: flex;
			scroll-snap-type: x mandatory;
			overflow-x: auto;
			scroll-behavior: smooth;
			width: 100%;
			height: 100%;
			min-height: 100vh;
		}
		.work__project__content::-webkit-scrollbar { display: none; }
			.work__project__content { scrollbar-width: none; }

		.work__project__content figure {
			scroll-snap-align: center;
			flex-shrink: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-top: 4rem;
		}
		.work__project__content figcaption {
			padding: 1.5rem 1rem 0;
			position: relative;
			width: 100%;
		}
		.work__project__content img {
			border-bottom: 1px solid #001e331a;
		}
		.work__project__content img.desktop-hero {
			display: none;
		}
		.work__project__content hr {
			display: none;
		}
		.work__project__content .next {
			display: block;
			width: 4rem;
			height: 4rem;
			margin: 3rem auto 1rem;
			border-radius: 3rem;
			background: url(../../../wp-content/uploads/2025/08/next.svg) hsla(180,29%,94%,.6) no-repeat center center;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
		.work__project__content .tease {
			padding-top: 14rem;
			text-align: center;
		}
	}

	@media (min-width: 900px) {
		dialog:target article,
		dialog:has(*:target) article {
			padding: 4rem 0 15vh;
		}
		.work__project__content figure:first-of-type img:not([class]) {	display: none; }
		.work__project__content img.desktop-hero {
			aspect-ratio: 2 / 1;
			border-radius: 0;
		}
		
		.work__project__content figure:not(:first-of-type) {
			max-width: 76rem;
			margin: 5vw auto 0;
			display: flex;
			flex-direction: row;
			gap: 2rem;
			padding: 0 1rem 0;
			scroll-margin-top: 5rem;
			align-items: center;
		}
		.work__project__content figure:not(:first-of-type) img {
			border-radius: .5rem;
			width: 50%;
			border: 1px solid #001e331a;
		}
		.work__project__content figure:not(:first-of-type) figcaption { max-width: 30rem; }

		.work__project__content figure:first-of-type { scroll-margin-top: 5rem; }
		.work__project__content figure:first-of-type figcaption {
			max-width: 32rem;
			margin: 4rem auto 0;
			text-align: center;
		}
		.work__project__content hr {
			content: '';
			display: block;
			width: 4rem;
			height: .5rem;
			margin: 3rem auto 0;
			opacity: 100;
			border: none;
		}
		.work__project__content .breadcrumb { display: none; }
		.work__project__content .next { display: none; }

		.work__project__content .tease {
			text-align: center;
			width: 100%;
		}
		.work__project__content figure.tease figcaption {
			max-width: 100%;
			width: 100%;
		}
		.work__project__content .tease hr {
			margin: 6rem auto 3rem;
		}
		.work__project__content .tease .next {
			display: block;
			width: 4rem;
			height: 4rem;
			margin: 3rem auto 1rem;
			border-radius: 3rem;
			background: url(../../../wp-content/uploads/2025/08/next.svg) hsla(180,29%,94%,.6) no-repeat center center;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

	}
	@media (min-width: 1440px) {
		.work__project__content img.desktop-hero {
			border-radius: .5rem;
			margin-top: 2vw;
		}
	}



/* /////// Content */

/* ------- Breakpoint Warning Modal */

	body::after {
		content: '';
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(10px);
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		background-color: hsla(0, 100%, 50%, 0.8);
		color: white;
		font-size: 1.2rem;
		z-index: 1000;
		width: 100%;
		text-align: center;
		transition: all;
		pointer-events: none;
		opacity: 0;
		white-space: pre;
	}
	@media (max-height: 290px) {
		body::after {
			opacity: 1;
			content: "🙈 \A \A Sorry. It doesn't look very good this tiny.  \A \A Email to claim your prize: \A admin@itsonmedia.com";
		}
	}
	@media (min-width: 3333px) {
		body::after {
			opacity: 1;
			content: "😅 \A \A Whoa! You have a huge screen!  \A \A Email to claim your prize: \A admin@itsonmedia.com";
		}
	}
	@media (min-width: 895px) and (max-width: 905px) {
		body::after {
			opacity: 1;
			content: "👀 \A \A Thanks for checking out \A the responsiveness of my website!  \A \A Email to claim your prize: \A admin@itsonmedia.com";
		}
	}

/* ------- Hello */

	#hello .content::after {
		content: '';
		display: block;
		height: 0;
	}
	#hello:target .content::after {
		height: 7vh;
		transition: height .5s cubic-bezier(0.4, 2.5, 0.2, 0.8);
	}

	.hello__content {
		position: relative;
	}
	@media (max-width: 899px) {
		.hello__content { height: 90vw; }
	}

	@media (min-width: 900px) {
		.hello__content { height: 44vw; }
	}
	.hello__line {
		position: absolute;
		left: 0;
		right: 0;
	}
	@media (max-width: 899px) {
		.hello__line { top: 21vw; }
	}
	@media (min-width: 900px) {
		.hello__line { top: 10vw; }
	}
	.hello__ohhey {
		position: absolute;
		left: 50%;
		width: 40%;
		transform: translateX(-50%);
		top: 0;
	}
	.hello__jhm {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 25%;
		border: solid #FF4733;
		border-radius: 100%;
		z-index: 1;
		top: 20vw; /* desktop only */
	}
	@media (max-width: 899px) {
		.hello__jhm { 
			top: 42vw;
			border-width: 1.25vw;
		}
	}
	@media (min-width: 900px) {
		.hello__jhm {
			top: 20vw;
			border-width: .6vw;
		}
	}
	.hello__intro {
		position: absolute;
		background: url(../../../wp-content/uploads/2025/08/box-short.svg) 100% 100%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: var(--content--default);
	}
	@media (max-width: 899px) {
		.hello__intro { 
			top: 54vw;
			width: 64vw;
			padding: 12vw 5vw 7vw;
		}
		.hello__intro p { font-size: 4vw; }
	}
	@media (min-width: 900px) {
		.hello__intro {
			top: 26vw;
			width: 26vw;
			padding: 5.5vw 2vw 3vw;
		}
		.hello__intro p { font-size: 1.7vw; }
	}
	.hello__welcome {
		position: absolute;
		text-align: center;
		width: 100%;
	}
	@media (max-width: 899px) {
		.hello__welcome { 
			top: 90vw;
		}
	}
	@media (min-width: 900px) {
		.hello__welcome {
			top: 40vw;
		}
	}

	.hello__line path {
		width: 350px;
		height: auto;
		stroke: #FF4733;
		stroke-width: 5;
		stroke-dasharray: 5 10;
		stroke-linecap: square;
		stroke-linejoin: round;
		stroke-miterlimit: 1.2;
		fill: none;
		animation: march 1s linear infinite;
		opacity: .3;
	}
	@keyframes march {
		from { stroke-dashoffset: 0; }
		to { stroke-dashoffset: -15; }
	}

	
/* ------- About */

	#about .bglines path { stroke: #9966FF; }
	
	#about .textblock { background-image: url(../../../wp-content/uploads/2025/08/box-about.svg); }

	.about__timeline {
		width: 100%;
		max-width: 18rem;
		margin: 2rem auto;
	}
	

/* ------- Craft */

	#craft .bglines path { stroke: #00ADB2; }

	#craft .textblock {
		background-image: url(../../../wp-content/uploads/2025/08/box-craft.svg);
		padding-bottom: 5%;
	}

	.craft__venn {
		position: relative;
		container-type: inline-size;
		list-style: none;
		margin: 0;
		border-radius: 50%;
		width: 100%;
		aspect-ratio: 1 / .9;
	}
	.craft__venn li {
		list-style: none;
		margin: 0;
		position: absolute;
		width: 70cqw;
		aspect-ratio: 1 / 1;
		border-radius: 100%;
		mix-blend-mode: multiply;
		transition: all 1.5s cubic-bezier(0.3, 1.7, 0.4, 0.8);
		animation-name: float;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
	}
	@keyframes float {
		0% { transform: translate(0, 0); }
		25% { transform: translate(1cqw, -0.5cqw); }
		50% { transform: translate(-0.75cqw, 1cqw); }
		75% { transform: translate(0.5cqw, 0.5cqw); }
		100% { transform: translate(0, 0); }
	}

	.craft__venn__strategy {
		background-color: #FFCC66;
		top: 5cqw;
		left: 6cqw;
	}
	.craft__venn__experience {
		background-color: #00CCCC;
		top: 5cqw;
		left: 24cqw;
	}
	.craft__venn__visual {
		background-color: #FF80FF;
		top: 18cqw;
		left: 15cqw;
	}
	.craft__venn:hover .craft__venn__strategy {
		top: 9cqw;
		left: 10cqw;
	}
	.craft__venn:hover .craft__venn__experience {
		top: 9cqw;
		left: 20cqw;
	}
	.craft__venn:hover .craft__venn__visual {
		top: 14cqw;
	}

	@media (hover: none) and (pointer: coarse) {
		.craft__venn__trigger {
			-webkit-tap-highlight-color: transparent;
			display: block;
			width: calc(100vw - 4rem);
			aspect-ratio: 1 / .9;
			position: absolute;
			z-index: 1;
			border-radius: 40%;
		}
		.craft__venn__toggle:checked + .craft__venn .craft__venn__strategy {
			top: 9cqw;
			left: 10cqw;
		}
		.craft__venn__toggle:checked + .craft__venn .craft__venn__experience {
			top: 9cqw;
			left: 20cqw;
		}
		.craft__venn__toggle:checked + .craft__venn .craft__venn__visual {
			top: 14cqw;
		}
	}

	.craft__venn__strategy {
		animation-delay: 0s;
		animation-duration: 6.2s;
		animation-timing-function: ease-in-out;
	}
	.craft__venn__experience {
		animation-delay: -0.8s;
		animation-duration: 5.9s;
		animation-timing-function: ease-in;
	}
	.craft__venn__visual {
		animation-delay: -1.5s;
		animation-duration: 6.5s;
		animation-timing-function: ease-out;
	}
	.craft__venn::after {
		content: "";
		position: absolute;
		display: block;
		width: 20cqw;
		height: 32cqw;
		top: 48%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: url(../../../wp-content/uploads/2025/08/Celeste-Logo.svg) no-repeat center center;
		background-size: contain;
		transition: all .5s cubic-bezier(0.3, 1.7, 0.4, 0.8);
	}
	.craft__key {
		margin: 0;
	}
	.craft__key li {
		position: relative;
		margin: 2rem 0;
		padding-left: 1.25rem;
		list-style: none;
	}
	.craft__key li::before {
		content: '';
		position: absolute;
		width: .625rem;
		top: -.125rem;
		left: 0;
		bottom: .125rem;
		border-radius: .25rem;
		transition: all 0.3s ease;
	}
	.craft__key li:hover::before {
		top: -.4rem;
		bottom: -.4rem;
	}
	.craft__key__strategy::before {
		background-color: #fff36b;
	}
	.craft__key__experience::before {
		background-color: #bdfffe;
	}
	.craft__key__visual::before {
		background-color: #FF80FF;
	}
	.craft__key h3 {
		font-size: 1.125em;
	}
	.craft__key__strategy h3 { color: #ffd70f; }
	.craft__key__experience h3 { color: #91f6f4; }
	.craft__key__visual h3 { color: #E33BE3; }


	.craft__icon {
		width: 11rem;
		margin: 2rem auto 0;
		position: relative;
		aspect-ratio: 1 / 1;
	}
	.craft__icon svg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.craft__icon__emoji {
		position: absolute;
		font-size: 2rem;
		top: 4.25rem;
		right: 0;
		left: 0;
		z-index: 2;
		text-align: center;
	}

	.craft__icon__line {
		stroke: #FF4733;
		stroke-width: 5;
		stroke-dasharray: 5 10;
		stroke-linecap: square;
		stroke-linejoin: round;
		stroke-miterlimit: 1.2;
		fill: none;
		animation: march 4s linear infinite;
	}
	.craft__icon--concept .craft__icon__line { stroke: #FFD70F; }
	.craft__icon--concept .craft__icon__circle { fill: #fff36b; }
	.craft__icon--audit .craft__icon__line { stroke: #FFD70F; }
	.craft__icon--audit .craft__icon__circle { fill: #FFF36B; }
	.craft__icon--system .craft__icon__line { stroke: #99FFBB; }
	.craft__icon--system .craft__icon__circle { fill: #C3FFD7; }
	.craft__icon--website .craft__icon__line { stroke: #91F6F4; }
	.craft__icon--website .craft__icon__circle { fill: #BDFFFE; }
	.craft__icon--software .craft__icon__line { stroke: #E1A4FF; }
	.craft__icon--software .craft__icon__circle { fill: #FADCFF; }
	.craft__icon--brand .craft__icon__line { stroke: #B6D2D7; }
	.craft__icon--brand .craft__icon__circle { fill: #E1F0F3; }
	.craft__icon--graphic .craft__icon__line { stroke: #FF91B2; }
	.craft__icon--graphic .craft__icon__circle { fill: #FFD1DF; }

	.craft__icon:hover .craft__icon__line {
		stroke-dasharray: 5 10;
	}

	#craft__services {
		text-align: center;
		max-width: 24rem;
		margin: 3rem auto;
	}
	#craft__services h3 {
		font-size: 1.25rem;
	}
	.craft__services__title {
		font-size: 2rem;
		font-weight: 900;
	}

	.service-text{}
	.service-text p{}
	.service-text ul{}
	.service-text ul li{text-align: left;}

/* ------- Work */

	#work .bglines path { stroke: #002C52; }
	#work .textblock { background-image: url(../../../wp-content/uploads/2025/08/box-work.svg); }
	.work__thumb {
		display: block;
		margin: 2rem 0;
		text-decoration: none;
		transition: color .25s ease-in-out;
	}
	.work__thumb:hover { color: var(--content--contrast); }
	.work__thumb__image {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		border-radius: .5rem;
	}
	.work__thumb__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 1s ease-in-out;
	}
	.work__thumb__details {
		display: flex;
		flex-direction: row;
		gap: .33rem;
		align-items: center;
		margin-top: .25rem;
		position: relative;
	}
	.work__thumb__details::after {
		content: '';
		display: block;
		position: absolute;
		width: 1.25rem;
		height: 1.25rem;
		background: url(../../../wp-content/uploads/2025/08/launch.svg) center center no-repeat;
		background-size: contain;
		right: 1px;
		top: 1px;
		opacity: .6;
		transition: all .25s ease-in-out;
	}
	.work__thumb:hover .work__thumb__details::after {
		opacity: 1;
		right: -1px;
		top: -1px;
	}
	.work__thumb__avatar {
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 100%;
	}
	.work__thumb__title {
		font-size: 1.125rem;
		font-weight: 900;
		letter-spacing: -0.01em;
	}

/* ------- Questions */

	#questions .bglines path { stroke: #b90007; }
	#questions .textblock { background-image: url(../../../wp-content/uploads/2025/08/box-questions.svg); }
	#questions dl {
		position: relative;
		z-index: 1;
		margin-bottom: 2rem;
	}
	#questions dt {
		margin: 1.5rem 0 .5rem;
		display: block;
		position: relative;
		scroll-margin-top: 1.5rem;
		font-size: 1.125em;
	}
	#questions dt a {
		display: block;
		text-decoration: none;
		font-weight: 900;
		padding: .125em 1em .125em .75em;
		position: relative;
		color: #fff;
	}
	#questions dt a::before {
		content: "";
		position: absolute;
		width: .3em;
		height: .3em;
		background: white;
		border-radius: 1em;
		top: .5em;
		left: .1em;
		opacity: .5;
		transition: all .25s ease-in-out;
	}
	#questions dt:target a::before {
		opacity: 1;
		width: .5em;
		height: .5em;
		top: .4em;
		left: 0;
	}
	#questions dd div { padding: 1.75rem 1.5rem; }
	@media (max-width: 899px) { #questions dd div { width: 90vw; } }
	@media (min-width: 900px) { #questions dd div { width: 43vw; } }
	#questions dd {
		overflow: hidden;
		margin-bottom: .25em;
		height: 0;
		width: 3rem;
		color: var(--content--default);
		background: url(../../../wp-content/uploads/2025/08/box-answer.svg) 100% 100% no-repeat;
	}
	#questions dt:target + dd {
		opacity: 1;
		height: auto;
		width: 100%;
		transition: 
			height .3s cubic-bezier(0.2, 1.5, 0.5, 0.9),
			width .2s ease-out,
			margin-bottom .3s cubic-bezier(0.4, 2, 0.9, 0.9);
		margin-bottom: 2rem;
	}
/* ------- Contact */

	#contact .bglines path { stroke: #226700; }
	#contact .textblock {
		background-image: url(../../../wp-content/uploads/2025/08/box-contact.svg);
		padding-right: 7%;
	}
	.contact__cta {
		text-align: center;
		width: 100%;
		margin: 1.5rem auto;
	}
	.contact__info {
		margin: 0 auto 1.5rem;
		background-color: #F2F4F5;
		border-radius: 1rem;
		padding: 1.5rem;
		display: inline-block;
	}
	.contact__button {
		background-color: #3E9400;
		font-size: 1.5rem;
		font-weight: 900;
		color: #ffffff;
		text-decoration: none;
		padding: .625em 1.5em;
		border-radius: .5rem;
		display: inline-block;
		margin: 1rem auto;
		transition: all .5s ease-out;
	}
	.contact__button:hover { animation: flashColors 5s infinite ease; }
	@keyframes flashColors {
		0% { background-color: #B1CC00; }
		16% { background-color: #FF6666; }
		33% { background-color: #FFCC3D; }
		50% { background-color: #FF80FF; }
		66% { background-color: #7C5CFF; }
		83% { background-color: #00CCCC; }
		100% { background-color: #B1CC00; }
	}
	.contact__info { text-align: center; }
	.contact__info strong { display: block; }





#questions .content__scaffold h3{padding: 0 0 0 0.3em; font-size: 35px; color: #fff; text-decoration: underline;}

@media (max-width: 767px){
	#questions .content__scaffold h3{font-size: 24px;}	
	}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }