
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 320px */
:root {
  --html-background: #000000; /* background that shows on phone above/below live window content */
  --grey1: #f2f2f2; /* 242 242 242 : xxx */
  --grey2: #e6e6e6; /* 230 230 230 : xxx */
  --grey3: #cccccc; /* 204 204 204 : xxx */
  --grey4: #adadad; /* 173 173 173 : xxx */
  --grey5: #999999; /* 153 153 153 : xxx */
  --grey6: #5e5e5e; /* 94 94 94 : xxx */
  --grey8: #333333; /* 51 51 51 : hamburger menu bg */
  --blue: #00ccff; /* 0 204 255 : xxx */
  --black: #000000; /* 0 0 0 : xxx */
  --white: #ffffff; /* 255 255 255 : xxx nav logo text, button border/text, nav icons, nav menu items */
  --highlight: #ffffff; /* 255 255 255 : footer-content p */
  --selection-color: #000000; /* 0 0 0 */
  /* --selection-background: #aaaaaa; / * 170 170 170 */
  /* --selection-background: #cccccc; / * 204 204 204 */
  /* --selection-background: #00ccff; / * 0 204 255 */
  /* --selection-background: #0099ff; / * 0 153 255 */
  --selection-background: #00aaff; /* 0 175 255 */
  --FPO-Pink: #ff00cc; /* 255 0 204 : FPO TESTING */
  --FPO-Blue: #00ffff; /* 0 255 255 : FPO TESTING */
  --FPO-Green: #00ff00; /* 0 255 0 : FPO TESTING */
  --FPO-Gold: #ffcc00; /* 255 204 0 : FPO TESTING */
  --duration: 0.3s;
  --duration-long: 0.5s;
  --duration-short: 0.2s;
  --duration-btn: 0.2s;
  --global-content-photo-height: 40rem; /*  */
  --global-content-photo-height-full: 40rem; /*  */
  --global-content-width-max: 90rem; /* 1440px : 90rem */
  --global-content-width-min: 18.75rem; /* 300px : 18.75rem / 250px : 15.625rem */
  --global-border-radius: .25rem;
  --global-padding: 1.25rem; /* used in js: handleFeatureScale */
  --global-grid-gap: 1.25rem;
  --global-placeholder-color: var(--grey1);

  /*
  Font Weight
  100: Thin
  200: Extra Light
  300: Light
  400: Regular
  500: Medium
  600: SemiBold
  700: Bold
  800: ExtraBold
  900: Black
	*/
}

html, body {
  height: 100%; /* 100vh */
  min-height: 100%; /* 100vw */
  margin: 0rem;
  padding: 0rem;
  font-family: "Jost", sans-serif;
  font-feature-settings: "frac";
  line-height: 1.5rem;
	/*
	-webkit-font-smoothing: subpixel-antialiased; / antialiased /
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;

	text-rendering: optimizeLegibility;
	*/
  background: var(--html-background);
}

html {
  font-size: 100%; /* 1rem */
  overflow-x: hidden;
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* This scrolls smoothly instead of jumping to anchor links */
  scroll-behavior: smooth; /* DOES NOT WORK ON SAFARI */
  -webkit-scroll-behavior: smooth; /* Safari and Chrome */
  -moz-scroll-behavior: smooth; /* Firefox */
  -ms-scroll-behavior: smooth; /* Internet Explorer */
}

body {
  font-size: 1rem; /* 16px */
}

* {
  background: transparent; /* BLACK TRANSPARENT: rgba(0,0,0,0) */
}

*, *:before, *:after {
  box-sizing: inherit;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}

/* //////////////////////////////////////////////////////////////////////// GLOBAL TEXT */
h1, h2, h3, h4, h5, h6, .p1, .p2, .page-title {
  letter-spacing: .07em; /* 7% */
}

h1 {
  font-size: 1.5rem; /* 24px / 48px */
  font-weight: 500; /* Medium */
  line-height: 1.5rem; /* 24px / 48px */
}

