@charset "UTF-8";

:root {
	--clr-bg-primary:#F3F3E9;
	--clr-bg-inverse:#0f1d07;
	--clr-surface-primary:#0f1d07;
	--clr-surface-inverse:#E5E5D6;
	--clr-border-primary:rgba(15,29,7,0.16);
	--clr-border-inverse:rgba(243, 243, 233,.2);
	--clr-text-primary:#0F1D07;
	--clr-text-inverse:#F3F3E9;
	--clr-text-primary-sub:rgba(15,29,7,.7);
	--clr-text-inverse-sub:rgba(243, 243, 233,.7);
	--clr-theme-green-drk:#0F1D07;
	--clr-theme-green-light:#90f188;
	--clr-theme-blue-drk:#070035;
	--clr-theme-blue-light:#82D7FF;
	--clr-theme-yellow-light:#FFD028;
	--clr-theme-purple-light:#C29CF8;
	--clr-theme-red-light:#FC589E;
	--clr-theme-aqua-light:#85EEE3;
	--clr-theme-orange-light:#F9A166;
	--spc-section-padding:clamp(5rem, 3rem + 7.7vw, 8rem);
	--spc-page-margins:clamp(1.25rem, 0rem + 5vw, 6rem);
	--spc-page-max-w:1920px;
	--rad-cards:clamp(1rem, 0.5rem + 1.9vw, 1.75rem);
	--ani-bounce:cubic-bezier(.11,.49,.21,1.49);
}

:where(*) {box-sizing: border-box;padding:0;margin: 0;}
:where(a){text-decoration: none;color: inherit;display: inline-block}

body{
	background-color: var(--clr-bg-inverse);
	color: var(--clr-text-primary);
	font-family: 'degular', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 130%;
	overflow-x: hidden;}

	p{margin: 0;padding: 0;line-height: 130%;}

h1 {
	font-weight: 600;
	font-size: clamp(6.75rem, 3.3rem + 5.3vw, 9.75rem);
	line-height: 100%;}

h2 {
	font-weight: 600;
	font-size: clamp(5.75rem, 4rem + 2.7vw, 7.25rem); 
	line-height: 105%;}


h3 {
	font-weight: 400;
	font-size: clamp(1.875rem, -1.625rem + 5.4688vw, 2.75rem);
	line-height: 130%;}

svg {
	fill: currentColor;}


.pink{background-color: lightcoral;} .blue{background-color: lightskyblue;} .filler{background-color: var(--clr-surface-primary);border:1px solid var(--clr-border-primary);} .filler-inverse{background-color: var(--clr-surface-inverse);border:1px solid var(--clr-border-inverse);}

.text-primary{color:var(--clr-text-primary)} .text-inverse{color:var(--clr-text-inverse)} .text-primary-sub{color: var(--clr-text-primary-sub);} .text-inverse-sub{color: var(--clr-text-inverse-sub);} .text-theme-blue-drk{color: var(--clr-theme-blue-drk);} .text-theme-blue-light{color: var(--clr-theme-blue-light);} .body-default{background-color:var(--clr-bg-primary)} .body-inverse{background-color:var(--clr-bg-inverse)}

.txtreplace{
	border-bottom:6px solid var(--clr-text-primary);}


/* CONTAINERS */

.body-relative{
	position: relative;
	border-radius: 0 0 clamp(1.5rem, 0.8rem + 2.7vw, 3rem) clamp(1.5rem, 0.8rem + 2.7vw, 3rem);
	z-index: 1;
}

.container{
	width: 100%;
	max-width:var(--spc-page-max-w);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spc-page-margins);
}

.new-section{
	margin-top:clamp(5rem, 3rem + 7.7vw, 8rem);
}
.section-padding{
	padding-top: clamp(5rem, 3rem + 7.7vw, 8rem);
	padding-bottom: clamp(5rem, 3rem + 7.7vw, 8rem);
}

.hero{
    min-height: 70vh;
    display: grid;
    align-items: center;
}

.featured-bg{
    width: 100%;
	max-width:var(--spc-page-max-w);
	margin-left: auto;
	margin-right: auto;
	 
}

.featured-container{
    position: relative;
    height: 170vh;
    padding: 0 var(--spc-page-margins);
}

.featured{
    position: sticky;
    top: 0;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: 100vh;
	border-radius: 32px;
    overflow: hidden;
}

