/*
Theme Name: Studio Simpatico
Theme URI: http://www.studiosimpati.co/
Description: This custom WordPress theme was designed and developed with love by Studio Simpatico.
Author: Studio Simpatico
Author URI: http://www.studiosimpati.co/
Version: 1.0.0
*/

/***************************************************************************************************************************************************************************************/

/* HTML5 BOILERPLATE MINIFIED */

/***************************************************************************************************************************************************************************************/

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;}canvas{display:inline;}video{display:inline;}audio:not([controls]){display:none}[hidden]{display:none}html{color:#222;font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button{-webkit-appearance:button;color:#222;cursor:pointer;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;overflow:visible;vertical-align:middle}input{color:#222;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;vertical-align:middle}select{color:#222;font-family:sans-serif;font-size:100%;margin:0;vertical-align:middle}textarea{color:#222;font-family:sans-serif;font-size:100%;margin:0;overflow:auto;resize:vertical;vertical-align:top}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{bottom:-.25em;font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;top:-.5em;vertical-align:baseline}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0;white-space:normal}input[type="button"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="reset"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="radio"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

/***************************************************************************************************************************************************************************************/

/* BODY STYLES */

/***************************************************************************************************************************************************************************************/

:root {
	/* Colors */
	--white: #fff;
	--black: #000;
	--orange: #FF4100;
	--orange-light: #FF5319;
	--yellow: #FFC700;
	--beige: #F5DBB6;
	--page-bg: #FFE3C1;
	--dark-brown: #171300;
	--blue: #6CAAF2;

	/* Semantic colors */
	--background: var(--page-bg);
	--text: var(--dark-brown);

	/* Typography */
	--body-font: "campaign", sans-serif;
	--heading-font: 'Fraunces', Georgia, serif;
	--label-font: 'Input Sans', monospace, sans-serif;

	/* Layout */
	--container-width: 90vw;
	--container-max-width: 1440px;
	--container-outer-padding: 50px;
	--container-outer-margin: calc((100vw - var(--container-width)) / 2);
	--gap: 40px;
	--grid: repeat(12, minmax(0,1fr));

	/* Spacing - Module (large section padding/margins) */
	--space-3xl: 180px;  /* Major section spacing */
	--space-2xl: 140px;  /* Large element spacing */
	--space-xl: 100px;   /* Medium-large spacing */
	--space-l: 70px;     /* Standard section spacing */
	--space-m: 48px;     /* Heading to content */
	--space-s: 32px;     /* Small section spacing */

	/* Spacing - Text (subtle in-module spacing) */
	--text-spacing-xxsmall: 8px;
	--text-spacing-xsmall: 16px;
	--text-spacing-small: 24px;
	--text-spacing-medium: 32px;
	--text-spacing-large: 40px;
	--text-spacing-xlarge: 48px;
	--text-spacing-xxlarge: 56px;
}

html {
	font-size: 100%;
}

body {
	background: var(--background);
	color: var(--text);
	font-family: var(--body-font);
	font-size: calc(18rem / 16);
	font-weight: 300;
	line-height: 1.6;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.svg-inline--fa {
	display: inline-block;
	font-size: inherit;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}

.svg-inline--fa path {
	fill: currentColor;
}

a {
	text-decoration: none;
	transition: all .25s ease;
}

input[type=submit],
button {
	border-radius: 0;
	font-family: inherit;
	transition: all .25s ease;
}

img,
svg,
iframe,
picture {
	max-width: 100%;
}

img,
svg,
picture {
	height: auto;
}

h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
	margin: 0;
}

h1,
.heading-1 {
	font-family: var(--heading-font);
	font-size: calc(160rem / 16);
	font-weight: 700;
	line-height: 0.75;
	letter-spacing: 0;
}

h2,
.heading-2 {
	font-family: var(--heading-font);
	font-size: calc(140rem / 16);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

h3,
.heading-3 {
	font-family: var(--heading-font);
	font-size: calc(60rem / 16);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

h4,
.heading-4 {
	font-family: var(--heading-font);
	font-size: calc(48rem / 16);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

p,
ul,
ol {
	margin: 0;
	font-size: calc(18rem / 16);
	line-height: 1.67;
	letter-spacing: 0.1px;
}

.eyebrow {
	color: var(--orange);
	display: block;
	font-family: var(--label-font);
	font-size: calc(16rem / 16);
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.5;
	text-transform: uppercase;
}

header,
section,
footer,
article {
	width: 100%;
}

.container {
	clear: both;
	margin: 0 auto;
	max-width: var(--container-max-width);
	padding: 0 var(--container-outer-padding);
	position: relative;
	width: var(--container-width);
}

.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--grid);
}

.accessibility {
	backface-visibility: hidden;
	left: -999999999px;
	opacity: 0;
	position: absolute;
}

/*** Buttons ***/

.btn {
	border-radius: calc(80rem / 16); /* 80px */
	display: inline-flex;
	align-items: center;
	gap: calc(8rem / 16); /* 8px */
	font-family: var(--body-font);
	font-size: calc(20rem / 16); /* 20px */
	font-weight: 500; /* Campaign Medium */
	letter-spacing: 0.1px;
	line-height: calc(32rem / 16); /* 32px */
	padding: calc(16rem / 16) calc(48rem / 16) calc(16rem / 16) calc(48rem / 16); /* 16px 48px 16px 48px */
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

/* Primary */

.btn.primary {
	background: var(--blue);
	border: calc(3rem / 16) solid var(--dark-brown); /* 3px */
	color: var(--dark-brown);
}

.btn.primary:hover {
	background: var(--orange-light);
	color: var(--white);
}

/*** Content Styles ***/

.content-styles a:not([class]) {
	color: var(--black);
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: var(--black);
	text-decoration-thickness: 2px;
}

.content-styles a:not([class]):hover {
	text-decoration-color: var(--black);
	text-underline-offset: 2px;
}

/*** Video Lightboxes ***/

dialog::backdrop {
	background: var(--black);
	opacity: .6;
}

.white-popup-block {
	background: var(--black);
	margin: auto;
	max-width: 80vw;
	padding: 0;
	width: 100%;
}

.white-popup-block video,
.white-popup-block iframe {
	aspect-ratio: 16/9;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.white-popup-block .close-popup {
	background: none;
	border: none;
	color: var(--white);
	font-size: calc(24rem/16);
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/***************************************************************************************************************************************************************************************/

/* MODULES */

/***************************************************************************************************************************************************************************************/

/* Hero */

.module.hero {
	background: var(--orange);
	min-height: calc(844rem / 16); /* 844px */
	overflow: hidden;
	padding: var(--space-s) 0 var(--space-3xl);
	position: relative;
}

.module.hero .container {
	position: relative;
	z-index: 2;
}

/* Hero Background Shapes */

.module.hero .bg-shape-1 {
	left: 0;
	position: absolute;
	top: 0;
	width: calc(428rem / 16); /* 428px */
	z-index: 0;
}

.module.hero .bg-shape-1 svg {
	fill: var(--orange-light);
	height: auto;
	width: 100%;
}

.module.hero .bg-shape-2 {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(283rem / 16); /* 283px */
	z-index: 0;
}

.module.hero .bg-shape-2 svg {
	fill: var(--orange-light);
	height: auto;
	width: 100%;
}

/* Hero Logo */

.module.hero .hero-logo {
	margin: 0 auto var(--space-2xl);
	width: calc(127rem / 16); /* 127px */
}

.module.hero .hero-logo svg {
	fill: var(--white);
	height: auto;
	width: 100%;
}

/* Hero Content */

.module.hero .hero-content {
	position: relative;
	text-align: center;
}

.module.hero .hero-headline-wrapper {
	display: inline-block;
	margin: 0 auto var(--space-s);
	max-width: calc(1196rem / 16); /* 1196px */
	position: relative;
}

.module.hero .hero-headline {
	color: var(--yellow);
	font-family: var(--heading-font);
	font-size: calc(160rem / 16); /* 160px */
	font-weight: 700;
	line-height: calc(120rem / 16); /* 120px line height */
	margin: 0;
	text-align: center;
}

.module.hero .hero-saxophone {
	font-size: calc(80rem / 16); /* 80px emoji */
	left: 100%;
	margin-left: calc(16rem / 16); /* 16px gap from text */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.module.hero .hero-subheadline {
	color: var(--white);
	font-family: var(--body-font);
	font-size: calc(24rem / 16); /* 24px */
	font-weight: 300; /* Campaign Light */
	line-height: calc(32rem / 16); /* 32px */
	margin: 0 auto var(--space-m);
	max-width: calc(990rem / 16); /* 990px */
	text-align: center;
}

.module.hero .hero-button {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-xl);
}

.module.hero .hero-button .btn {
	align-items: center;
	display: inline-flex;
	gap: calc(12rem / 16); /* 12px gap between text and icon */
}

.module.hero .hero-button .btn-icon {
	display: inline-flex;
	align-items: center;
}

.module.hero .hero-button .btn-icon svg {
	fill: currentColor;
	height: calc(16rem / 16); /* 16px arrow */
	width: calc(16rem / 16);
}

/* Hero Video */

.module.hero .hero-video {
	background: var(--dark-brown); /* Black container */
	border-radius: calc(20rem / 16); /* 20px */
	margin: 0 auto var(--space-2xl);
	max-width: calc(1024rem / 16); /* 1024px */
	overflow: hidden;
	padding: 16px; /* Padding inside black container */
	position: relative;
}

.module.hero .hero-video video {
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: calc(12rem / 16); /* Rounded video inside container */
	display: block;
	height: 100%;
	width: 100%;
}

/* Hero Byline */

.module.hero .hero-byline {
	margin: 0 auto;
	text-align: center;
}

.module.hero .hero-byline-text {
	display: flex;
	flex-wrap: wrap;
	font-family: var(--label-font); /* Input Sans */
	font-size: calc(20rem / 16); /* 20px */
	font-weight: 700; /* Bold */
	gap: calc(8rem / 16); /* 8px gap between circles */
	justify-content: center;
	line-height: calc(40rem / 16); /* 40px */
	margin: 0;
	text-transform: uppercase;
}

/* Word wrapper - keeps letters together */
.module.hero .hero-byline-text .word {
	display: flex;
	gap: calc(8rem / 16); /* 8px gap between circles */
}

/* Each letter in a dark circle */
.module.hero .hero-byline-text .letter {
	align-items: center;
	background: var(--dark-brown);
	border-radius: 50%;
	color: var(--white); /* White letters */
	display: inline-flex;
	height: calc(48rem / 16); /* 48px circle */
	justify-content: center;
	width: calc(48rem / 16);
}

/* Space between words - larger gap */
.module.hero .hero-byline-text .space {
	width: calc(16rem / 16); /* 16px space (2x normal gap) */
}

/* Plugins Module */

.module.plugins {
	padding: var(--space-3xl) 0 var(--space-3xl);
}

.module.plugins .plugins-grid {
	display: flex;
	flex-direction: column;
	gap: 52px; /* 52px between each repeater card */
}

.module.plugins .plugin-card {
	background: var(--white);
	border-radius: calc(60rem / 16); /* 60px */
	display: grid;
	gap: 0;
	grid-template-columns: repeat(12, 1fr);
	overflow: hidden;
}

.module.plugins .plugin-card.image-left .plugin-media {
	background: var(--beige);
	grid-column: 1 / span 5;
}

.module.plugins .plugin-card.image-left .plugin-content {
	grid-column: 6 / span 7;
}

.module.plugins .plugin-card.image-right .plugin-media {
	background: var(--beige);
	grid-column: 8 / span 5;
	grid-row: 1;
}

.module.plugins .plugin-card.image-right .plugin-content {
	grid-column: 1 / span 7;
	grid-row: 1;
}

.module.plugins .plugin-media {
	align-items: center;
	display: flex;
	justify-content: center;
}

.module.plugins .plugin-media img {
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

.module.plugins .plugin-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-m);
}

.module.plugins .plugin-content .eyebrow {
	font-family: var(--label-font); /* Input Sans */
	font-size: calc(16rem / 16); /* 16px */
	font-weight: 700; /* Bold */
	letter-spacing: 3px;
	line-height: calc(24rem / 16); /* 24px */
	margin-bottom: var(--text-spacing-xsmall);
}

.module.plugins .plugin-content h3 {
	font-family: var(--heading-font); /* Fraunces */
	font-size: calc(60rem / 16); /* 60px */
	font-weight: 700; /* Bold */
	line-height: calc(60rem / 16); /* 60px */
	margin-bottom: var(--text-spacing-small);
}

.module.plugins .plugin-content .content-styles {
	margin-bottom: 16px;
}

.module.plugins .plugin-content .content-styles p {
	font-family: var(--body-font); /* Campaign */
	font-size: calc(18rem / 16); /* 18px */
	font-weight: 300; /* Light */
	letter-spacing: 0.1px;
	line-height: calc(30rem / 16); /* 30px */
}

.module.plugins .download-link {
	align-items: center;
	color: var(--dark-brown);
	display: inline-flex;
	font-family: var(--body-font); /* Campaign */
	font-size: calc(22rem / 16); /* 22px */
	font-weight: 500; /* Medium */
	gap: calc(16rem / 16); /* 16px gap between text and icon */
	letter-spacing: 0.1px;
	line-height: calc(32rem / 16); /* 32px */
	text-decoration: none;
}

.module.plugins .download-link:hover {
	color: var(--orange);
}

.module.plugins .download-icon {
	align-items: center;
	background: var(--blue);
	border-radius: 50%;
	display: inline-flex;
	height: calc(48rem / 16); /* 48px circle */
	justify-content: center;
	width: calc(48rem / 16);
}

.module.plugins .download-icon svg {
	fill: var(--white);
	height: calc(20rem / 16); /* 20px arrow */
	width: calc(20rem / 16);
}

.module.plugins .download-link:hover .download-icon {
	background: var(--orange);
}

/* Who We Are Module */

.module.who-we-are {
	background: var(--page-bg);
	overflow: visible;
	padding: 0 0 var(--space-3xl);
	position: relative;
	text-align: center;
}

/* Watermark with parallax */
.module.who-we-are .watermark {
	left: 50%;
	opacity: 0.1;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(800rem / 16); /* 800px watermark */
	z-index: 0;
}

.module.who-we-are .watermark svg {
	display: block;
	height: auto;
	width: 100%;
}

/* Large watermark at bottom, peeking into section below */
.module.who-we-are .watermark-bottom {
	bottom: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 50%);
	width: calc(1518rem / 16); /* 1518px */
	z-index: 1;
}

.module.who-we-are .watermark-bottom svg {
	display: block;
	fill: var(--yellow);
	height: auto;
	width: 100%;
}

.module.who-we-are .container {
	position: relative;
	z-index: 2;
}

.module.who-we-are .content {
	margin: 0 auto;
	max-width: calc(900rem / 16); /* 900px max width for readability */
}

.module.who-we-are h2 {
	color: var(--orange);
	font-family: var(--heading-font); /* Fraunces */
	font-size: calc(48rem / 16); /* 48px */
	font-weight: 700; /* Bold */
	letter-spacing: 0;
	line-height: calc(56rem / 16); /* 56px */
	margin-bottom: var(--space-m);
}

.module.who-we-are .btn {
	align-items: center;
	display: inline-flex;
	gap: calc(12rem / 16); /* 12px gap between text and icon */
}

.module.who-we-are .btn-icon {
	display: inline-flex;
	align-items: center;
}

.module.who-we-are .btn-icon svg {
	fill: currentColor;
	height: calc(16rem / 16); /* 16px arrow */
	width: calc(16rem / 16);
}

/* Byline Module */

.module.byline {
	background: var(--orange);
	padding: var(--space-xl) 0 var(--space-xl);
	position: relative;
	text-align: center;
	z-index: 2;
}

.module.byline .content {
	margin: 0 auto;
	max-width: calc(1196rem / 16);
}

.module.byline h2 {
	color: var(--yellow);
	font-family: var(--heading-font); /* Fraunces */
	font-size: calc(140rem / 16); /* 140px */
	font-weight: 700; /* Bold */
	letter-spacing: 0;
	line-height: calc(138rem / 16); /* 138px */
	margin-bottom: var(--space-l);
}

/* Footer Module */

.module.footer-module {
	background-color: var(--orange);
	color: var(--white);
	padding-bottom: var(--space-l);
}

.module.footer-module .footer-content {
	align-items: center;
	background: var(--dark-brown);
	border-radius: calc(60rem / 16); /* 60px rounded corners */
	display: flex;
	justify-content: space-between;
	padding: 65px 80px;
}

.module.footer-module .footer-legal p {
	color: var(--white);
	font-size: calc(14rem / 16); /* 14px */
	margin: 0;
}

.module.footer-module .footer-contact {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-medium);
}

.module.footer-module .email-link {
	color: var(--white);
	font-size: calc(14rem / 16); /* 14px */
	text-decoration: none;
}

.module.footer-module .email-link:hover {
	color: var(--yellow);
}

/***************************************************************************************************************************************************************************************/

/* MQ MIN-WIDTH 1778 (1778 is when the container width is ~1600) */

/***************************************************************************************************************************************************************************************/

@media only screen and (min-width: calc(1778rem/16)) {

	:root {
		--container-width: var(--container-max-width);
	}

}

/***************************************************************************************************************************************************************************************/

/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem/16)) {

	:root {
		--container-width: 100%;
		--container-outer-margin: 0px;
	}

}