h2 {
  font-size: 1.5rem; /* 24px / 36px */
  font-weight: 500; /* Light or Regular */
  line-height: 1.5rem; /* 24px / 56px */
}

h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 400; /* Light or Regular */
  line-height: 2.25rem; /* 36px */
}

h4 { /* SERVICES & FAQS PAGE END CTA TEXT */
  font-size: 1.375rem; /* 22px */
  font-weight: 300; /* Light */
  line-height: 1.375rem; /* 22px */
}

h5 { /* PHOTO GRID OVERLAY TEXT */
  font-size: 1.125rem; /* 18px / 32px */
  font-weight: 300; /* Light */
  line-height: 1.125rem; /* 18px / 32px */
}

h6 {
  font-size: 1.25rem; /* 20px / 32px */
  font-weight: 300; /* Light */
  line-height: 1.25rem; /* 20px / 32px */
}

.p1 {
  font-size: .875rem; /* 14px / 18px */
  font-weight: 200; /* Extra Light or Light */
  line-height: 1.5rem; /* 24px / 36px */
}

.p2 {
  font-size: .875rem; /* 14px / 18px */
  font-weight: 200; /* Extra Light or Light */
  line-height: 1.5rem; /* 24px / 36px */
}

.page-title-container {
	padding: 1.25rem 0rem; /* 20px */
}

.page-title {
  font-size: 2.25rem; /* 36px */
  font-weight: 500; /* Medium */
  line-height: normal; /* 60px */
  transition: all var(--duration) ease-in-out;
}

.page-body-container-ggg {
	display: grid;
  grid-template-columns: auto;
  /* grid-auto-flow: column; !!! DESKTOP GRID */
	gap: var(--global-grid-gap);
	width: 100%;
	height: auto;
}

.page-body-container {
	min-width: 100%;
	width: 100%;
  height: auto;
  margin: 0 auto;
}

.page-body {
  font-size: 1rem; /* 16px */
  font-weight: 300; /* Light */
  line-height: 1.75rem; /* 18px */
  letter-spacing: .07em; /* 7% */
}

.page-image-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--global-grid-gap);
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  overflow-x: scroll;
  scroll-behavior: smooth;

	padding: var(--global-grid-gap) 0rem;
	min-width: 100%;
	width: 100%;
	height: auto;

  /* Hide scrollbar in IE. */
  -ms-overflow-style: none;
}

.page-image-container::-webkit-scrollbar {
  /* Hide scrollbar in WebKit and Blink powered browsers. */
  display: none;
}

.page-image,
.page-image-full {
	min-width: 5rem;
	width: 100%;
	min-height: 5rem;
	height: var(--global-content-photo-height-full);
	/* height: var(--global-feature-height); / * 300px: You must set a specified height */

	border-radius: var(--global-border-radius);
	background-position: top;
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to fit in the container */
	background-color: var(--global-placeholder-color);
}

.page-image {
	height: var(--global-content-photo-height);
}

.page-image:nth-child(even) {
	display: none;
}

.page-body hr {
	height: .125rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border-width: 0rem;
	color: var(--grey1);
	background-color: var(--grey1);
}

.section-copy-container {

}

.section-title {
	font-size: 1.25rem; /* 36px */
	font-weight: 500; /* Medium */
	line-height: normal; /* 60px */
  letter-spacing: .07em; /* 7% */
	transition: all var(--duration) ease-in-out;
}

.section-subhead {
	font-size: 1.125rem; /* 36px */
	font-weight: 400; /* Regular */
	line-height: normal; /* 60px */
  letter-spacing: .07em; /* 7% */
	transition: all var(--duration) ease-in-out;

	/*
	padding: .5rem 2rem .5rem 1rem;
	background-color: var(--grey1);
	*/
}

.section-body {
	font-size: 1rem; /* 36px */
	font-weight: 300; /* Light */
	line-height: 1.75rem; /* 60px */
  letter-spacing: .07em; /* 7% */
}

