@charset "utf-8";

/* Thanks for looking! This file is uncompressed so you can evaluate the quality of my work. Type scaling system provided by Utopia.fyi – 
https://utopia.fyi/type/calculator/?c=300,15,1.2,1400,20,1.38,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */


/* GLOBAL: INSTANTIATE
-------------------------------------------------------------------------------*/
@font-face {
	font-family: 'Greycliff';
	src: url('../fonts/greycliff-regular-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Greycliff';
	src: url('../fonts/greycliff-regular-oblique.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'Greycliff';
	src: url('../fonts/greycliff-bold-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Greycliff';
	src: url('../fonts/greycliff-bold-oblique.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'HK Super Round';
	src: url('../fonts/hksuperround-bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
}


:root {
	--color-black:  #000000;
	--color-slate:  #212127;
	--color-ash:    #9D9DAA;
	--color-gold:   #DFBB93;
	--color-tea:    #F9F7F4;
	--color-white:  #FFFFFF;
	--font-sans:     'Greycliff', Helvetica, Arial, sans-serif;
	--font-accent:   'HK Super Round', 'greycliff-cf', Helvetica, Arial, sans-serif;

	--weight-base:   400;
	--weight-bold:   800;

	--font-ty: 13px;
	--font-sm: clamp(0.7033rem, 0.6394rem + 0.341vw, 0.9377rem);
	--font-md: clamp(0.9375rem, 0.8523rem + 0.4545vw, 1.25rem);
	--font-lg: clamp(1.2497rem, 1.1361rem + 0.6059vw, 1.6663rem);
	--font-bg: clamp(1.6658rem, 1.5144rem + 0.8077vw, 2.2211rem);
	--font-hg: clamp(2.2206rem, 2.0187rem + 1.0766vw, 2.9607rem);
	--font-gt: clamp(2.96rem, 2.6909rem + 1.4352vw, 3.9467rem);
	--font-mg: clamp(2.3328rem, 1.2628rem + 5.7067vw, 6.2561rem);
	
	
	--radius-sm:     4px;
	--radius-md:     12px;
	--radius-lg:     20px;
	--radius-full:   999px;

	--space-05:    clamp(0.25rem, 0.2109rem + 0.125vw, 0.3125rem);
	--space-10:    clamp(0.5rem, 0.4219rem + 0.25vw, 0.625rem);
	--space-20:    clamp(0.9375rem, 0.7422rem + 0.625vw, 1.25rem);
	--space-35:    clamp(1.625rem, 1.2734rem + 1.125vw, 2.1875rem);
	--space-60:    clamp(2.8125rem, 2.2266rem + 1.875vw, 3.75rem);
	--space-90:    clamp(4.6875rem, 3.7109rem + 3.125vw, 6.25rem);

	--layout-slim:   1000px;
	--layout-wide:   1400px;
	--layout-full:   unset;
	--header:        100px;

	--motion-ease:   cubic-bezier(0.45, 0, 0.55, 1);
	--motion-fast:   150ms var(--motion-ease);
	--motion-slow:   450ms var(--motion-ease);
	--motion-steady: 300ms var(--motion-ease);

}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}


/* GLOBAL: FOUNDATION
-------------------------------------------------------------------------------*/
html {
	background-color: var(--color-slate);
	color: var(--color-white);
}
body {
	font-family: var(--font-sans);
	font-size: var(--font-md);
	font-weight: var(--weight-base);
}
body, select, input, textarea {
	font-weight: var(--weight-base);
}
h1, h2, h3, h4 {
	font-weight: var(--weight-bold);
	line-height: 1.2;
}
strong {
	font-weight: 700;
}
small {
	font-size: var(--font-ty);
}
ul {
	padding-inline-start: 1.5em;
	line-height: 1.3;
}
ul.list-deco li {
	list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.3"><path fill="%23eabd9c" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" d="M7.5 15.8a.6.6 0 0 1-.4-.2 70.5 70.5 0 0 0-.6-.6l-1-1.1-.1-.1a3.2 3.2 0 0 1-.3-.3 3.4 3.4 0 0 0-.1-.2 2.4 2.4 0 0 1-.3-.3 1 1 0 0 1-.2-.6.9.9 0 0 1 0-.3 1.2 1.2 0 0 1 .2-.2 3.8 3.8 0 0 1 .4-.5l2-2.1a.6.6 0 0 1 .4-.2.6.6 0 0 1 .4.2l2 2a4 4 0 0 1 .4.6 1.2 1.2 0 0 1 0 .2.9.9 0 0 1 .2.3 1 1 0 0 1-.2.6 2.4 2.4 0 0 1-.3.3 3.9 3.9 0 0 0-.2.2 3.2 3.2 0 0 1-.2.3h-.1l-.8 1-.3.2-.5.6a.6.6 0 0 1-.4.2Zm3.8-4.5a.9.9 0 0 1-.5-.2 1.5 1.5 0 0 1-.1-.2l-.1-.1-.2-.1-.1-.2a66.3 66.3 0 0 0-1-1L8.9 9c-.3-.2-.7-.6-.5-1.1a1 1 0 0 1 .2-.3l2.1-2.4a1 1 0 0 1 .7-.4.8.8 0 0 1 .6.2 1.3 1.3 0 0 1 .2.2 1.3 1.3 0 0 0 0 .2c.2 0 .3.2.5.4l.7.8.6.6a.8.8 0 0 0 .1.1 1.3 1.3 0 0 1 .1.2 1 1 0 0 1 .2.3A1.2 1.2 0 0 1 14 9l-.4.4-.1.2a2.1 2.1 0 0 1-.2.2L12.2 11a1.1 1.1 0 0 1-.8.4.6.6 0 0 1-.1 0ZM2.8 11 1.7 9.8a2.1 2.1 0 0 1-.2-.2l-.1-.2L1 9C.7 8.7.4 8.3.5 7.8a1 1 0 0 1 .2-.3 1.4 1.4 0 0 1 .2-.2.8.8 0 0 0 .1 0l.5-.7.8-.8.4-.4a1.1 1.1 0 0 0 .1-.2A1.4 1.4 0 0 1 3 5a.8.8 0 0 1 .5-.2 1 1 0 0 1 .8.4l2 2.4a1 1 0 0 1 .3.3c.2.5-.2.9-.5 1.1l-.4.5a47.8 47.8 0 0 0-1 1l-.1.2-.2.1v.1a1.6 1.6 0 0 1-.2.2.9.9 0 0 1-.5.2.6.6 0 0 1-.1 0 1.1 1.1 0 0 1-.8-.3ZM7.5 7A.6.6 0 0 1 7 7l-.7-.8-.6-.7-.8-.8a1.2 1.2 0 0 1-.3-1.3 2.2 2.2 0 0 1 .3-.5l.6-.7L6.8 1a1 1 0 0 1 .7-.4 1 1 0 0 1 .7.4l1.2 1.3.6.7a2.2 2.2 0 0 1 .3.5 1.2 1.2 0 0 1-.3 1.3l-.8.8-.6.7-.7.7a.6.6 0 0 1-.4.2Z"/></svg>');
	margin-block: 0.75em;
}
.list-reset {
	margin: unset;
	padding: unset;
	list-style: none;
}
.text-center {
	text-align: center;
}


/* GLOBAL: LINKS
-------------------------------------------------------------------------------*/
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
a:link,
a:visited,
a:active {
	color: var(--color-gold);
}
a:hover {
	text-decoration: underline;
}
::-moz-selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}
::selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}
.btn {
	position: relative;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 3%;
	min-height: 48px;
	line-height: 1.3;
	cursor: pointer;
	padding-inline: 1em;
	padding-block-start: 3px;
	transition: all var(--motion-steady);
}
.btn,
.btn:link,
.btn:visited {
	color: #FFEEC6;
}
.btn:hover {
	color: var(--color-white);
	text-decoration: none;
}
nav.btns a {
	display: grid;
	place-items: center;
	grid-template-rows: 1fr;
	gap: var(--space-10);
	transition: color var(--motion-steady);
}
nav.btns a:has(svg) {
	grid-template-columns: 30px 1fr;
}


/* GLOBAL: HEADINGS
-------------------------------------------------------------------------------*/
h2 span {
	color: var(--color-gold); 
}
[class*="accent-"] {
	color: var(--color-gold); 
	font-family: var(--font-accent);
	font-size: var(--font-ty);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 8%;
}
.accent-center {
	text-align: center;
	padding-bottom: var(--space-35);
	position: relative;
}
.accent-center::after {
	content: "";
	position: absolute;
	border-bottom: 1.5px solid currentColor;
	width: 40px;
	height: 1px;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
}
.accent-left {
	display: flex;
	white-space: nowrap !important;
}
.accent-left::after {
	content: '';
	width: 100%;
	height: 1px;
	background-color: currentColor;
	flex-grow: 1;
	min-width: 20px;
	margin: auto;
	margin-inline-start: 8px;
}


/* GLOBAL: CONTAINERS
-------------------------------------------------------------------------------*/
body {
	background-color: var(--color-slate);
}
.container {
	display: flex;
	flex-flow: column;
	margin-inline: auto;
	width: 100%;
	max-width: var(--layout-wide);
	padding-block: var(--space-35);
	padding-inline: var(--space-20);
	gap: 1em;
	overflow: visible;
}
.container-slim {
	max-width: var(--layout-slim);
}
[class*="flex-"] {
	display: flex;
}
.flex-col {
	flex-flow: column;
	justify-content: center;
}
.flex-row {
	flex-flow: row;
	align-items: center;
	gap: var(--space-20);
}
.grid-2 {
	display: grid;
	gap: var(--space-60);
}
@media (min-width: 750px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* SECTION: HEADER
-------------------------------------------------------------------------------*/
.header-grid {
	display: grid;
	padding-block: var(--space-20);
	padding-inline: var(--space-20);
	max-width: var(--layout-full);
	gap: var(--space-20);
}
.header-brand {
	display: flex;
	align-items: center;
	gap: var(--space-20);
}
.header-brand img {
	max-width: 150px;
}
.header-brand p {
	margin: unset;
	font-size: var(--font-sm);
}
.header-nav {
	display: flex;
	flex-flow: column;
	gap: var(--space-10);
}
.header-nav a {
	font-weight: var(--weight-bold);
	max-width: max-content;
}
.header-nav a:hover {
	color: var(--color-white);
}
@media (min-width: 900px) {
	.header-grid {
		grid-template-columns: auto auto;
	}
	.header-grid .btns {
		justify-self: end;
	}
	.header-nav {
		flex-flow: unset;
		gap: var(--space-20);
	}
}

/* SMART STICKY */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: transform var(--motion-steady);
	background-color: var(--color-slate);
}
.header.hide {
	transform: translateY(-100%);
}


/* SECTION: HERO
-------------------------------------------------------------------------------*/
.hero {
	padding-block-start: 200px;
}
@media (min-width: 900px) {
	.hero {
		padding-block-start: 100px;
	}
}
.hero-headline {
	font-size: var(--font-mg);
	line-height: 1;
	max-width: max(900px, 20ch);
}
.hero-headline span {
	color: var(--color-gold);
	font-style: italic;
}


/* SECTION: SHOWCASE
-------------------------------------------------------------------------------*/
.showcase {
	background-image: linear-gradient(180deg, var(--color-slate) 50%, var(--color-black));
}
.showcase-item img {
	border-radius: var(--radius-md);
}
.showcase-title {
	font-size: var(--font-lg);
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}
.showcase-desc {
	margin-block-start: 4px;
}


/* SECTION: CAPABILITIES
-------------------------------------------------------------------------------*/
.capabilities {
	background-color: var(--color-black);
	padding-block: var(--space-90);
}
.capabilities img {
	margin-inline: auto;
}
.capabilities .container {
	max-width: 1100px;
	gap: var(--space-35);
}
.capabilities-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: var(--space-20) var(--space-10);
}
.capabilities-grid a {
	text-decoration: none;
	display: flex;
	align-content: center;
	gap: 0.4lh;
	border-radius: var(--radius-full);
	line-height: 1.6;
	padding-block: 0.4lh;
	padding-inline: 0.8lh;
	font-weight: var(--weight-bold);
	color: var(--color-white);
	background-color: #141415;
	font-size: calc( var(--font-md) * 1.1);
}
.capabilities-grid svg {
	width: 32px;
	height: 32px;
}
.capabilities-grid a:hover {
	background-color: var(--color-slate);
}


/* SECTION: ABOUT
-------------------------------------------------------------------------------*/
.about-grid {
	max-width: var(--layout-slim);
	margin-block: var(--space-60);
}
@media (min-width: 500px) {
	.about-grid {
		grid-template-columns: 40% 1fr;
	}
}
.about img {
	border-radius: var(--radius-md);
}


/* SECTION: QUOTES
-------------------------------------------------------------------------------*/
.quotes {
	padding-block: var(--space-90);
}
.quotes-grid {
	gap: var(--space-35);
}
.quotes blockquote {
	background-color: var(--color-black);
	padding: var(--space-35);
	border-radius: var(--radius-md);
}
.quotes blockquote > p:first-child {
	font-size: var(--font-bg);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	text-wrap: balance;
	margin-block-start: var(--space-10);
}
blockquote cite {
	font-style: unset;
}
.quotes blockquote cite {
	display: flex;
	gap: var(--space-20);
	font-size: var(--font-sm);
	margin-block-start: var(--space-35);
}
.quotes blockquote cite p {
	margin-block: unset;
}
.quotes blockquote img {
	width: 50px;
	height: 50px;
}


/* SECTION: LOOKBOOK
-------------------------------------------------------------------------------*/
.lookbook {
	background-image: linear-gradient(180deg, var(--color-slate) 50%, var(--color-black));
}


/* SECTION: WRAPPER
-------------------------------------------------------------------------------*/
body:not(.page-home) .wrapper {
	max-width: var(--layout-slim);
	margin-inline: auto;
	padding-block-start: 120px;
	padding-block-end: var(--space-60);
	padding-inline: var(--space-20);
}


/* SECTION: FOOTER
-------------------------------------------------------------------------------*/
.footer {
	background-image: 
		url('../images/pattern.png'), 
		linear-gradient( 180deg, var(--color-black) 20%, var(--color-slate) );
}
.footer-info {
	font-size: var(--font-lg);
}
.footer-info p {
	text-wrap: balance;
}
.footer-links {
	margin-block: var(--space-35);
}
.footer-links a {
	display: flex;
	max-width: max-content;
	gap: var(--space-10);
	font-size: var(--font-lg);
	font-weight: var(--weight-bold);
	padding-block: var(--space-10);
	color: var(--color-gold);
}
.footer-links a:hover {
	color: var(--color-white);
}
.footer small {
	color: #7F7F83;
	margin-block-start: auto;
	text-shadow: 
		0px 0px 2px #000, 0px 0px 8px #000, 0px 0px 16px #000;
}


.calendly-inline-widget > iframe {
	background-color: #FAFAFA;
	border-radius: var(--radius-lg);
}