.featured-mob{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: clamp(0.75rem, 0.4rem + 1.3vw, 1.25rem);
	overflow: hidden;
	position: relative;
}

.featured-mob-btn{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding: 20px 0;
	z-index: 1;
}

.featured img, .featured-mob img{
    width: 100%;
    height: 100%;
}

.featured-video{
    width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center;
}

/* NAVIGATION */

.nav-container{
	position: absolute;
	top:0;
	left:0;
	right: 0;
	width: 100%;
	max-width:var(--spc-page-max-w);
	margin-left: auto;
	margin-right: auto;
	padding: 33px var(--spc-page-margins);
}

.nav{
	display: flex;
	justify-content: space-between;
}

.segment-container{
	width: 100%;
	max-width:var(--spc-page-max-w);
	margin-left: auto;
	margin-right: auto;
	padding: 20px var(--spc-page-margins) 0;
	position: sticky;
	top:0;
	z-index: 10;
}

.segment {
	background-color: rgba(15, 29, 7, 0.75);
	color: var(--clr-text-inverse);
	backdrop-filter: blur(10px);
	border: 1px solid var(--clr-border-inverse);
	border-radius: 12px;
	padding: 8px;
	font-size: 1.125rem;
	line-height: 20px;
	display: inline-flex;
	position: relative;
	transform: translate(-50%, 0);
	left:50%;
	gap:8px;
}

.segment-active, .segment-default{
	border-radius: 4px;
	padding: 8px 12px;
	transition: .5s;
}

.segment-default{
	font-weight: 500;
}

.segment-active{
	font-weight: 600;
	background-color: var(--clr-bg-primary);
	color: var(--clr-text-primary);}

.segment-default:hover{
	background-color: var(--clr-border-inverse);}



/* BUTTONS */

.btn {
	cursor: pointer;
	font-weight: 450;
	display: inline-flex;
	gap:20px;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 28px;
	border-radius: 12px;
	padding: 16px 24px;
	transition:.4s var(--ani-bounce);
	white-space: nowrap;}

.btn:hover{
	border-radius: 40px;
	transform: scale(1.09);
	}

.btn-lg{
	font-size: 1.75rem;
	line-height: 32px;
	padding: 18px 28px;
}

.btn-sm{
	line-height: 24px;
	padding: 12px 20px;
	gap:8px;
}

.btn-primary{
	background-color: var(--clr-surface-primary);
	color: var(--clr-text-inverse);
}

.btn-border{
	border: 2px solid var(--clr-border-inverse);
	color: var(--clr-text-inverse);
}

.btn-border-strong{
	border: 2px solid var(--clr-bg-inverse);
	color: var(--clr-text-primary);
	background-color: var(--clr-bg-primary);
}

.open-work{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color:var(--clr-bg-primary);
	padding: 8px 16px 8px 8px;
	border-radius:21px 6px 6px 21px;
	color: green;
	line-height: 24px;
	font-weight: 450;
}

.pulse-circle{
	width: 24px;
	height: 24px;
	background-color: green;
	border-radius: 12px;
}

.pulse{
	width: 24px;
	height: 24px;
	background-color: green;
	border-radius: 12px;
	animation: pulse 1s ease-out infinite;
}

@keyframes pulse{
	from{
		transform: scale(1);opacity:.6;
	}
	to{
		transform: scale(2.2);opacity:0;
	}
}

/* CARDS */
.card-container{
	width: 100%;
	display: grid;
	grid: auto-flow / repeat(auto-fit, minmax(360px, 1fr));
	gap:1.25rem;
}
.card{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1 / 1;
	padding: clamp(1.25rem, 1rem + 0.8vw, 2rem);
	background-color: var(--clr-surface-primary);
	color: var(--clr-text-inverse);
	border-radius: var(--rad-cards);
}

/* EMBLA */

