:root {
   
    --smooth: 0.75s cubic-bezier(0.5, 0, 0, 1);
    --smoothQuicker: 0.5s cubic-bezier(0.5, 0, 0, 1);
    --orange: #EF7C02;
    --orangeLight: #FEF2E5;
    --brown: #523519;
}


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

/* GLOBAL */

html 	{scroll-behavior: smooth}
body 	{line-height:1; font-family: degular, sans-serif; color: var(--brown);}

h1		{font-family: quicksand, sans-serif; font-size: 70px; font-weight: 400}
h2		{font-family: quicksand, sans-serif; font-size: 90px; font-weight: 400; margin-bottom: 0.5em; line-height: 0.85em}
h3		{font-family: quicksand, sans-serif;}
h4		{font-family: quicksand, sans-serif;}
h5		{font-family: quicksand, sans-serif;}
h6		{font-family: quicksand, sans-serif;}

p		{font-size: 20px; margin-bottom: 1em; line-height: 1.4em}
p.intro {font-size: 22px; font-weight: 700; color: var(--brown)}

ul,
ol		{font-size: 20px; margin-bottom: 1em; line-height: 1.4em}

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: 1316px; max-width:100%; margin:0 auto; padding: 0 20px; position: relative; z-index: 5}

/* HEADER */
header             {position: sticky; top: 0; width: 100%; padding: 20px 40px; z-index: 5; background-color: #ffffff; z-index: 100; transition: var(--smooth);}
header .inner      {max-width: 100%; width: 100%; display: flex; justify-content: space-between; align-items: center;}
header .logo:not(.home header .logo)       {display: block; width: auto; height: auto; transition: var(--smooth); transform: translateY(-10px); opacity: 0; animation: 0.5s fadeup 1s ease-in-out forwards;}
header .logo svg   {width: 300px; height: auto; fill: var(--brown)}

nav                          {opacity: 0; transform: translateY(-10px); animation: 0.5s fadeup 1s ease-in-out forwards;}
nav ul                       {display: flex; font-size: 18px; font-weight: 500; font-family: quicksand, sans-serif; color: #ffffff; margin: 0}
nav ul li a                  {color: var(--brown); text-decoration: none; transition: var(--smooth); position: relative;}
nav ul li:after              {color: var(--brown); content: '/'; margin: 0 12px 0 9px; transition: var(--smooth);}
nav ul li:last-child:after   {display: none}

nav ul li a:after           {content: ''; height: 2px; width: 0%; left: 0px; opacity: 0; position: absolute; left: 0; bottom: -2px; background-color: #ffffff; transition: var(--smooth);}
nav ul li:hover > a:after   {left: 0; opacity: 1; width: 100%;}

header.fixed                    {background-color: #ffffff; position: sticky; /*box-shadow: 0 5px 10px rgba(0,0,0,0.1)*/}
header.fixed .logo              {opacity: 1; transform: translateY(0px);}
header.fixed nav ul li a,        
.home header.fixed nav ul li a  {color: var(--brown)}
header.fixed nav ul li:after    {color: var(--brown)}
header.fixed nav ul li a:after  {background-color: var(--brown);}

.home header                    {position: fixed; background-color: transparent}
.home header .logo              {opacity: 0; transform: translateY(0px); transition: var(--smooth);}
.home header.fixed              {background-color: #ffffff;}
.home header.fixed .logo        {opacity: 1;}
.home header nav ul li a        {color: #ffffff}
.home header nav ul li:after    {color: #ffffff;}
.home header.fixed nav ul li:after    {color: var(--brown);}

/* HERO SECTION */
.hero-section           {position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden}
.hero-section video     {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.hero-section:after     {position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: multiply; background-color: var(--orange); content: '';}
.hero-section .polygon  {width: 1500px; left: 50%; background-color: var(--orange); opacity: 0.5; animation: 1.4s shape1 0.25s ease-in-out forwards; clip-path: polygon(100% 0, 100% 0, 0% 100%, 0 100%); transform: translateX(50%);} 
.hero-section .polygon.polygon2 {width: 1500px; left: 50%; background-color: var(--orange); opacity: 1; animation: 1s shape2 0.25s ease-in-out forwards; clip-path: polygon(100% 0, 100% 0, 0% 100%, 0 100%); transform: translateX(50%);} 

.hero-text      {position: relative; z-index: 5; text-align: center; color: #ffffff;}
.hero-text h1   {font-size: 50px; font-weight: 700; margin-top: 0.25em; opacity: 0; transform: translateY(30px); animation: 0.5s fadeup 1.5s ease-in-out forwards;}
.hero-text svg  {opacity: 0; transform: translateY(30px); animation: 0.5s fadeup 1.3s ease-in-out forwards;}

.scroll-down                {position: absolute; left: 50%; margin-left: -16px; bottom: 20px; text-align: center; z-index: 10}
.scroll-down .mini-phone    {width: 23px; height: 35px; border: 1px solid #ffffff; background-color: transparent; border-radius: 15px; margin: auto; margin-top: 14px; position: relative; text-align: center; padding-top: 1px;}
.scroll-down .scroller      {width: 3px; height: 5px; border-radius: 100%; background-color: #ffffff; display: block; margin: auto; animation: 2.5s scroller both infinite ease-in-out;}

@keyframes scroller {
    0%,20%,50%,80%,100% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(10px)
    }

    60% {
        transform: translateY(14px)
    }
}


/***********************/
/*** HERO ANIMATIONS ***/

@keyframes shape1   {
    0%    {clip-path: polygon(100% 0, 100% 0, 0% 100%, 0 100%); transform: translateX(50%);}
    100%  {clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); transform: translateX(-50%);}
}

@keyframes shape2   {
    0%    {clip-path: polygon(100% 0, 100% 0, 55% 100%, 0 100%); transform: translateX(50%);}
    100%  {clip-path: polygon(0% 0, 100% 0, 55% 100%, 0 100%); transform: translateX(-50%); opacity: 0}
}


@keyframes fadeup   {
    to  {opacity: 1; transform: translateY(0);}
}


/* WHO WE ARE */
.who-we-are         {padding: 100px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative;}
.who-we-are .inner  {display: flex; justify-content: flex-end}
.wwa-text           {width: 650px; max-width: 100%;}

.who-we-are .picture-mask   {position: absolute; z-index: 0; margin-left: -1425px; left: 50%;}
.who-we-are .polygon-2      {position: absolute; left: auto; right: 50%; margin-right: -1950px;}

/* WHAT WE ARE ABOUT */
.what-we-are-about          {padding: 100px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative;}
.what-we-are-about .inner   {display: flex;}
.wwaa-text                  {width: 900px; max-width: 100%;}

.what-we-are-about .polygon-1       {position: absolute; z-index: 0; margin-left: -2100px; left: 50%; background-color: var(--orange)}
.what-we-are-about .polygon-2       {position: absolute; left: auto; right: 50%; margin-right: -1275px;}
.what-we-are-about .picture-mask    {position: absolute; z-index: 0; margin-right: -1585px; right: 50%;}
.what-we-are-about .picture-mask img    {object-position: right; width: 80%}

/* WHAT WE ARE ABOUT */
.what-we-do             {padding: 100px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative;}
.what-we-do .inner      {display: flex; justify-content: flex-end}
.wwd-text               {width: 850px; max-width: 100%;}
.wwd-text ul            {column-count: 2; margin: 1.5em 0 1.5em 1em; font-weight: 500; color: var(--brown); list-style: none}
.wwd-text ul li         {margin-bottom: 0.75em; position: relative; padding-left: 28px;}
.wwd-text ul li:before  {width: 16px; height: 8px; content: ''; background-image:url(/_uploads/_assets/bullet.svg); background-size: cover; position: absolute; left: 0; top: 12px;}

.what-we-do .polygon-1          {position: absolute; z-index: 0; margin-left: -1414px; left: 50%; background-color: var(--orangeLight)}
.what-we-do .picture-mask       {position: absolute; z-index: 0; margin-left: -1725px; left: 50%;}
.what-we-do .picture-mask img   {right: 0}

/* REPUTATION */
.reputation-section         {position: relative; padding: 50px 0}
.reputation-section:after   {background-color: var(--brown); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ''; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);}
.reputation-section .inner  {display: flex; align-items: center; justify-content: center}
.rep-lockup                 {display: flex; width: 768px; align-items: center; gap:30px;}
.rep-lockup p               {margin: 0; color: #ffffff; font-weight: 500}

/* PROJECTS */
.projects             {padding: 100px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative; background-color: var(--orange)}
.projects .inner      {}
.projects-text        {width: 440px; max-width: 100%;}
.projects-text h2,
.projects-text p      {color: #ffffff}

.projects .polygon-1  {position: absolute; z-index: 0; margin-right: -1200px; right: 50%; background-color: #ffffff}

.projects-carousel              {margin-left: -10px;}
.projects-carousel .slick-list  {overflow: visible}
.projects-carousel .slide       {margin: 0 10px;}

.projects-carousel-container    {position: relative; margin-top: 50px;}
.slick-arrow                    {position: absolute; right: 0; top: -60px; width: 31px; height: 31px; background-image: url(/_uploads/_assets/slick-arrow.svg); background-color: transparent; background-size: cover; font-size: 0}
.slick-prev                     {right: 70px; transform: rotate(180deg)}

.home-listing-card		{font-size: 0; overflow: hidden; position: relative; padding-top: 81%; display: flex; justify-content: flex-end; align-items: flex-end; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.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: var(--smooth);}
.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: calc(100% + 1px); width: 100%; top:100%; transition: var(--smooth); display: flex;  text-align: center; line-height: 1.2em; justify-content: center; align-items: center; font-size: 20px; font-weight: 500; color: #ffffff;}
.hlc-hover span			{position: relative; z-index: 5; opacity: 0; transform: translateY(-40px); transition: var(--smooth); transition-delay: 0.5s; font-family: quicksand, sans-serif;}
.hlc-hover:after		{position: absolute; left: 0; top: 0; inset:0; background-color: var(--orange); 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)}

/* PROJECT PAGE */
.project-page           {background-color: var(--orange); overflow: hidden; position: relative;}
.project-intro          {padding: 100px 0; min-height: calc(100vh - 81px); display: flex; align-items: center; position: relative;}
.project-intro-text     {width: 680px; max-width: 100%; opacity: 0}
.project-intro h1       {margin-bottom: 0.5em; font-size: 65px; color: #ffffff;}
.project-intro p        {color: #ffffff;}
.intro-text             {margin-bottom: 20px;}
.intro-text p           {font-size: 28px;}

.project-intro-text p:last-child    {margin-bottom: 0}

.project-intro .polygon  {background-color: var(--brown); margin-right: -1420px; right: 50%; top: 0}

.project-images {background-color: var(--brown); padding: 50px 50px 30px; position: relative; z-index: 5}
.project-images img {margin: auto; max-width: 1400px; width: 100%; display: block}

.project-intro .scroll-down  {position: relative; left: auto; bottom: auto; margin: 0; transform: none !important}
.project-intro .mini-phone   {margin:30px 0 0 0}

/* FOOTER */
footer              {background-color: var(--brown); padding: 30px 60px; display: flex; align-items: center; justify-content: space-between}
footer a.logo svg   {fill:#ffffff; width: 300px; height: auto}
footer nav          {opacity: 1; transform: none}
footer nav ul li a,     
footer nav ul li:after,
footer nav ul li a:after  {color: #ffffff}
footer ul           {font-size: 14px; font-family: degular, sans-serif;}
footer p            {margin: 0; font-size: 14px; color: #ffffff;}

.footer-logo    {display: flex; gap: 40px; align-items: center}
.footer-logo svg    {max-width: 100%;}
.footer-logo .logo  {max-width: 100%; display: block}
.logo-2             {width: 170px; display: block; max-width: 100%;}

.footer-right       {display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column}
.footer-right ul    {margin-bottom: 10px; justify-content: flex-end; text-align: right;}

/* CONTACT */
.contact                {padding: 100px 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative;}
.contact .inner         {display: flex; justify-content: flex-end;}
.contact-form           {width: 640px; max-width: 100%;}
.contact .picture-mask  {margin-left: -1500px; left: 50%; z-index: 2}
.contact .polygon-2     {position: absolute; margin-left: -1200px; left: 50%; z-index: 1}

.contact .picture-mask img  {width: 80%; right: 0}

div.form-errors   { font-size: 20px; line-height: 1.4em; }
.form-errors ul   { margin-left: 20px; color: #FF0000; margin-top: 10px; }
.contact-complete { font-size: 20px; line-height: 1.4em; }

.form-row                   {display: flex; justify-content: space-between; margin-bottom: 30px;}
.form-row .form-cell        {width: calc(50% - 20px); position: relative;}
.form-row.full .form-cell   {width: 100%;}

.form-cell:after                {position: absolute; width: 100%; left: 0; bottom: 0; height: 1px; background-color: var(--brown); content: '';}
textarea,
.select-css,
.form-cell input[type="text"]   {color: var(--brown); font-size: 18px; font-weight: 700; padding: 15px 0; width: 100%; background-color: transparent}
.form-cell     {transition: var(--smooth)}

textarea    {height: 150px; width: 100%; resize: none}
.select-css {background-color: transparent; background-position: right top 50%, 0 0;}

.form-row .form-cell:focus-within:after                 {background-color: var(--orange); height: 2px;}
.form-row .form-cell:focus-within   {padding-left: 10px}

::-webkit-input-placeholder     {color:var(--brown);}
::-moz-placeholder              {color:var(--brown); opacity:1;}
:-ms-input-placeholder          {color:var(--brown);}
:-moz-placeholder               {color:var(--brown); opacity:1;}

button  {background-color: transparent}

/* POLYGON */
.polygons           {position: absolute; inset:0;}
.polygon            {width: 1500px; height: 100%; background-color: var(--orangeLight); clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); position: absolute}
.picture-mask       {overflow: hidden;}
.picture-mask img   {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center;}


/* NAV */
nav		{}
nav ul	{}

/* FOOTER */
footer	{}

/* BUTTONS */
.btn	            {font-size: 20px; font-weight: 700; padding:13px 30px 17px 30px; text-align: center; color: var(--brown); border:1px solid var(--brown); border-radius: 40px; text-decoration: none; display: inline-block; margin-top: 0.5em; overflow: hidden; position: relative;}
.btn span           {position: relative; transition: var(--smoothQuicker); display: block; z-index: 2}
.btn:after          {transform: scale(0); transition: var(--smoothQuicker); background-color: var(--orange); position: absolute; inset:0; content: ''; border-radius: 40px; opacity: 0; transition: var(--smoothQuicker);}
.btn:hover:after    {transform: scale(1); opacity: 1}
.btn:hover          {border-color: var(--orange);}
.btn:hover span     {color: #ffffff}

/* FORM STYLES */
.form-container			{}
.form-row				{}
.form-cell				{}

input[type="text"]		{}
input[type="password"]	{}
input[type="submit"]	{}
textarea				{}

/* 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;}