/***************************************************************************************************************************************************************************************/

/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem/16)) {

	:root {
		--container-outer-padding: 40px;
	}

}

/***************************************************************************************************************************************************************************************/

/* MQ MAX-WIDTH 950 - Tablet Sizes */

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	:root {
		/* Spacing - Module (~70% of desktop) */
		--space-3xl: 126px;
		--space-2xl: 100px;
		--space-xl: 70px;
		--space-l: 50px;
		--space-m: 34px;
		--space-s: 24px;
	}

	/* Hero Tablet */

	.module.hero {
		min-height: calc(600rem / 16);
	}

	.module.hero .bg-shape-1 {
		width: calc(300rem / 16);
	}

	.module.hero .bg-shape-2 {
		width: calc(200rem / 16);
	}

	.module.hero .hero-logo {
		width: calc(100rem / 16);
	}

	.module.hero .hero-headline {
		font-size: calc(100rem / 16);
		line-height: calc(90rem / 16);
	}

	.module.hero .hero-subheadline {
		font-size: calc(20rem / 16);
		line-height: calc(28rem / 16);
	}

	.module.hero .hero-video {
		max-width: calc(800rem / 16);
	}

	.module.hero .hero-byline-text {
		font-size: calc(18rem / 16);
		gap: 6px;
	}

	.module.hero .hero-byline-text .word {
		gap: 6px;
	}

	.module.hero .hero-byline-text .letter {
		height: calc(40rem / 16);
		width: calc(40rem / 16);
	}

	.module.hero .hero-byline-text .space {
		width: 12px;
	}

	/* Plugins Module - Tablet */

	.module.plugins .plugins-grid {
		gap: 36px;
	}

	.module.plugins .plugin-card {
		grid-template-columns: 1fr;
	}

	.module.plugins .plugin-card.image-left .plugin-media,
	.module.plugins .plugin-card.image-right .plugin-media {
		grid-column: 1;
		grid-row: 1;
	}

	.module.plugins .plugin-card.image-left .plugin-content,
	.module.plugins .plugin-card.image-right .plugin-content {
		grid-column: 1;
		grid-row: 2;
	}

	.module.plugins .plugin-content h3 {
		font-size: calc(48rem / 16);
		line-height: calc(48rem / 16);
	}

	/* Byline Module - Tablet */

	.module.byline h2 {
		font-size: calc(100rem / 16);
		line-height: calc(100rem / 16);
	}

	/* Footer Module - Tablet */

	.module.footer-module .footer-content {
		border-radius: calc(40rem / 16);
		flex-direction: column;
		gap: var(--text-spacing-medium);
		padding: var(--text-spacing-large);
		text-align: center;
	}

	.module.footer-module .footer-contact {
		flex-direction: column;
	}

}