.embla {
	width: 100%;
	max-width:var(--spc-page-max-w);
	padding: 0 0 0 var(--spc-page-margins);
	margin: auto;
	--slide-spacing: 1.25rem;
	--slide-size:31.57%;
  }
  .embla__viewport {
	overflow: hidden;
  }
  .embla__container {
	cursor: url(images/cursor.svg), grab;
	display: flex;
	touch-action: pan-y pinch-zoom;
	margin-left: calc(var(--slide-spacing) * -1);
  }
  .embla__slide {
	transform: translate3d(0, 0, 0);
	flex: 0 0 var(--slide-size);
	min-width: 0;
	max-width: 100%;
	padding-left: var(--slide-spacing);
  }
	.embla__slide-w {
		transform: translate3d(0, 0, 0);
		flex: 0 0 94.8%;
		min-width: 0;
		max-width: 100%;
		padding-left: var(--slide-spacing);
		}

  .embla-card{
	user-select: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: clamp(1rem, 0.5rem + 1.9vw, 1.75rem);
  }
  .embla-card-drk {background-color: var(--clr-surface-primary);color: var(--clr-text-inverse);padding: clamp(1.25rem, 1rem + 0.8vw, 2rem);}
  .embla-card-light {background-color: var(--clr-surface-inverse);color: var(--clr-text-primary);padding: clamp(1.25rem, 1rem + 0.8vw, 2rem);}
	.embla-card-16x10{
		aspect-ratio: 16 / 10;
	}

  .embla-card-drk img, .embla-card-light img{
	width: 40px;
	height: 40px;
  }

  .fantasy{
	width: 100%;
	display: flex;
	gap: 2px;
	margin: 12px 0 8px 0;
	clip-path: inset(0 round 5px);
  }
  .season{flex:1;height:10px}
  .post{width: 40px;height: 10px;}
  .loss{background-color: #DA1252;} .win{background-color: #14BF50;}.champ{background-color: #B78E38;} .neither{background-color: rgba(243, 243, 233,.16);}


/* FEATURED PROJECTS - HOME */

.fp-cont{
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--spc-section-padding);
}

.fp-card{
	width: 100%;
	aspect-ratio: 7 / 3;
	background-color: var(--clr-bg-inverse);
	border-radius: clamp(1rem, 0.35rem + 2.5vw, 2rem);
	border: 2px solid var(--clr-bg-primary);
	position: sticky;
	overflow: hidden;
	--top:6rem;
}

.fp-info-container{
	position: relative;
	aspect-ratio: 7 / 3;
	overflow: hidden;
}

.fp-info-container img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fp-card1 {
	top:var(--top);
	margin-bottom: calc(var(--top) * 3);
	margin-top: 0;
}
.fp-card2 {
	top:calc(var(--top) * 1 + 100px);
	margin-bottom: calc(var(--top) * 2);
	margin-top: calc(var(--top) * 3 / -1 - 100px);
}
.fp-card3 {
	top:calc(var(--top) * 2 + 100px);
	margin-bottom: calc(var(--top) * 1);
	margin-top: calc(var(--top) * 2 / -1 - 100px);
}
.fp-card4 {
	top:calc(var(--top) * 3 + 100px);
	margin-bottom: 0rem;
	margin-top: calc(var(--top) * 1 / -1 - 100px);
}

.fp-info{
	position: absolute;
	top:0;
	right: 0;
	left: 0;
	padding: 32px 32px;
}

.fp-tags{
	background-color: var(--clr-bg-primary);
	padding: 2px 12px;
	border-radius: 6px;
	display: inline-flex;
}

.fp-tag-lg{padding:8px 16px;border-radius: 8px;}
.fp-tag-inverse{
	background-color: var(--clr-bg-inverse);
	color: var(--clr-text-inverse);
}

.fp-arrow{
	transform: translateX(-14px);
	opacity: 0;
	visibility: hidden;
	transition: .3s var(--ani-bounce);
}

.fp-card:hover .fp-arrow{
	transform: translateX(0px);
	opacity: 1;
	visibility: visible;
}

.fp-cont:hover .flair-view{
	visibility: visible;
}

.fp-markey{
	padding: 8px 40px 16px;
	border-radius: 20px;
	border: 3px solid var(--clr-border-inverse);
	font-size: clamp(2rem, 0.6rem + 5.5vw, 5rem);
	font-weight: 500;
	color: var(--clr-text-inverse-sub);
}

@media (max-width:1023px){
	.fp-card{
		aspect-ratio: 1 / 1;
	}
	.fp-info-container{
		aspect-ratio: 1 / 1;
	}
	.fp-markey{
		padding: 4px 24px 6px;
		border-radius: 12px;
		border: 2px solid var(--clr-border-inverse)
	}
}

/* MARKEY */

.markey-container{
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.markey{
	display: flex;
	overflow: hidden;
	gap: 1.25rem;
	padding: 100px 0;
	position: relative;
}

.markey-content{
	flex-shrink: 0;
	display: flex;
	gap:1.25rem;
	align-items: center;
	justify-content: space-around;
	min-width: 100%;
	animation: mark 10s linear infinite;
}

@keyframes mark{
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - 1.25rem));
	}
}