.section-ul {
	padding: 0rem 0rem 0rem 1.5rem;
	list-style-type: square;
	/* list-style-position: inside; */
}

.section-ul li {
	padding: 0rem 0rem .5rem 0rem;

	font-size: 1rem; /* 36px */
	font-weight: 300; /* Light */
	line-height: 1.75rem; /* 60px */
  letter-spacing: .07em; /* 7% */
}

.tagline {
	font-size: 1.25rem; /* 20px */
	font-weight: 400; /* Regular */
	line-height: normal; /* 60px */
  letter-spacing: .07em; /* 7% */
  /* text-transform: uppercase; */
  text-align: center;
  color: var(--white);
  margin: 6rem 0rem;
  padding: .625rem 1.25rem; /* 10px / 24px */
  background-color: var(--black);
	transition: all var(--duration) ease-in-out;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.text-black {
  color: var(--black);
}

.text-white {
  color: var(--white);
}

.width-100p {
	width: 100%;
}

/* ///////////////////////////////////////////////////////////////////// GLOBAL BUTTONS */
button {
  font-size: .625rem; /* 12px */
  font-weight: 500; /* Medium */
  line-height: auto; /* auto */
  letter-spacing: .07em; /* 7% */
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--white);
  padding: .625rem 1.25rem; /* 10px / 24px */
  transition: all var(--duration-short) ease-in-out;
  background-color: transparent;
  cursor: pointer;
}

button[type=submit]:disabled {
	cursor: not-allowed;
	transform: none;
	transition: none;
	background-color: var(--grey3);
}

button.btn-width-100 {
  width: 100%;
}

button.btn-white-outline {
  color: var(--white);
  border: 1px solid var(--white);
  /* background-color: transparent; */
  background-color: rgba(0, 0, 0, 0);
}

button.btn-white-outline:hover,
button.btn-white-outline:focus {
  /* background-color: var(--grey8); */
  background-color: rgba(51, 51, 51, 0.75);
}

button.btn-black-outline {
  color: var(--black);
  border: 1px solid var(--black);
  /* background-color: transparent; */
  background-color: rgba(255, 255, 255, 0);
}

button.btn-black-outline:hover,
button.btn-black-outline:focus {
  /* background-color: var(--grey2); */
  background-color: rgba(255, 255, 255, .75); /* white */
}

button.btn-black-solid {
  color: var(--white);
  border: 1px solid var(--white);
  background-color: var(--black);
  /* background-color: rgba(0, 0, 0, 1); */
}

button.btn-black-solid:hover,
button.btn-black-solid:focus {
  /*
  outline: 1px solid var(--white);
  background-color: rgba(51, 51, 51, 1);
  */
  background-color: var(--grey8);
}

button[type=submit]:disabled.btn-black-solid:hover,
button[type=submit]:disabled.btn-black-solid:focus {
	cursor: not-allowed;
	transform: none;
	transition: none;
	background-color: var(--grey3);
}

button.btn-white-solid {
  color: var(--black);
  border: 1px solid var(--black);
  background-color: var(--white);
  /* background-color: rgba(255, 255, 255, 1); */
}

button.btn-white-solid:hover,
button.btn-white-solid:focus {
  /*
  outline: 1px solid var(--black);
  background-color: rgba(230, 230, 230, 1);
  */
  background-color: var(--grey2);
}

