* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html 	{}
body 	{line-height:1; background-color: #FFFFFA; font-family: "stevie-sans", sans-serif; font-weight: 400; font-style: normal;}

h1		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase}
h2		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 62px; margin-bottom: 0.5em; line-height: 1.2em}
h3		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase;}
h4		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal;}
h5		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal;}
h6		{font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal;}

p		{font-size: 16px; line-height: 1.6em; margin-bottom: 1.5em; font-weight: 400}

h1 span,
h2 span,
h3 span	{color:#FF70C3}

.heading-bg	{background-color: rgb(255 255 250); display: inline-flex; padding:10px 20px; transform: translateX(-20px)}

ul,
ol		{}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}
.inner 	{width: 1366px; max-width:100%; padding: 0 30px; margin:0 auto; }

/* HEADER */
header 			{position: relative; z-index: 100; padding: 20px 0}
header .inner 	{position: relative; display: flex; justify-content: space-between; align-items: center;}

/* HOME EXCLUSIVE */
.home .logo path			{fill: #ffffff}
.home header				{position: absolute; left: 0; top: 0; width: 100%}
.home .hamburger span		{background-color: #ffffff}
.home .header-contact		{fill: #ffffff !important}
.home .header-contact	svg	{fill:#ffffff !important}

.header-right	{display: flex; gap: 30px; align-items: center}
.header-right a	{font-size: 0}

.header-contact			{transition: 0.2s ease-out;}
.header-contact	svg		{fill:#5C5D5F !important}
.header-contact:hover	{transform: scale(1.1)}

/* HOME HERO CONTAINER */
.home-hero-container	{height: 100vh; width: 100%; display: flex; position: relative;}
.hhc-col				{width: 33.333333%; overflow: hidden; position: relative;}
.text-overlay			{position: absolute; left: 0; top: 0; inset:0; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 2; opacity: 0;  transform: translateY(40px); animation: 0.75s textin 1.5s ease-out forwards;}
.text-overlay h1		{font-size: 140px; color: #ffffff; text-shadow: 0 0 20px rgba(0,0,0,0.5)}

.hhc-image				{position: absolute; left: -1px; right: -1px; top: -1px; bottom: -1px; background-size: cover; background-position: center; opacity: 0; transform: scale(1.1)}
.hhc-col-1 .hhc-image	{animation: 1s slidedown 0.5s forwards ease-out;}
.hhc-col-2 .hhc-image	{animation: 1s slidedown 0.75s forwards ease-out;}
.hhc-col-3 .hhc-image	{animation: 1s slidedown 1s forwards ease-out;}

.home-hero-container:after	{position: absolute; left: 0; top: 0; inset:0; background-color: #E8B7D3; mix-blend-mode: multiply; content: '';}

.home-cols	{display: flex; height: 100%; width: 100%;}

/* HAMBURGER */
.hamburger							{width: 36px; height: 18px; display: block; position: relative; cursor: pointer; z-index: 20}
.hamburger span						{width: 100%; height: 1px; position: absolute; left: 0; background-color: #5C5D5F; transition:0.45s ease-in-out}
.hamburger span:nth-child(1)		{top:0px}
.hamburger span:nth-child(2)		{top:50%; transform: translateY(-1px); transform-origin: center}
.hamburger span:nth-child(3)		{bottom:0px}

.hamburger.open span				{background-color: #ffffff;}
.hamburger.open span:nth-child(2)	{opacity: 0; transform: translateY(-1px) scale(0)}
.hamburger.open span:nth-child(1)	{transform: scaleX(-1) rotate(45deg); top: 7px;}
.hamburger.open span:nth-child(3)	{transform: scaleX(-1) rotate(-45deg); bottom: 10px;}

/* NAV */
nav				{position: fixed; width: 100vw; height: 100dvh; top: -100vh; background-color: rgb(71 71 65 / 90%); left: 0; justify-content: center; align-items: center; display: flex; z-index: 0; transition: 0.75s cubic-bezier(0.75, 0, 0, 1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px)}
nav.open		{top: 0}
nav.open:before	{height: 100%}

nav ul					{text-align: center; font-family: "modern-love", sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 30px}
nav ul li				{margin: 5px 0; line-height: normal}
nav ul li a				{color:#ffffff; text-decoration: none; position: relative; display: inline-block; transition: 0.3s ease-out;}
nav ul li a:after		{height: 2px; background-color: #ffffff; position: absolute; left: 0; right: 0; bottom: 0; content: ''; opacity: 0; transform: translateY(-4px); transition: 0.3s ease-out;}
nav ul li a:hover:after	{opacity: 1; transform: translateY(0)}
nav ul li a:hover		{transform: translateY(-2px);}

nav ul li.active a	{color:#FF70C3}

/* HOME INTRO */
.home-intro			{padding: 100px 0; position: relative;}
.home-intro	.inner	{display: flex; justify-content: center; gap:70px; align-items: flex-end;}
.home-intro-text	{width: 640px; max-width: 100%;}
.home-intro-image	{width: 180px; max-width: 100%;}
.home-intro p		{font-size: 18px;}
.home-intro .btn-text-text	{margin-top: 0.85em}

.home-intro #lottie1			{position: absolute; left: 0; top: auto; width: 100%; height: auto}

.home-intro-text .heading-bg	{display: inline-block}

/* HOME LISTING */
.home-listing			{}
.home-listing .cols		{display: flex; flex-wrap: wrap; gap:40px; justify-content: space-between;}
.home-listing .col		{width: calc(50% - 20px);}
.home-listing-card		{font-size: 0; overflow: hidden; position: relative; padding-top: 44%; display: flex; justify-content: flex-end; align-items: flex-end}
.hlc-image-container	{position: absolute; left: 0; top: 0; inset: 0;}
.hlc-image				{position: absolute; left: 0; top: 0; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.5s cubic-bezier(0.75, 0, 0, 1);}
.hlc-icon				{position: relative; z-index: 2; height: 100px; width: 100px; background-color: #ffffff; margin: 28px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(0,0,0,0.3)}
.hlc-hover				{position: absolute; height: 100%; width: 100%; top:100%; transition: 0.5s cubic-bezier(0.75, 0, 0, 1); display: flex;  text-align: center; line-height: 1.2em; justify-content: center; align-items: center; font-size: 50px; font-family: "modern-love", sans-serif; font-weight: 400; color: #ffffff; text-transform: uppercase}
.hlc-hover span			{position: relative; z-index: 5; opacity: 0; transform: translateY(40px); transition: 0.5s cubic-bezier(0.75, 0, 0, 1) 0.25s;}
.hlc-hover:after		{position: absolute; left: 0; top: 0; inset:0; background-color: rgba(134,134,125,0.9); mix-blend-mode: multiply; content: ''; backdrop-filter: blur(2px);}

.home-listing-card:hover .hlc-hover			{top:0}
.home-listing-card:hover .hlc-image			{transform: scale(1.1)}
.home-listing-card:hover .hlc-hover span	{opacity: 1; transform: translateY(0)}

/* TESTIMONIALS */
.testimonials					{padding-bottom: 100px}
.testimonials-header			{position: relative;}
.testimonials-header h2			{display: inline-flex; align-items: flex-start; gap: 25px; border-top-left-radius: 110px;}
.testimonials-header h2 img		{width: 168px; flex-shrink: 0}
.testimonials-header h2 div		{width: 860px;}
#lottie2						{width: 100%; height: auto; margin: 60px 0}

.testimonials .cols	{display: flex; width: calc(100% + 40px); margin-left: -20px;}
.testimonials .col	{padding: 20px; width: 33.3333%;}

.testimonial				{background-color: #ffffff; box-shadow: 0 0 50px rgba(0,0,0,0.1); height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 50px;}
.testimonial h3				{font-size: 30px; margin-bottom: 0.75em}
.testimonial cite			{font-size: 14px; font-style: normal; line-height: 1.4em; margin-top: 30px;}
.testimonial cite strong	{display: block}

/* LATEST WORK */
.latest-work			{background-color: rgb(134 134 125); color: #ffffff; position: relative; padding: 1px 0;}
.latest-work #lottie3,
.latest-work #lottie4	{width: 100%; margin: 50px 0; z-index: 5; position: relative;}
.latest-work .inner		{position: relative; z-index: 5}
.latest-work .cols		{display: flex; justify-content: space-between; align-items: flex-start}
.latest-work .col		{width: 50%;}
.latest-work h4			{font-family: "stevie-sans", sans-serif; font-size: 27px; font-weight: 500; margin-bottom: 1em}
.latest-work-text		{width: 540px; max-width: 100%; margin-left: auto; max-width: calc(100% - 40px);}

.latest-work .btn-text-text			{background-color: transparent; border-color:#ffffff}
.latest-work .btn-text-text span	{color: #ffffff}

.latest-work-bg	{position: absolute; left: 0; top: 0; inset:0; background-size: cover; background-position: center; opacity: 0.2; z-index: 1; mix-blend-mode: multiply}

/* CONTACT SECTION */
.contact-section				{padding: 100px 0 50px}
.contact-section h2				{margin-bottom: 0.65em}
.contact-section .inner			{text-align: center}
.contact-section .contact-form	{width: 595px; max-width: 100%; margin: auto}

/* WORK PAGE */
.work-header		{height: 435px; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.work-header h1		{position: relative; text-align: center; z-index: 2; font-size: 120px; color: #ffffff; text-shadow: 0 0 20px rgba(0,0,0,0.3); opacity: 0;  transform: translateY(40px); animation: 0.75s textin 1s ease-out forwards;}
.work-header-image	{position: absolute; left: 0; top: 0; inset:0; background-size: cover; background-position: center; animation: 1.5s workhero ease-out 0.5s forwards; transform: scale(1.2); filter: blur(10px); opacity: 0}
.work-header:after	{position: absolute; left: 0; top: 0; inset:0; background-color: #E8B7D3; mix-blend-mode: multiply; content: '';}
.work-header-text	{position: relative; z-index: 5; padding: 0 20px;}

.work-nav				{}
.work-nav ul			{display: flex; padding-top: 10px; justify-content: center; list-style: none; background-color: #FFFFFA; margin-top: -20px; z-index: 5; position: relative;}
.work-nav ul li			{flex: 1; position: relative;}
.work-nav ul li:after	{width: 1px; height: 60px; display: block; background-color: #cccccc; content: ''; position: absolute; right: 0; top: 15px}
.work-nav ul li img		{height: auto;}
.work-nav ul li a		{display: flex; flex-direction: column; justify-content: space-between; height: 100%; align-items: center; font-weight: 500; text-transform: uppercase; text-decoration: none}
.work-nav ul li .icon	{flex: 1; justify-content: center; align-items: center; display: flex; padding: 10px 0; margin-bottom: 0.5em}

.work-nav ul li:last-child:after	{display: none}

.work-nav ul li					{transition: 0.3s ease-out}
.work-nav ul li,
.work-nav ul:hover li			{opacity: 0.3;}
.work-nav ul li.active,
.work-nav ul li:hover 			{opacity: 1}
.work-nav ul li.active a span	{font-weight: 700}

.work-intro			{padding: 100px 0}
.work-intro	.inner	{width: 800px; max-width: 100%;}
.work-intro p.intro	{font-weight: 500; font-size: 20px;}

/* PORTFOLIO ROWS */
.portfolio-section					{padding: 60px 0; background-color: #F2F2EC; overflow: hidden}
.portfolio-section .inner			{width: 1120px}
.portfolio-section:nth-child(even)	{background-color:#eaeadf}
.portfolio-section h2				{font-size: 36px; color: #86867d; margin-bottom: 0.25em}
.portfolio-row						{margin: 40px 0 20px}
.portfolio-row .cols				{width:100%; display: flex; gap:20px; font-size: 0; margin-bottom: 20px;}
.portfolio-row .cols img			{flex: 1;}
.portfolio-row .col					{flex: 1; flex-shrink: 0}
.portfolio-section-heading	{display: flex; justify-content: space-between; align-items: baseline}
.portfolio-section-heading span	{font-style: italic; font-weight: 700}

.photo-description		{display: flex; justify-content: flex-start; align-items: baseline; gap:20px;}
.photo-description h3	{font-family: "stevie-sans", sans-serif; font-size: 18px; text-transform: uppercase; font-weight: 700; margin:0 0 0.25em 0; line-height: 1.2em}
.photo-description p	{font-size: 14px; width: 350px;}
.photo-description div:nth-child(even)	{transform: translateY(-1px)}

.photo-description-head	{/*width: 250px;*/}

.photo-description.stacked		{flex-direction: column; margin-top: 20px; gap:10px;}
.photo-description.stacked p	{width: calc(100% - 50px);}

.photo-description.stacked div	{width: 100%;}

.photo-description-block		{display: block;}
.photo-description-block p		{width: calc(100% - 50px);}

.portfolio-row-before-after	.cols	{gap:40px;}
.portfolio-row-before-after	.col	{width: calc(50% - 20px); flex-shrink: 0}

.portfolio-row-before-after-staggered .col:nth-child(1)	{width: calc(60% - 20px)}
.portfolio-row-before-after-staggered .col:nth-child(2)	{width: calc(40% - 20px)}

.hover-me		{position: relative;}
.hover-image	{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: 0.2s ease-out}
.hover-me:hover .hover-image	{opacity: 1}

.basic-carousel-container	{width: 768px; max-width: 100%; margin: auto}
.basic-carousel	{width: 100%}
.basic-carousel img	{flex: auto}

p.credit	{font-size: 10px; color: #86867d}

/* ILLUSTRATION */
.portfolio-section-illustrations .inner			{width: 800px;}
.portfolio-section-illustrations .cols			{flex-wrap: wrap; flex-direction: column}
.portfolio-section-illustrations .col			{width: 100%; margin-bottom: 20px;}
.portfolio-section-illustrations .col img		{margin-bottom: 20px;}
.portfolio-section-illustrations .col p			{margin-bottom: 0}
.portfolio-section-illustrations .col p span	{color:#86867d}

.beforeAfter img	{max-width: unset}

.portfolio-row.videos video	{width: 100%;}

/* FOOTER */
footer					{padding-bottom: 80px; padding-top: 60px; text-align: center;}
footer h4				{font-size: 40px; margin-bottom: 0.75em}
footer ul.social				{list-style: none; display: flex; justify-content: center;}
footer ul.social li			{margin: 0 10px;}
footer ul.social li a			{width: 54px; height: 54px; border-radius: 54px; background-color: #FF70C3; fill:#ffffff !important; display: flex; justify-content: center; align-items: center; transition:0.75s cubic-bezier(0.19, 1, 0.22, 1);}
footer ul.social li a:hover	{background-color: #000000}
footer ul.social li svg		{width: auto; max-height: 25px}

ul.contact-details 				{list-style: none; display: flex; gap:10px; justify-content: center; margin-top: 30px;}
ul.contact-details li a			{text-decoration: none}
ul.contact-details li a strong	{color:#FF70C3}
ul.contact-details li a:hover	{text-decoration: underline}

/* BUTTONS */
.btn-text-text							{overflow: hidden; transition: 0.3s ease-out; text-transform: uppercase; text-decoration: none; display: inline-flex; padding:0 30px; height: 54px; flex-direction: column; background-color: #ffffff; border:2px solid #FF70C3; border-radius: 64px; box-shadow: 0 0 10px rgba(0,0,0,0)}
.btn-text-text span						{font-weight: 500; transition: 0.3s ease-out; height: 50px; width: 100%; text-align: center; justify-content: center; flex-shrink: 0; display: flex; align-items: center}
.btn-text-text:hover span:nth-child(1)	{transform: translateY(-100%);}
.btn-text-text:hover span:nth-child(2)	{transform: translateY(-100%); color:#000000}
.btn-text-text:hover					{background-color: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-color:#000000}

.btn		{padding:0 30px; height: 54px; background-color: #ffffff; border:2px solid #FF70C3; border-radius: 64px; color: #000000; font-weight: 500; text-transform: uppercase; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);}
.btn:hover	{background-color: #FF70C3; color: #ffffff}

/* FORM STYLES */
.form-container			{}
.form-row				{margin-bottom: 20px;}
.form-cell				{}

textarea,
input[type="text"]		{border:0.5px solid #000000; border-radius: 35px; width: 100%; text-align: center; font-weight: 500; padding: 20px;}
input[type="password"]	{}
input[type="submit"]	{}
textarea				{height: 180px; resize: none}

textarea:focus,
input[type="text"]:focus	{box-shadow: 0 0 0 2px #000000}

.form-field-error				{color:#FF70C3;margin-bottom:5px;}

/* SELECT CSS */
.select-css				{}

/* LEGACY COOKIE BAR */
.cookieBar              {width: 100%; background-color:rgba(0,0,0,0.5); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999;}
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }









@keyframes textin	{
	
	0%		{opacity: 0; transform: translateY(40px)}
	100%	{opacity: 1; transform: translateY(0px)}
	
}

@keyframes slidedown {
	0%		{transform: scale(1.1); opacity: 0}
	100%	{transform: scale(1); opacity: 1}
}

@keyframes workhero	{
	
	0%		{transform: scale(1.2); opacity: 0; filter: blur(10px);}
	100%	{transform: scale(1); opacity: 1; filter: blur(0px);}

}