svg.svgwave {
	width: 100%;
	height: auto;
	overflow: visible;
}

svg.svgwave path {
	fill:transparent;
	stroke:var(--clr-theme-green-light);
	stroke-width:100px;
}

svg.svgwave text {
	dominant-baseline: middle;
	font-size:96px;
	font-weight: 600;
	fill: var(--clr-text-primary);
}

.svgwave-text{
	line-height: 10%;
}

/* GALLERY */
.gal-section{
	position: relative;
	display: block;
}

.gal-slide{
	overflow: hidden;
}

.gal-slide .gal-row{
	width: 120vw;
	left: -10vw;
}

.gal-row {
	display: flex;
	position: relative;
}

.gal-img{
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: clamp(0.5rem, -1rem + 2.3vw, 1rem);
	margin: 1rem;
}

.gal-img img{
	width: 100%;
	height: 100%;
}


/* PROJECT TILES */

.work-tile-row{
	display: flex;
	gap: 20px;
}

.work-tile-link{
	flex:1;
}

.work-tile-container{
	flex:1;
	position: relative;
	clip-path: inset(0% round clamp(1rem, 0.8rem + 0.5vw, 1.5rem));
	aspect-ratio: 1 / 1;
}
.work-tile{
	width: 100%;
	height: 100%;
	clip-path: inset(0% round clamp(1rem, 0.8rem + 0.5vw, 1.5rem));
	transition:.3s var(--ani-bounce);
}

.work-tile-container:hover .work-tile{
	clip-path: inset(8px round 12px);
}

.work-tile img{
	width: 100%;
	height: 100%;
}

.work-title{
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--clr-text-inverse);
	padding: 3.5% 4.5%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.work-tags{
	position: absolute;
	top:0;
	right:0;
	padding: 28px;
	display: flex;
	gap:12px;
	z-index: 10;
	transform: translateY(-70px);
	transition: 0.4s var(--ani-bounce);
}

.work-tag{
	font-size:.875rem;
	text-transform: uppercase;
	color: var(--clr-text-inverse);
	background-color: rgba(15, 29, 7,.5);
	backdrop-filter: blur(30px);
	padding: 2px 8px;
	border-radius: 4px;
}

.work-tile-container:hover .work-tags{
	transform: translateY(0);
}
.work-tile-link:hover .flair-view{
	visibility: visible;
}

/* PROJECT PAGES */

.proj-featured{
	width: 100%;
	aspect-ratio:16 / 10;
	border-radius: clamp(1rem, 0.35rem + 2.5vw, 2rem);
	overflow: hidden;
}

.proj-featured img{
	width: 100%;
	height: 100%;
}

.proj-images-container{
	display: flex;
	flex-direction: column;
	gap:20px;
}

.proj-image-two-container{
	display: flex;
	gap:20px;
}

.proj-image-full, .proj-image-two{
	width: 100%;
	border-radius: var(--rad-cards);
	overflow: hidden;
}

.proj-image-full{
	aspect-ratio: 16 / 10;
}
.proj-image-two{
	aspect-ratio: 4 / 5;
}

.proj-sticky-section{
	width: 100%;
	display: flex;
}

.proj-sticky-left, .proj-sticky-right{
	flex:1
}

.proj-sticky-left{
	position: relative;
	padding: 48px 0;
}

.proj-sticky-right{
	display: flex;
	flex-direction: column;
	gap:20px;
}

.proj-sticky-text{
	position: sticky;
	top:48px;
}

.proj-sticky-image{
	position: relative;
	aspect-ratio: 766 / 666;
	overflow: hidden;
	border-radius: var(--rad-cards);
}

.proj-image-tag{
	position: absolute;
	top:16px;
	right: 16px;
}