/* ////////////////////////////////////////////////////////////////// BUTTON X/Y EFFECT */
/* INIT STATE */
.btn-scroll-x-effect,
.btn-scroll-y-effect {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.btn-scroll-x-effect::before,
.btn-scroll-x-effect::after,
.btn-scroll-y-effect::before,
.btn-scroll-y-effect::after {
  content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

/* UNDERLINE : FULL WIDTH OF BUTTON */
.btn-scroll-x-effect::before,
.btn-scroll-y-effect::before {
  background-color: var(--white);

  height: .125rem;
  bottom: .625rem; /* OG 0 */
  left: 0; /* 32% ADJUST UNDERLINE 1 of 2 : LEFT */
  transform-origin: bottom right; /* OG 100% 50%; */
  transform-origin: bottom center; /* OG 100% 50%; */
  transform: scaleX(0);
  transition: transform var(--duration-btn) cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-scroll-x-effect.btn-scroll-underline-black::before,
.btn-scroll-y-effect.btn-scroll-underline-black::before {
  background-color: var(--black);
}

.btn-scroll-x-effect.btn-scroll-underline-white::before,
.btn-scroll-y-effect.btn-scroll-underline-white::before {
  background-color: var(--white);
}

.btn-scroll-x-effect.btn-scroll-underline-none::before,
.btn-scroll-y-effect.btn-scroll-underline-none::before {
  background-color: transparent;
}

.btn-scroll-x-effect::before {
  /* bottom: .625rem; / * 0; UNDERLINE X/HORIZONTAL */
  /* to place underline just below copy, adjust to account for padding */
}

.btn-scroll-y-effect::before {
  /* bottom: .625rem; /* 0; UNDERLINE Y/VERTICAL */
  /* to place underline just below copy, adjust to account for padding */
}

/* UNDERLINE HOVER */
.btn-scroll-x-effect:hover::before,
.btn-scroll-x-effect:focus::before,
.btn-scroll-y-effect:hover::before,
.btn-scroll-y-effect:focus::before {
  transform-origin: bottom left; /* OG 0% 50%; */
  transform-origin: bottom center; /* OG 0% 50%; */
  transform: scaleX(.36); /* .36 ADJUST UNDERLINE 2 of 2 : WIDTH */
}

/* DUPLICATE TEXT */
.btn-scroll-x-effect::after,
.btn-scroll-y-effect::after {
  content: attr(data-replace); /* PULLED FROM HTML attr(data-replace) */
	height: 100%;
  top: 0;
  /* text-decoration: underline; */
  transform-origin: 100% 50%;
  /* color: gold; / * TEXT 2 COLOR */

	padding: .625rem 1.25rem; /* 10px / 24px */
  /* background-color: var(--FPO-Blue); / * FPO TEXT 2 BG COLOR */
  transition: transform var(--duration-btn) cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-scroll-x-effect::after {
  transform: translate3d(200%, 0, 0); /* X/HORIZONTAL MOVEMENT */
  /* 100% edge to edge / 200% full h/w spaced > quicker animation */
}

.btn-scroll-y-effect::after {
  transform: translate3d(0, 200%, 0); /* Y/VERTICAL MOVEMENT */
  /* 100% edge to edge / 200% full h/w spaced > quicker animation */
}

/* DUPLICATE TEXT HOVER */
.btn-scroll-x-effect:hover::after,
.btn-scroll-x-effect:focus::after,
.btn-scroll-y-effect:hover::after,
.btn-scroll-y-effect:focus::after {
  transform: translate3d(0, 0, 0); /* RETURN TEXT 2 TO ORIGINAL XY POSITION */
  /* background-color: var(--FPO-Gold); / * FPO TEXT 2 BG COLOR HOVER */
}

.btn-scroll-x-effect:hover::after,
.btn-scroll-x-effect:focus::after {
	/* FPO */
}

.btn-scroll-y-effect:hover::after,
.btn-scroll-y-effect:focus::after {
	/* FPO */
}

/* TEXT 1 */
.btn-scroll-x-effect span,
.btn-scroll-y-effect span {
  display: inline-block;
  transition: transform var(--duration-btn) cubic-bezier(0.76, 0, 0.24, 1);
  /* background-color: var(--FPO-Pink); * FPO TEXT 1 BG COLOR */
}

.btn-scroll-x-effect:hover span,
.btn-scroll-y-effect:hover span {
	/* FPO */
  /* background-color: var(--FPO-Gold); / * FPO TEXT 1 BG COLOR HOVER */
}

.btn-scroll-x-effect:hover span {
  transform: translate3d(-200%, 0, 0); /* TEXT 1 X/HORIZONTAL MOVEMENT ADJUSTABLE */
}

.btn-scroll-y-effect:hover span {
  transform: translate3d(0, -400%, 0); /* TEXT 1 Y/VERTICAL MOVEMENT ADJUSTABLE */
}

button[type=submit]:disabled.btn-scroll-x-effect,
button[type=submit]:disabled.btn-scroll-y-effect,
button[type=submit]:disabled.btn-scroll-x-effect::before,
button[type=submit]:disabled.btn-scroll-y-effect::before,
button[type=submit]:disabled.btn-scroll-x-effect:hover::before,
button[type=submit]:disabled.btn-scroll-x-effect:focus::before,
button[type=submit]:disabled.btn-scroll-y-effect:hover::before,
button[type=submit]:disabled.btn-scroll-y-effect:focus::before,
button[type=submit]:disabled.btn-scroll-x-effect::after,
button[type=submit]:disabled.btn-scroll-y-effect::after,
button[type=submit]:disabled.btn-scroll-x-effect:hover::after,
button[type=submit]:disabled.btn-scroll-x-effect:focus::after,
button[type=submit]:disabled.btn-scroll-y-effect:hover::after,
button[type=submit]:disabled.btn-scroll-y-effect:focus::after,
button[type=submit]:disabled.btn-scroll-x-effect span,
button[type=submit]:disabled.btn-scroll-y-effect span,
button[type=submit]:disabled.btn-scroll-x-effect:hover span,
button[type=submit]:disabled.btn-scroll-y-effect:hover span {
	cursor: not-allowed;
	transform: none;
	transition: none;
}

button.btn-padding-40,
button.btn-padding-40::after {
	/* padding: .875rem 2.5rem; / * 14px / 40px */
	padding: .875rem 3rem; /* 14px / 48px */
	/* padding: .875rem 4rem; / * 14px / 64px */
}

/* //////////////////////////////////////////////////////////////////////// GLOBAL BLUR */
.blur-inactive { /* !!! APPLIED TO SELECT ELEMENTS VIA JS, WHEN MENU NAV IS CLOSED */
	filter: blur(none);
  transition: filter var(--duration-long) cubic-bezier(0.76, 0, 0.24, 1);
  /*
  transition: filter 2s cubic-bezier(0.76, 0, 0.24, 1);
  */
}

.blur-active { /* !!! APPLIED TO SELECT ELEMENTS VIA JS, WHEN MENU NAV IS OPENED */
	filter: blur(.25rem);
  transition: filter var(--duration-long) cubic-bezier(0.76, 0, 0.24, 1);
}

.page-content-container {
  margin: 0rem;
  padding: 0rem var(--global-padding);
  width: 100%;

  display: flex;
  justify-content: center;

  transition: var(--duration-short);
	background-color: var(--white);
}

.page-content {
  padding: 0rem;
  /* THIS MARGIN CENTERS CONTENT BUT STOPS AT WINDOW LEFT *
  margin: 0 0 0 calc((100% - var(--page-content-width)) * 0.5); */
	max-width: var(--global-content-width-max);
  min-width: calc(var(--global-content-width-min) - (2 * var(--global-padding))); /* 250px / 100% */
  width: 100%;
}

.flex-container {
  display: flex;
  flex-direction: column;

  justify-content: space-between;

  padding: 0rem;
  align-items: stretch;
  width: 100%;
  /* background-color: rgba(255, 0, 255, 0.5); / * FPO BG COLOR PINK */
}

.flex-container.center {
  align-items: center;
  justify-content: center;
}

.flex-container.multi {
  align-items: stretch;
}

.flex-container.split {
  flex-direction: column;
}

.flex-container.white {
	background-color: var(--white);
}

.flex-container-gutter {
  width: 0rem;
	height: var(--global-padding);
  transition: var(--duration-short);
}

.flex-container-spacer-horizontal {
  width: var(--global-padding);
	height: 0rem;
  transition: var(--duration-short);
}

.flex-container-spacer-vertical {
  width: 0rem;
	height: var(--global-padding);
  transition: var(--duration-short);
}

/* ////////////////////////////////////////////////////////////// SECTION : INTRO / CTA */
.page-content-cap {
	align-content: center;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
	min-width: 100%;
	width: 100%;
  background-color: var(--white);
}

.page-content-cap h3 {
  text-align: left;
  width: 100%;
	margin-top: 0rem;
	margin-bottom: 1rem;
}

.page-content-cap p {
  font-size: 1rem; /* 24px */
  font-weight: 200; /* Light */
  line-height: 1.75rem; /* 40px */
  letter-spacing: .07em; /* 7% */

  text-align: left;
  width: 100%;
	margin-top: 0rem;
	margin-bottom: 2rem; /* 50px */
}

.page-content-cap .cta {
	text-align: left;
}

/* ///////////////////////////////////////////////////////////// GLOBAL SELECTION 320px */
::-moz-selection { /* Code for Firefox */
	color: var(--selection-color);
	background: var(--selection-background);
}

::selection {
	color: var(--selection-color);
	background: var(--selection-background);
}

/* //////////////////////////////////////////// SERVICES + FAQs : CONTACT SECTION 320px */
#id_section_contact {
		padding-bottom: 6rem;
}

h4 {
	margin: 1.5rem 0rem;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 375px */
@media (min-width: 375px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 375px */
	h1 {
		font-size: 1.75rem; /* 48px */
		line-height: 1.75rem; /* 48px */
	}

	h2 {
		font-size: 1.75rem; /* 36px */
		line-height: 1.75rem; /* 56px */
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 480px */
@media (min-width: 480px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 480px */
	h1 {
		font-size: 2.25rem; /* 48px */
		line-height: 2.25rem; /* 48px */
	}

	h2 {
		font-size: 2.25rem; /* 36px */
		line-height: 2.25rem; /* 56px */
	}

	h5 {
		font-size: 1.25rem; /* 32px */
		line-height: 1.25rem; /* 32px */
	}

	.p1 {
		font-size: 1rem; /* 18px */
		line-height: 1.5rem; /* 36px */
	}

	.p2 {
		font-size: 1rem; /* 18px */
		line-height: 1.5rem; /* 36px */
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : HEIGHT : 600px */
@media (min-height: 600px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 600px */
	.page-title-container {
		padding: 3rem 0rem 2.25rem 0rem; /* 48px */
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 600px */
@media (min-width: 600px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 600px */
	h3 {
		font-size: 1.75rem; /* 36px */
		line-height: 2.5rem; /* 56px */
	}

	h5 {
		font-size: 1rem;
		line-height: 1.375rem;
	}

	.tagline {
		font-size: 1.5rem; /* 20px */
		margin: 6rem 0rem;
		padding: 1rem 1.25rem; /* 16px / 24px */
	}

/* //////////////////////////////////////////// SERVICES + FAQs : CONTACT SECTION 600px */
	#id_section_contact {
		padding-bottom: 6rem;
	}

/* ////////////////////////////////////////////////////////////// SECTION : INTRO / CTA */
	.page-content-cap {
		padding: 2rem 2rem 2.25rem 2rem;
	}
	
	.page-content-cap h3 {
		text-align: center;
		margin-bottom: 1.25rem; /* 20px */
	}
	
	.page-content-cap p {
		font-size: 1.125rem;
		line-height: 2rem;
		margin-bottom: 2.5rem;
	}
	
	.page-content-cap .cta {
		text-align: center;
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 800px */
@media (min-width: 800px) {
	:root {
	  --global-padding: 1.875rem;
		--global-grid-gap: 1.875rem;
		--global-border-radius: .375rem;
	}

/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 800px */
	h1 {
		font-size: 3rem; /* 48px */
		line-height: 3rem; /* 48px */
	}

	h3 {
		font-size: 2.25rem; /* 36px */
		line-height: 3.5rem; /* 56px */
	}

	h4 {
		font-size: 1.625rem; /* 26px */
	  line-height: 1.625rem; /* 26px */
	}

	.p1 {
		font-size: 1.25rem; /* 18px */
		line-height: 2.5rem; /* 36px */
	}

/* ///////////////////////////////////////////////////////////// GLOBAL BUTTONS : 800px */
	button,
	.btn-scroll-x-effect::after,
	.btn-scroll-y-effect::after {
		padding: .625rem 1.625rem; /* 10px / 24px */
	}

	button.btn-padding-40,
	button.btn-padding-40::after {
		padding: .875rem 3.25rem; /* 14px / 52px */
	}

/* //////////////////////////////////////////// SERVICES + FAQs : CONTACT SECTION 800px */
	#id_section_contact {
		padding-bottom: 8rem;
	}

/* ////////////////////////////////////////////////////////////// SECTION : INTRO / CTA */
	.page-content-cap h3 {
		margin-bottom: 1.5rem;
	}
	
	.page-content-cap p {
		font-size: 1.25rem;
		line-height: 2.25rem;
		margin-bottom: 3rem;
	}
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 992px */
@media (min-width: 992px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 992px */
	h5 {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}

/* ///////////////////////////////////////////////////////////// GLOBAL BUTTONS : 992px */
	button,
	.btn-scroll-x-effect::after,
	.btn-scroll-y-effect::after {
		padding: .75rem 2.125rem; /* 10px / 24px */
	}

	button.btn-padding-40,
	button.btn-padding-40::after {
		padding: .875rem 3.5rem; /* 14px / 56px */
	}

/* ////////////////////////////////////////////////////////////// SECTION : INTRO / CTA */
	.page-content-cap {
	  padding: 3rem 0rem 2.5rem 0rem;
		min-width: 30rem;
		width: 50rem; /* 880px : 55rem / 800px : 50rem */
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 1000px */
@media (min-width: 1000px) {
	:root {
	  --global-padding: 2.5rem;
		--global-grid-gap: 2.5rem;
		--global-border-radius: .5rem;
	}

	h4 {
		font-size: 2rem; /* 32px */
	  line-height: 2rem; /* 32px */
	}

/* /////////////////////////////////////////// SERVICES + FAQs : CONTACT SECTION 1000px */
	#id_section_contact {
		padding-bottom: 10rem;
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 1200px */
@media (min-width: 1200px) {
/* /////////////////////////////////////////////////////////////// GLOBAL TEXT : 1200px */
	h2 {
		font-size: 3rem; /* 48px */
		line-height: 3rem; /* 48px */
	}

	h5 {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	
	.p2 {
		font-size: 1.125rem;
		line-height: 2.25rem;
	}

/* //////////////////////////////////////////////////////////// GLOBAL BUTTONS : 1200px */
	button,
	.btn-scroll-x-effect::after,
	.btn-scroll-y-effect::after {
		font-size: .75rem; /* 12px */
		padding: .875rem 2.125rem; /* 10px / 24px */
	}

	button.btn-padding-40,
	button.btn-padding-40::after {
		font-size: .75rem; /* 12px */
		padding: 1rem 3.5rem; /* 16px / 56px */
	}

/* ////////////////////////////////////////////////////////////// SECTION : INTRO / CTA */
	/*
	id_home_faqs
	id_services_contact
	*/
	.page-content-cap {
		padding: 3.75rem 0rem 2.25rem 0rem;
	}
	
	.page-content-cap h3 {
		margin-bottom: 1.75rem;
	}
	
	.page-content-cap p {
		font-size: 1.5rem;
		line-height: 2.5rem;
		margin-bottom: 3.125rem; /* 50px */
	}
}


/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : 480px */
@media (min-width: 480px) {
/* //////////////////////////////////////////////////////////////// GLOBAL TEXT : 480px */
/* ::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 480px + HEIGHT 600px */
	@media (min-height: 600px) {
/* ////////////////////////////////////////////////////////// GLOBAL INTRO TEXT : 600px */
		.page-title-container {
			padding: 4rem 0rem 2rem 0rem; /* 64px */
		}

		.page-title {
			font-size: 2.5rem; /* 44px */
		}
	}

/* ::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 480px + HEIGHT 800px */
	@media (min-height: 800px) {
/* ////////////////////////////////////////////////////////// GLOBAL INTRO TEXT : 800px */
		.page-title-container {
			padding: 4.5rem 0rem 2rem 0rem; /* 64px */
		}

		.page-title {
			font-size: 2.75rem; /* 48px */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 480px + HEIGHT 1000px */
	@media (min-height: 1000px) { /* WORK HERE ON MIN-HEIGHT 800 */
/* ///////////////////////////////////////////////////////// GLOBAL INTRO TEXT : 1000px */
		.page-title-container {
			padding: 5rem 0rem 2.25rem 0rem; /* 90px */
		}

		.page-title {
			font-size: 3.25rem; /* 52px */
		}
	}

/* :::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 480px + HEIGHT 1200px */
	@media (min-height: 1200px) {
/* ///////////////////////////////////////////////////////// GLOBAL INTRO TEXT : 1200px */
		.page-title-container {
			padding: 5.625rem 0rem 2.25rem 0rem; /* 90px */
		}

		.page-title {
			font-size: 3.75rem; /* 60px */
		}
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 600px + HEIGHT 600px */
@media (min-width: 600px) and (min-height: 600px) {
	.page-body {
		font-size: 1.25rem; /* 20px */
		line-height: 2.25rem; /* 36px */
	}

	.page-image-container {
		flex-direction: row;
		padding: calc(var(--global-grid-gap) * 1.75) 0rem;
	}

	.page-image {
		width: calc(50% - (var(--global-grid-gap) / 2));
		height: var(--global-content-photo-height);
	}

	.page-image:nth-child(even) {
		display: block;
	}

	.section-copy-container {
	
	}

	.section-title {
		font-size: 1.5rem; /* 24px */
	}

	.section-subhead {
		font-size: 1.375rem; /* 20px */
	}

	.section-body {
		font-size: 1.25rem; /* 20px */
		line-height: 2rem; /* 32px */
	}

	.section-ul {
		padding: 0rem 0rem 0rem 1.5rem;
	}

	.section-ul li {
		padding: 0rem 0rem .5rem 0rem;
	
		font-size: 1.25rem; /* 20px */
		line-height: 2rem; /* 32px */
	}
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::: MEDIA : WIDTH 800px + HEIGHT 600px */
@media (min-width: 800px) and (min-height: 600px) {
	.page-body-container-ggg {
		/* !!! WITHOUT CALC < auto auto > GRID CELLS SHIFT ON HOVER */
		grid-template-columns: calc(50% - (var(--global-grid-gap) / 2)) auto;
		grid-auto-flow: row; /* !!! SWITCH FROM COLUMN TO GRID */
	}

	.page-body-container {
		min-width: 70%;
		width: 70%;
	}
}

/* ///////////////////////////////////////////////////////////////////// GLOBAL TESTING */
/* ROUGH MOBILE SIZES */
#id_screen_test {
	top: 6.25rem;
	left: 1.25rem;
	position: fixed;
	color: var(--FPO-Green);
  font-size: .875rem;
  line-height: 1.25rem;
}

/* ROUGH TABLET SIZES */
@media
	screen and (min-width: 480px) and (orientation: portrait),
	screen and (min-width: 900px) and (orientation: landscape)
	{
	#id_screen_test {
		color: var(--FPO-Blue);
	}
}

/* ROUGH LAPTOP & DESKTOP SIZES */
@media
	screen and (min-width: 1024px) and (orientation: portrait),
	screen and (min-width: 1280px) and (orientation: landscape)
	{ /* and (any-pointer: coarse) */
	#id_screen_test {
		color: orange;
	}
}

.copy-edit-b {
	background-color: #ddff00;
}

.copy-edit-k {
	background-color: #00ffff;
}