/***************************************************************************************************************************************************************************************/

/* MQ MAX-WIDTH 650 - Mobile Sizes */

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	:root {
		/* Layout */
		--container-outer-padding: 20px;
		--grid: 1fr;

		/* Spacing - Module (~50% of desktop) */
		--space-3xl: 90px;
		--space-2xl: 70px;
		--space-xl: 50px;
		--space-l: 36px;
		--space-m: 24px;
		--space-s: 20px;
	}

	/* Hero Mobile */

	.module.hero {
		min-height: auto;
	}

	.module.hero .bg-shape-1 {
		width: calc(200rem / 16);
	}

	.module.hero .bg-shape-2 {
		width: calc(150rem / 16);
	}

	.module.hero .hero-logo {
		width: calc(80rem / 16);
	}

	.module.hero .hero-headline {
		font-size: calc(60rem / 16);
		line-height: calc(56rem / 16);
	}

	.module.hero .hero-saxophone {
		display: none;
	}

	.module.hero .hero-subheadline {
		font-size: calc(18rem / 16);
		line-height: calc(26rem / 16);
	}

	.module.hero .hero-button .btn {
		font-size: calc(18rem / 16);
		padding: calc(14rem / 16) calc(32rem / 16);
	}

	.module.hero .hero-video {
		border-radius: calc(12rem / 16);
		max-width: 100%;
		padding: 8px;
	}

	.module.hero .hero-byline-text {
		font-size: calc(16rem / 16);
		gap: 4px;
	}

	.module.hero .hero-byline-text .word {
		gap: 4px;
	}

	.module.hero .hero-byline-text .letter {
		height: calc(32rem / 16);
		width: calc(32rem / 16);
	}

	.module.hero .hero-byline-text .space {
		width: 8px;
	}

	/* Plugins Module - Mobile */

	.module.plugins .plugins-grid {
		gap: 26px;
	}

	.module.plugins .plugin-card {
		border-radius: calc(40rem / 16);
	}

	.module.plugins .plugin-media {
		display: none;
	}

	.module.plugins .plugin-content {
		padding: var(--text-spacing-large);
	}

	.module.plugins .plugin-content h3 {
		font-size: calc(36rem / 16);
		line-height: calc(40rem / 16);
	}

	.module.plugins .download-link {
		font-size: calc(18rem / 16);
	}

	.module.plugins .download-icon {
		height: calc(40rem / 16);
		width: calc(40rem / 16);
	}

	/* Who We Are - Mobile */

	.module.who-we-are h2 {
		font-size: calc(36rem / 16);
		line-height: calc(44rem / 16);
	}

	.module.who-we-are .watermark {
		width: calc(400rem / 16);
	}

	/* Byline Module - Mobile */

	.module.byline h2 {
		font-size: calc(60rem / 16);
		line-height: calc(64rem / 16);
	}

	/* Footer Module - Mobile */

	.module.footer-module .footer-content {
		border-radius: calc(30rem / 16);
		padding: var(--text-spacing-medium);
	}

}

/***************************************************************************************************************************************************************************************/

/* ACCESSIBILITY REDUCE MOTIONS */

/***************************************************************************************************************************************************************************************/

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}

	section {
		scroll-margin-top: 130px;
	}

	/*** JazzyScroll Animations ***/

	[data-jazzy-scroll] {
		pointer-events: none;
		transition-duration: .8s;
		transition-property: opacity, transform;
		transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	[data-jazzy-scroll].animated-in {
		pointer-events: all;
	}

	/* All fade ins */

	[data-jazzy-scroll*="fade-in"] {
		opacity: 0;
		transition-property: opacity;
	}

	[data-jazzy-scroll*="fade-in"].animated-in {
		opacity: 1;
	}

	/* Fade in up */

	[data-jazzy-scroll="fade-in-up"] {
		position: relative;
		transform: translate3d(0, 60px, 0);
		transition-property: opacity, transform;
	}

	[data-jazzy-scroll="fade-in-up"].animated-in {
		transform: translate3d(0, 0, 0);
	}

}

/***************************************************************************************************************************************************************************************/

/* TOOLBAR */

/***************************************************************************************************************************************************************************************/

body.admin-bar {
	--wp-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--wp-admin-bar-height: 46px;
	}
}