.proj-quote-container{
	width: 100%;
	border-bottom: 1px solid var(--clr-border-primary);
	border-top: 1px solid var(--clr-border-primary);
	padding: var(--spc-section-padding) 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.proj-next-up{
	width: 100%;
	padding: var(--spc-section-padding) 0 40px 0;
	border-top: 1px solid var(--clr-border-primary);
}

/* WORK ROWS */

.flair {
	max-width: 320px;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 5 / 4;
	position: fixed;
	top: 0;
	left: 0;
	visibility: hidden;
	z-index: 9;
	pointer-events: none;
  }

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

.flair-view{
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 24px;
	color: var(--clr-text-primary);
	background-color: var(--clr-bg-primary);
	padding: 8px 16px;
	border-radius: 10px;
	position: fixed;
	top: 0;
	left: 0;
	visibility: hidden;
	z-index: 9;
	pointer-events: none;
}


.row-container{
	width: 100%;
	position: relative;
	transition: .5s;
	border-top:1px solid var(--clr-border-primary);
}

.row-last{
	border-top:1px dashed var(--clr-text-primary);
	border-bottom:1px dashed var(--clr-text-primary);
}

.row-text{
	position: relative;
	width: 100%;
	padding: 48px 0px;
	transition: .5s var(--ani-bounce);
}

.row-bg{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0px;
	left: 50%;
	transform: translateX(-50%);
	transition: .4s;
}

.row-bg-subtle{background-color: var(--clr-border-primary);} .row-bg-blue{background-color: var(--clr-theme-blue-light);} .row-bg-green{background-color: var(--clr-theme-green-light);} .row-bg-red{background-color: var(--clr-theme-red-light);} .row-bg-yellow{background-color: var(--clr-theme-yellow-light);} .row-bg-purple{background-color: var(--clr-theme-purple-light);} .row-bg-aqua{background-color: var(--clr-theme-aqua-light);} .row-bg-orange{background-color: var(--clr-theme-orange-light);}

.row-container:hover .flair{
	visibility: visible;
}

.row-container:hover .row-bg{
	width:100%;
}

.row-container:hover .row-text{
	padding: 48px 28px;
}


.service{
	width: 100%;
	text-align: left;
	font-size: clamp(3.5rem, 1.66rem + 7.4vw, 10.5rem);
	font-weight: 600;
	line-height: 120%;
	padding-bottom: 12px;
	color: rgba(15, 29, 7,.15);
}

/* CONTACT */

.robbie-contact{
	position: absolute;
	top:130px;
	right:-3%;
	border: 10px solid white;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 10px rgba(0, 0, 0, 0.08);
	transform: rotate(15deg);
	z-index: 1;
}

.robbie-container{
	width: 100%;
	overflow: hidden;
}

.contact-card{
	position: relative;
	width: 100%;
	padding: clamp(1.75rem, 0.9rem + 3.2vw, 3rem);
	background-color: var(--clr-bg-primary);
	border: 1px solid var(--clr-border-primary);
	border-radius: var(--rad-cards);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:40px;
	overflow: hidden;
	transition: .4s var(--ani-bounce);
}

.contact-card-icon{
	width: 64px;
	height: 64px;
	border-radius: 12px;
	padding-top: 4px;
	font-size: 2.75rem;
	font-weight: 600;
}

.contact-card:hover{
	border: 1px solid var(--clr-bg-inverse);
	transform: scale(1.01);
}

/* FOOTER */

.footer{
	width: 100%;
	height: 100vh;
	background-image: radial-gradient(100% 150% at 100% 0%, #90F188 0%, #0F1D07 50%, #0F1D07 100%);
	position: sticky;
	bottom: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
}

.footer-body{
	flex:1;
	align-content: center;
}

.footer-base-line{
	width: 100%;
	height: 1px;
	background-color: var(--clr-border-inverse);
}

.footer a{
	transition: .3s;
}
.footer a:hover{
	transform: scale(1.09);}

.robbie{
	position: absolute;
	bottom:8px;
	right:22%;
	width: 250px;
	height: 250px;
	clip-path: inset(0 round 222px);
	z-index: 2;
	transition:.3s var(--ani-bounce);
}

.robbie:hover{
	clip-path: inset(8px round 222px);
}

.robbie img{
	width: 100%;
	height: 100%;
	transition: .3s;
}

.robbie:hover img{
	transform: rotate(-8deg);
}

/* GIFS */

#bingo, #plane{
	color: transparent;
	border-radius: 100px;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	white-space: nowrap;
	display: inline;
	vertical-align: middle;
}

#bingo{
	background-image: url(images/bingo.gif);
}
#plane{
	background-image: url(images/plane.gif);
}


/* TOOLTIP */

.tip-btn {
	position: relative;
	display: inline-block;
  }
  
  .tip-btn .tiptext {
	visibility: hidden;
	width: fit-content;
	white-space:nowrap;
	background-color: rgba(0,0,0,.8);
	color: #fff;
	text-align: center;
	font-size: 18px;
	border-radius: 8px;
	padding: 2px 12px;
	position: absolute;
	z-index: 1;
	bottom: 110%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s;
  }
  

  .tip-btn:hover .tiptext {
	visibility: visible;
	opacity: 1;
  }

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 2px dotted rgba(15,29,7,0.4);
	transition: .3s;
}

	.tooltiptext{
		opacity: 0;
		transition: .3s;
		visibility: hidden;
		background-color: var(--clr-surface-primary);
		color: var(--clr-text-inverse);
		border-radius: 8px;
		position: absolute;
		font-size: 1.5rem;
		text-align: center;
		top:110%;
		left: 50%;
		transform: translateX(-50%);
		width: fit-content;
		white-space: nowrap;
		padding: 0 12px;
		z-index: 2;
	}

	.tooltip:hover .tooltiptext {
		opacity: 1;
		visibility: visible;
	}




/* TEXT UTILITIES */
.eyebrow{
	font-size: 1.25rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.text-sm{font-size: 1.25rem;}
.text-lg{font-size: 1.75rem;}
.text-xl{font-size: clamp(1.5rem, 1.1795rem + 1.2821vw, 2rem);}

.text-title, .text-title-xl, .text-title-lg{font-weight: 500;}
.text-title-lg{font-size:1.75rem;}
.text-title-xl{font-size: 1.875rem;}

.text-title-hero{font-size: clamp(3rem, 2.4rem + 0.9vw, 3.5rem); line-height: 110%;}

.bold{font-weight: 600;}
.semibold{font-weight: 500;}



/* UTILITIES */
.pos-relative{
	position: relative;
}
.flex, .flex-mob{
	--align-items: center;
    --gap: 1.25rem;
    --justify-content: flex-start;
    --wrap: nowrap;
    display: flex;
    align-items: var(--align-items);
    justify-content: var(--justify-content);
    gap: var(--gap);
    flex-wrap: var(--wrap);
}
.flex-item{flex:1;}
.ju-center{justify-content: center;}

.sticky{position: sticky;top:96px;}

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

.icon-24{width: 24px;height: 24px;transition: color .3s ease-in-out}
.icon-28{width: 28px;height: 28px;}
.icon-32{width: 32px;height: 32px;}

.stack-8{margin-bottom: 8px;}
.stack-20{margin-bottom: 20px;}
.stack-24{margin-bottom: 24px;}
.stack-32{margin-bottom: 32px;}
.stack-48{margin-block-end: 48px;}
.stack-64{margin-bottom:64px;}

@media (min-width:1024px){
	.hide-on-large{
		display: none;}
}

@media (max-width:1279px){
	.embla__slide {
		flex: 0 0 47.38%;
	  }
}
@media (max-width:1023px){
	p{font-size: 1.375rem;}
	h1{font-size: clamp(4.5rem, 3rem + 5.7vw, 6.75rem);line-height: 105%;}
	h2{font-size: clamp(3.25rem, 1.6rem + 6.4vw, 5.75rem);}
	h3{font-size:1.875rem;line-height: 115%;}
	.hide-on-small{
		display: none;}
	.container{
		max-width:100%;}
	.gal-img{
		margin:.5rem;}
	.fp-cont:hover .flair-view{
		visibility: hidden;}
	.work-tile-link:hover .flair-view{
		visibility: hidden;}
	.row-container:hover .flair{
		visibility: hidden;}
	.work-tile-row{
		flex-direction: column;}
	.proj-featured{
		aspect-ratio: 5 / 4;}
	.proj-image-two-container{
		flex-direction: column;}
	.proj-image-full{
		aspect-ratio: 5 / 4;}
	.proj-sticky-section{
		flex-direction: column;}
	.proj-sticky-text{
		position: relative;
		top:auto}
	.text-title-hero{
		font-size: clamp(2.25rem, 1.7rem + 1.9vw, 3rem);}
	.flex-mob{
		flex-direction: column;
		--align-items: start;
		align-items: var(--align-items);}
	.align-items-mob{
		--align-items-mob: center;
		align-items: var(--align-items-mob);}
	.stack-48{
		margin-bottom:32px;}
	.stack-64{
		margin-bottom:48px;}
		.flair-view{display: none;}
}

@media (max-width:767px){
	.embla{
		--slide-spacing:.5rem;
	}
	.embla__slide {
		flex: 0 0 85%;}
	.embla-card-16x10{
		aspect-ratio: 5 / 4;}
}