@charset "UTF-8";
/* CSS Document */

/* Tillman Photography Stylesheet */

*,
*::before,
*::after {
	box-sizing: border-box;
}
	
* {
	margin: 0;
	padding: 0;
}
	
html {
	scroll-behavior: smooth;
}
	
:root {
	--hero-bg: url('images/DSC06482-Edit.jpg');
	--tp-light-bg: #F0F0F0;
	--tp-text-dark: #1f2933;
	--tp-text-light: #F0F0F0;
	--tp-primary-color: #003939;
	--tp-primary-grad: linear-gradient(336deg, rgba(0, 57, 57, 1) 0%, rgba(45, 94, 94, 1) 50%, rgba(0, 57, 57, 1) 100%);
	--tp-2nd-color: #2D5E5E;
	--tp-3rd-color: #558685;
	--tp-4th-color: #7eb0af;
	--tp-5th-color: #a8dcdb;
	--tp-accent-color: #e86c30;
	--tp-accent-color2: #ff8749;
	--tp-darken: rgba(0,0,0,0.15);
	--tp-border: rgba(0, 0, 0, 0.12);
	--tp-header-weight: 500;
	--tp-button-radius: 15px;
	--tp-text-shadow: 0px 0px 20px rgba(0,0,0,0.64);
	--tp-body-font: "Open Sans", sans-serif;
	--tp-header-font: "Overpass", sans-serif;
	--tp-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}
	
body {
	font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Overpass", sans-serif;
}
	
p {
	line-height: 1.2;
}

p.fine-print {
	opacity: 50%;
	font-size: 0.9rem
}
	
h1 {
	font-size: clamp(3rem, 4vw + 1rem, 5.5rem);
	line-height: 1.1;
}

h2 {
	font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
	line-height: 1.1;
}
	
#svgdefs {
	display: none;
}
	
header,
.section-container,
footer {
	width: 100vw;
	max-width: 100%; /* need because safari sucks */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-inline: 2rem;
	flex-shrink: 0; /* Forces Safari to respect the width */
}
	
.section-container.dark {
	background: var(--tp-primary-color);
	color: var(--tp-text-light)
}
	
.section-container.light {
	background: var(--tp-light-bg);
	color: var(--tp-text-dark)
}
	
.section {
	width: min(100%, 1600px);
	flex-shrink: 0; /* Forces Safari to respect the width */
}

#gallery-section,
#value-section-2,
#media-packages,
#services-section,
#reviews-section,
#howitworks,
#why-work,
#locations-section,
#faq-section,
#prep-hero,
#flam-hero,
#prep-gallery-section,
#flam-gallery-section,
#prep-value-prop-2,
#flam-value-prop-2,
#whattoexpect-section,
#is-premium-right-section,
#is-flambient-right-section,
#prep-faq-section,
#flam-faq-section,
#see-the-difference-section,
#fp-gallery-section,
#portfolio-section,
#contact-confirmation-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block: clamp(2rem, 6vw, 8rem);
}
	
/*======== END BASIC STYLE ========*/
/*======== COMING SOON STYLE ========*/

.coming-soon-section {
		margin-block: clamp(2rem, 6vw, 8rem);
		text-align: center;
	}
	
.comingSoon {
		font-size: clamp(3rem, 4vw + 1rem, 5.5rem);
		font-weight: 900;
	}

/*======== END COMING SOON =========*/
/*======== 404 STYLE ========*/

.errorCode {
	font-size: clamp(3rem, 4vw + 1rem, 5.5rem);
}

/*======== END 404  ========*/
/*======== BUTTON STYLES ========*/

.cta-buttons .book-button,
#prep-hero .book-button,
#flam-hero .book-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		background: var(--tp-accent-color);
		color: var(--tp-text-light);
		text-decoration: none;
		padding: 1.5rem;
		box-shadow: inset 0 0 0 2px var(--tp-accent-color);
		border-radius: var(--tp-button-radius);
		min-width: 250px;
	}
	
.cta-buttons .book-button:hover,
#prep-hero .book-button:hover,
#flam-hero .book-button:hover {
		background: var(--tp-accent-color2);
	}
	
.book-button svg {
		height: 2rem;
		width: 2rem;
		fill: var(--tp-text-light);
	}

.small-button {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
}

.light .small-button {
	background: var(--tp-light-bg);
	color: var(--tp-primary-color);
	padding: 0.5rem 1rem;
	border: 1px solid var(--tp-border);
	border-radius: 500px;
	text-decoration: none;
	align-self: flex-start;
}

.light .small-button:hover {
	background: var(--tp-primary-color);
	color: var(--tp-text-light);
}

.dark .small-button {
	background: var(--tp-darken);
	color: var(--tp-text-light);
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255,255,255,0.33);
	border-radius: 500px;
	text-decoration: none;
	align-self: flex-start;
}

.dark .small-button:hover {
	background: var(--tp-primary-color);
	color: var(--tp-text-light);
}


/*======== END BUTTON STYLES ========*/
/*======== BEGIN HEADER STYLE ========*/
	
header {
		background: white;
		margin-block: 1rem;
	}
	
header a {
		color: var(--tp-text-dark);
		text-decoration: none;
	}

.header-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	
.logo svg {
		
		/*======= LOGO SIZE ======*/
		height: 100px;
		width: 200px;
		
		/*======= LOGO COLOR ======*/
		fill: var(--tp-primary-color);
	}
	
#menu-button {
		display: none;
	}
	
.header-section .logo-and-hamburger {
		display: flex;
		flex-grow: 1;
	}
	
#hamburger {
		display: none;
	}
	
#primary-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}
	
#primary-nav .nav-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
/* Tablet and smaller */
@media screen and (max-width: 1100px) {
		
		header {
			padding-inline: 0;
			margin-block: 0;
		}
		
		.header-section {
			flex-direction: column;
			
		}
		
		.header-section .logo-and-hamburger {
			width: 100%;
			flex-direction: row;
			align-items: center;
			padding: 1rem 2rem;
		}
		
		.logo-and-hamburger .logo {
			flex-grow: 1;
		}
		
		/*======= TABLET LOGO SIZE ======*/
		
		.logo svg {
			height: 75px;
			width: 150px;
		}
		
		#hamburger {
			display: block;
			cursor: pointer;
			position: relative;
			width: 30px;
			height: 30px;
		}
		
		#hamburger::before {
			  content: "menu";
			  font-family: "Material Icons";
			  font-size: 30px;
		  }
		
		#primary-nav {
			width: 100%;
			flex-direction: column;
			gap: 0;
			max-height: 0;
			overflow: hidden;
			transition: 0.5s ease-in-out;
		}
		
		#primary-nav .nav-item {
			padding-block: 0.8rem;
			width: 100%;
		}
		
		#primary-nav .nav-item:not(:first-child) {
			border-top: 1px solid rgba(0,0,0,0.10);
		}
		
		#primary-nav .nav-item:hover {
			background: rgba(0,0,0,0.10);
		}
		
		#menu-button:checked ~ #primary-nav {
			  max-height: 1500px;
		  }
		  
		  #menu-button:checked ~ #hamburger::before {
			  content: "close";
		  }
		
	}
	
@media screen and (max-width: 600px) {
		
		.logo svg {
			height: 50px;
			width: 100px;
		}
	}
	
/*======== END HEADER STYLE ========*/
/*======== HERO SECTION STYLE ========*/

	#hero-container {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--hero-bg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		--ratio: calc(16 / 9);

		/* Clamps the height based on dynamic width logic */
		height: clamp(400px, calc(100vw / var(--ratio)), 700px);
	}

	#hero-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 0.8rem;
		flex-grow: 0;
	}
	
	/* Hero animations */
	
	#hero-section .animateOn {
		opacity: 0;

		transform: scale(0%);
		transition: 600ms ease;
	}
	
	#hero-section .animateOn.show {
		opacity: 1;

		transform: scale(100%);
	}
	/* End Hero Animation */

	#hero-section h1 {
		text-align: left;
	}
	
	#hero-section .sub-header {
		line-height: 1.2;
		padding-bottom: 0.75rem;
	}
	
	.hero-buttons {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 1rem;
	}
	
	#hero-section .hero-button {
		color: white;
		background: rgba(254,254,254,0.40);
		padding: 1.5rem 3.5rem;
		text-decoration: none;
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 500px;
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		gap: 1rem;
	}
	
	.hero-buttons svg {
		height: 2rem;
		width: 2rem;
		fill: currentColor;
	}
	
	#hero-section .hero-button:hover {
		background: rgba(255,255,255,0.20);
		backdrop-filter: blur(5px);
	}
	
	@media screen and (max-width: 600px) {
		
		#hero-container {
			height: 100vh;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)), var(--hero-bg);
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
		}
		
		/* FIXES BACKGROUND ON MOBILE SAFARI */
		@supports(-webkit-touch-callout: none) {
			#hero-container {
				background-attachment: unset;
			}
		}
		
		#hero-section {
			text-align: center;
			gap: 1rem;
		}
		
		#hero-section h1 {
			text-align: center;
		}
		
		.hero-buttons {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 1rem;
		}
	}

/*======== END HERO STYLE ========*/
/*======== VALUE SECTION 1 STYLE ========*/
	
	#value-container-1 {
		background: #003939;
		background: var(--tp-primary-grad);
	}
	
	#value-section-1 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		padding-block: 1rem;
		gap: 1rem;
		
	}
	
	#value-section-1 .value-prop-item {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		justify-content: center;
		align-items: center;
		padding-inline: 1rem;
	}
	
	#value-section-1 .value-prop-item:not(:first-child) {
		border-left: 1px solid var(--tp-text-light);
	}
	
	#value-section-1 .value-prop-item svg {
		height: 36px;
		width: 36px;
		flex: 0 0 36px;
		fill: currentColor;
	}
	
	@media screen and (max-width: 900px) {
		
		#value-section-1 {
			grid-template-columns: 1fr 1fr;
		}
		
		#value-section-1 .value-prop-item {
			justify-content: flex-start;
			padding: 0;
		}
		
		/* REMOVE DIVIDER LINES */
		#value-section-1 .value-prop-item:not(:first-child) {
			border-left: 0px;
		}
		
		#value-section-1 .value-prop-item:nth-child(even) {
			padding-left: 1rem;
		}
		
		#value-section-1 svg {
			height: 24px;
			width: 24px;
		}
	}
	
	@media screen and (max-width: 600px) {
		
		#value-section-1 {
			grid-template-columns: 1fr;
		}
		
		#value-section-1 .value-prop-item {
			padding-inline: 0;
		}
		
		#value-section-1 .value-prop-item:nth-child(even) {
			padding-left: 0;
		}
		
	}
	
/*======== END VALUE SECTION 1 STYLE ========*/
/*======== GALLERY STYLE ========*/
	
.fullwidth-img-gallery {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
	
.fullwidth-img-gallery .imgContainer:nth-child(1) {
	grid-area: 1/1/3/3;
	aspect-ratio: unset;
}

.fullwidth-img-gallery .imgContainer {
	display: flex;
}
	
.fullwidth-img-gallery img {
	width: 100%;
	border-radius: var(--tp-button-radius);
}

@media screen and (max-width: 1100px) {
	
	.fullwidth-img-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 900px) {
	
	.fullwidth-img-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}


@media screen and (max-width: 600px) {
	
	.fullwidth-img-gallery-container {
		padding-inline: 0;
	}
	
	.fullwidth-img-gallery-container h2,
	.fullwidth-img-gallery-container .gallery-button-area {
		padding-inline: 2rem;
	}
	
	.fullwidth-img-gallery img {
		border-radius: 0;		
	}
}

/* comment out "display: none" below to show carousel buttons */
.fullwidth-img-gallery-container .carousel-button {
	display: none;
}	


/*======== END GALLERY STYLE ========*/
/*======== VALUE SECTION 2 STYLE ========*/

	#value-container-2 {
		background: var(--tp-primary-grad);
	}

	
	#value-section-2 .value-prop-items {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	
	#value-section-2 .value-prop-item {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		padding: 0rem 1rem;
	}
	
	#value-section-2 .value-prop-item:not(:first-child) {
		border-left: 1px solid var(--tp-text-light);
	}
	
	#value-section-2 .icon {
		height: 64px;
		width: 64px;
		flex: 0 0 64px;
		fill: currentColor;
	}
	
	#value-section-2 .title {
		font-size: 120%;
		font-weight: 500;
	}
	
	@media screen and (max-width: 900px) {
		
		#value-section-2 .value-prop-items {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
		
		#value-section-2 .value-prop-item {
			padding: 0;
		}
		
		#value-section-2 .value-prop-item:not(:first-child) {
			border-left: 0px;
		}
		
		#value-section-2 .icon {
			height: 48px;
			width: 48px;
			flex: 0 0 48px;
		}
	}
	
/*======== END VALUE SECTION 2  ========*/
/*======== MEDIA PACKAGES STYLE  ========*/
	
	#media-packages .packages {
		display: grid;
		grid-template-columns: repeat(19, 1fr);
		gap: 2rem;
		justify-content: space-evenly;
	}
	
	#media-packages .package {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% auto;
		border: 1px solid var(--tp-border);
		border-radius: 24px;
		box-shadow: var(--tp-shadow);
	}
	
	.popular-label {
		padding: 10px 18px;
		background: var(--tp-primary-color);
		color: var(--tp-text-light);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.2em;
		text-align: center;
		text-transform: uppercase;
	}
	
	.package-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 28px;
	}
	
	.package-title {
		font-size: 150%;
	}
	
	.package-starting-price {
		margin: 0 0 4px;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--tp-primary-color);
	}
	
	.package-price {
		margin: 0;
		font-size: 3.5rem;
		font-weight: 800;
		line-height: 1;
	}
	
	.most-popular .package-price {
		font-size: 4.5rem;
		color: var(--tp-accent-color);
	}
	
	.package-divider {
		width: 100%;
		height: 2px;
		margin: 1.8rem 0;
		background: var(--tp-border);
	}
	
	.package-services {
		list-style: none;
		margin: 0 0 1rem;
		padding: 0;
		flex-grow: 1;
	}
	
	.package-services li {
		position: relative;
		margin-bottom: 0.5rem;
		padding-left: 1.5rem;
	}
	
	.package-services li::before {
		content: "✓";
		position: absolute;
		left: 0;
		top: 0;
		font-weight: 800;
		color: var(--tp-accent-color);
	}
	
	.package-button {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		margin-top: auto;
		padding: 15px 25px;
		border-radius: 500px;
		background: var(--tp-accent-color);
		color: var(--tp-text-light);
		font-size: 1.15rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
		transition: transform 180ms ease, opacity 180ms ease;
	}
	
	.package-button:hover {
		transform: translateY(-2px);
		background: var(--tp-accent-color2);
	}
	
	.package-fine-print {
		margin: 12px 0 0;
		font-size: 0.78rem;
		padding-bottom: 150px;
	}

	#video-package {
		grid-column: 1 / 7;
		background-color: rgba(255,255,255,0.7);
		background-image: url("images/House-Sketch-600px.png");
		background-blend-mode: screen;
	}
	
	#premium-package {
		grid-column: 7 / 14;
		background-color: rgba(255,255,255,0.7);
		background-image: url("images/Skyline-Sketch-600px.png");
		background-blend-mode: screen;
	}
	
	#luxury-package {
		grid-column: 14 / -1;
		background-color: rgba(255,255,255,0.7);
		background-image: url("images/LuxuryHouse-Sketch-600px.png");
		background-blend-mode: screen;
	}
	
	
	
	/* SINGLE COLUMN FOR SMALLER SCREENs */
	@media (max-width: 900px) {
		
		#media-packages .packages {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(3, 1fr);
		}
		
		#video-package,
		#premium-package,
		#luxury-package {
			grid-column: 1 / -1;
		}
		
		#video-package {
			grid-row: 2 / 3;
		}
		
		#premium-package {
			grid-row: 1 / 2;
		}
		
		#luxury-package {
			grid-row: 3 / 4;
		}
	}
		
/*======== END MEDIA PACKAGES ========*/
/*======== SERVICES STYLE ========*/
	
	.services {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 2rem;
		justify-content: space-between;
	}
	
	.service {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		max-width: 400px;
		/* remove border for dark background 
		border: 1px solid var(--tp-border);
		*/
		border-radius: var(--tp-button-radius);
		background: var(--tp-light-bg);
		color: var(--tp-text-dark)
	}
	
	.service .icon {
		fill: var(--tp-primary-color);
		width: 48px;
		height: 48px;
		margin: 1rem;
	}
	
	.service-photo {
		width: 100%;
		aspect-ratio: 65/24;
		object-fit: cover;
	}
	
	.service h3 {
		text-transform: uppercase;
		margin: 0rem 0.5rem;
	}
	
	.service p {
		flex-grow: 1;
		margin: 0rem 0.5rem;
	}
	
	.service-button {
		display: block;
		background: var(--tp-primary-color);
		color: var(--tp-text-light);
		margin: 0rem 0rem 1rem 0rem;
		padding: 0.5rem 1.8rem;
		border-radius: 500px;
		text-decoration: none;
	}
	
	.service-button:hover {
		background: var(--tp-2nd-color);
	}
	
	@media screen and (max-width: 1400px) {
		
		.services {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
	
	@media screen and (max-width: 900px) {
		
		.services {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	
/*======== END SERVICES ========*/
/*======== REVIEWS STYLE ========*/
	
	.reviews {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		justify-content: space-between;
	}
	
	@media (max-width: 900px) {
    		.reviews {
      			grid-template-columns: minmax(0, 500px);
				justify-content: space-around;
    		}
  		}
	
	.star-rating {
		display: flex;
		align-items: center;
		gap: 0.2rem;
		margin-bottom: 1rem;
	}
	
	.review {
		display: flex;
		flex-direction: column;
		padding: 1.5rem;
		border-radius: 15px;
		border: 1px solid var(--tp-border);
		box-shadow: var(--tp-shadow);
	}
	
	.review blockquote {
		flex-grow: 1;
		margin-bottom: 2rem;
	}
	
	.star-rating svg {
		display: block;
		width: 1.5rem;
		height: auto;
		aspect-ratio: 1;
		flex-shrink: 0;
		fill: var(--tp-accent-color);
	}
	
	.star-rating svg:hover {
		fill: var(--tp-accent-color2)
	}
	
	.reviewer {
		display: flex;
		align-items: center;
	}
	
	.reviewer img {
		width: 4rem;
		height: 4rem;
		aspect-ratio: 1 / 1;
		margin: 0 1rem 0 0;
		border-radius: 500px;
		object-fit: cover;
	}
	
	.reviewer p {
		font-size: 110%;
	}
	
	.reviewer a {
		color: var(--tp-text-dark);
		text-decoration: none;
		font-size: 75%;
	}

/*======== ENDS REVIEWS ========*/
/*======== HOW IT WORKS STYLE ========*/
	
	.howitworks-steps, .whattoexpect-steps {
		display: grid;
		grid-template-columns: 6fr 1fr 6fr 1fr 6fr 1fr 6fr 1fr 6fr;
		justify-content: center;
		gap: 2px;
	}
	
	.step-arrow svg {
		width: 100%;
	}
	
	@media (max-width: 1100px) {
		
		.howitworks-steps, .whattoexpect-steps {
			grid-template-columns: repeat(3,1fr);
			gap: 1rem;
		}
		
		.step-arrow {
			display: none;
		}
	}
	
	@media (max-width: 900px) {
		
		.howitworks-steps, .whattoexpect-steps {
			grid-template-columns: repeat(2,1fr);
		}
	}
	
	@media (max-width: 600px) {
		
		.howitworks-steps, .whattoexpect-steps {
			grid-template-columns: 1fr;
		}
		
	}
	
	.howitworks-steps .step, .whattoexpect-steps .step {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		padding: 1rem;
		border-radius: 15px;
		border: 1px solid var(--tp-border);
	}
	
	.step .step-number {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	
	.step-number svg {
		width: 2rem;
		height: 2rem;
	}
	
	.step-number svg circle {
		fill: var(--tp-primary-color);
	}
	
	.step-number svg text {
		fill: white;
	}
	
	.step .step-info {
		grid-row: 1 / 2;
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.step-info svg {
		height: 64px;
		width: 64px;
		padding-bottom: 1.2rem;
	}
	
	.step-info p {
		text-align: center;
	}
	
	.step-info a {
		color: var(--tp-accent-color);
		text-decoration: none;
	}
	
	.arrow-icon {
		fill: none;
		stroke: var(--tp-primary-color);
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: .69px;
	}
	
/*======== END HOW IT WORKS ========*/
/*======== WHY WORK WITH TP ========*/
	
	.why-work-reasons {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 2rem;
	}
	
	@media (max-width: 1500px) {
    		.why-work-reasons {
      			grid-template-columns: repeat(3, 1fr);
    		}
  		}
	
	@media (max-width: 900px) {
    		.why-work-reasons {
      			grid-template-columns: repeat(2, 1fr);
    		}
  		}
	
	@media (max-width: 600px) {
    		.why-work-reasons {
      			grid-template-columns: repeat(1, 1fr);
    		}
  		}
	
	.why-work-reason {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		background: rgba(0,0,0,0.05);
		padding: 1rem;
		border-radius: 15px;
		transition: 400ms ease;
	}
	
	.why-work-reason:hover {
		transform: scale(105%)
	}
	
	.why-work-reason svg {
		display: block;
		margin: 0rem 0rem 1rem 0rem;
		width: 64px;
		height: 64px;
		fill: currentColor;
	}
	
	.why-work-reason h3 {
		flex-grow: 1;
		margin: 0;
	}
	
	.why-work-reason p {
		font-size: 75%;
	}

/*======== END WHY WORK WITH TP ========*/
/*======== LOCATIONS STYLE ========*/
	
	#locations-section p {
		margin: 0 0 1.2rem 0;
	}
	
	.locations {
		display: flex;
		flex-direction: row;
		gap: 0.5em;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.location {
		display: block;
		background: var(--tp-darken);
		padding: 1em 2em;
		white-space: nowrap;
		border-radius: 500px;
	}
	
/*======== END LOCATIONS ========*/
/*======== FAQ STYLE ========*/


.faq,
.prep-faq,
.flam-faq {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	
	@media (max-width: 900px) {
		
		.faq,
		.prep-faq,
		.flam-faq {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
	}
	
	
	.faq details,
	.prep-faq details, 
	.flam-faq details {
		padding: 1em;
		border: 1px solid var(--tp-border);
		border-radius: 10px;
		cursor: pointer;
	}
	
	.faq .col,
	.prep-faq .col,
	.flam-faq .col {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	
	.faq-item .faq-question {
		font-size: 1.2em;
		font-weight: 400;
	}
	
	.faq-item .faq-answer {
		margin: 1rem 0 0 1rem;
		line-height: 1.5;
		list-style-position: inside;
	}

	
/*======== END FAQ ========*/
/*======== CTA STYLE ========*/
	
	#cta-container {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('images/DSC06477-HDR-Edit.jpg');
		background-size: cover;
		background-position: center;
		padding-block: 5rem;
	}
	
	.cta-section {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		align-items: start;
	}
	
	@media (max-width: 900px) {
		
		.cta-section {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
	}
	
	
	.cta-col {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	
	.cta-section p a {
		color: var(--tp-accent-color);
	}
	
	.cta-section p a:hover {
		color: var(--tp-accent-color2);
	}
	
	.cta-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
	}
	
	.cta-buttons .portfolio-button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--tp-text-light);
		text-decoration: none;
		padding: 1.5rem;
		width: 200px;
		box-shadow: inset 0 0 0 2px var(--tp-text-light);
		border-radius: var(--tp-button-radius);
		min-width: 250px;
	}
	
	.cta-buttons .portfolio-button:hover {
		background: rgba(255,255,255,0.15);
	}

/*======== END CTA ========*/
/*======== FOOTER STYLE ========*/
	
	#footer-container {
		background: var(--tp-primary-color);
	}
	
	#footer-section {
		padding-block: 4rem;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
	}	
	
	.copyright {
		grid-column: 1 / 3;
	}
	
	.footer-nav {
		grid-column: 3 / 4;
	}
	
	.footer-address {
		grid-column: 4 / 5;
	}
	
	.footer-contact {
		grid-column: 5 / 6;
	}
	
	@media screen and (max-width: 900px) {
		
		.footer-section {
			gap: 1rem;
		}
		
		.copyright,
		.footer-nav,
		.footer-address,
		.footer-contact {
			grid-column: 1 / 11;
		}
	}
	
	.footer-nav .nav-items,
	.footer-contact {
		display: flex;
		flex-direction: column;
		margin-left: 1rem;
		gap: 0.5rem;
	}
	
	footer a {
		color: var(--tp-accent-color);
	}
	
	footer a:hover {
		color: var(--tp-accent-color2);
	}
	
/*======== END FOOTER ========*/
/*======== PORTFOLIO STYLE ========*/

#portfolio h1 {
	margin-top: 4rem;
}

.portfolio-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 10px;
	gap: 2rem;
}

.portfolio-img {
	display: block;
	width: 100%;
	height: auto;
	grid-row-end: span var(--row-span, 1);
	border-radius: 15px;
}


@media screen and (max-width: 1100px) {
	
	.portfolio-gallery {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
	
	.portfolio-img {
		border-radius: 12px;
	}
}

@media screen and (max-width: 900px) {
	
	.portfolio-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.portfolio-img {
		border-radius: 10px;
	}
}

@media screen and (max-width: 600px) {
	
	.portfolio-gallery {
		grid-template-columns: 1fr;
	}
	
	.portfolio-img {
		border-radius: 8px;
	}
}


/*======== END PORTFOLIO =======*/
/*======== PAY AT CLOSE STYLE =======*/



#pac-hero-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	margin-block: 3rem;
}
	
#pac-hero-section h1 {
	margin-top: 4rem;
}
	
#pac-hero-section .sub-header {
	font-size: 1.25rem;
}
	
.divider {
	display: block;
	background: var(--tp-primary-color);
	height: 2px;
	width: 80%;
}
	
.pac-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

@media screen and (max-width: 900px) {
	
	.pac-columns {
		grid-template-columns: 1fr;
	}
}

.pac-col img {
	width: 100%;
	height: auto;
}
	
.pac-col ul {
	font-size: 1.5rem;
	list-style-position: outside;
	margin-left: 1.5rem;
	list-style: none;
	padding-left: 0;
}
	
.pac-col li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1rem;
}
	
.pac-col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
		
	width: 1.25rem;
	height: 1.25rem;
	
	background-image: url('images/checkmark.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
	
blockquote {
	position: relative; /* Context for absolute pseudo-elements */
	padding: 2.5rem 3.5rem; /* Room for large quotes */
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.6;
	color: #333;
}
	
blockquote::before,
blockquote::after {
	position: absolute;
	font-size: 6rem; /* Make quotes large */
	opacity: 0.3; /* Subtle transparency so it doesn't distract */
	line-height: 1;
}
	
/* Opening quote positioning */
blockquote::before {
	content: "\201C"; /* Unicode character for left double quote */
	top: 0.5rem;
	left: 0.75rem;
}

/* Closing quote positioning */
blockquote::after {
	content: "\201D"; /* Unicode character for right double quote */
	bottom: -1.5rem; /* Pull down due to large font line-height */
	right: 1rem;
}
	
.pac-testimonial {
	display: flex;
	flex-direction: column;
	background: var(--tp-4th-color);
	border-radius: 15px;
	padding: 1rem;
}
	
.testifyer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding-inline: 3.5rem;
}
	
.testifyer img {
	height: 60px;
	width: 60px;
}
	
.testifyer .name {
	font-size: 1.5rem;
}
	
#pac-howitworks-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block: 2rem;
}
	
.pac-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
	
@media screen and (max-width: 1100px) {
		
	.pac-steps {
		grid-template-columns: 1fr 1fr;
	}
}
	
@media screen and (max-width: 900px) {
		
	.pac-steps {
		grid-template-columns: 1fr;
	}
}
	
.pac-steps .step {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
	background: var(--tp-darken);
	border-radius: 15px;
	padding: 1rem;
}
	
.pac-steps svg {
	flex-shrink: 0;
	height: 60px;
	width: 60px;
}
	
.pac-steps circle {
	fill: white;
}
	
.pac-steps text {
	fill: var(--tp-primary-color);
}

/*======== END PAY AT CLOSE =======*/
/*======== PREMIUM & LUXURY PHOTOGRAPHY STYLE ========*/

/* Premium Hero Image */
#prep-hero-container {
		background: url("images/DSC05116.jpg");
	}

/* Luxury Hero Image */
#flam-hero-container {
		background: url("images/SAT02151-Edit-2.jpg");
	}

#prep-hero-container,
#flam-hero-container {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding-block: 5rem;
	
		--ratio: calc(16 / 9);

		/* Clamps the height based on dynamic width logic */ /*
		height: clamp(400px, calc(100vw / var(--ratio)), 700px);
		text-shadow: 0px 0px 33px rgba(255, 255, 255, 1); */
	} 
	
	
@media screen and (max-width: 600px) {
		
		#prep-hero-container,
		#flam-hero-container {
			height: 100vh;
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
		}
		
		/* FIXES BACKGROUND ON MOBILE SAFARI */
		@supports(-webkit-touch-callout: none) {
			#prep-hero-container,
			#flam-hero-container {
				background-attachment: unset;
			}
		}
	}

#prep-hero,
#flam-hero {
	backdrop-filter: blur(13px);
	padding: clamp(1rem, 3vw, 4rem);
	border-radius: var(--tp-button-radius);
	border: 1px solid var(--tp-text-light);
	margin-block: 1rem;
}

#prep-hero .hero-button,
#flam-hero .hero-button {
	max-width: 300px;
}
	
#prep-value-prop-1,
#flam-value-prop-1 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2rem;
	margin-block: 3rem;
	}
	
#prep-value-prop-1 .value-prop-item:first-child,
#flam-value-prop-1 .value-prop-item:first-child {
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}
	
#prep-value-prop-1 .value-prop-item:not(:first-child),
#flam-value-prop-1 .value-prop-item:not(:first-child) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	background: var(--tp-darken);
	border-radius: var(--tp-button-radius);
	padding: 1.5rem;
	}
	
#prep-value-prop-1 .value-prop-item svg,
#flam-value-prop-1 .value-prop-item svg {
	width: 60px;
	height: 60px;
	fill: currentColor;
	}
	
@media screen and (max-width: 1100px) {
		
	#prep-value-prop-1,
	#flam-value-prop-1 {
		grid-template-columns: repeat(4, 1fr);
	}
		
	#prep-value-prop-1 .value-prop-item:first-child,
	#flam-value-prop-1 .value-prop-item:first-child {
		grid-column: 1 / 5;
	}
}
		
@media screen and (max-width: 900px) {
		
	#prep-value-prop-1,
	#flam-value-prop-1 {
		grid-template-columns: repeat(2, 1fr);
	}
		
	#prep-value-prop-1 .value-prop-item:first-child,
	#flam-value-prop-1 .value-prop-item:first-child {
		grid-column: 1 / 3;
	}
}
	
	#prep-value-prop-2 .value-props,
	#flam-value-prop-2 .value-props {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1rem;
	}
	
	@media screen and (max-width: 900px) {
		
		#prep-value-prop-2 .value-props,
		#flam-value-prop-2 .value-props {
			grid-template-columns: 1fr 1fr;
		}
	}
	
	@media screen and (max-width: 600px) {
		
		#prep-value-prop-2 .value-props,
		#flam-value-prop-2 .value-props {
			grid-template-columns: 1fr;
		}
	}
	
	#prep-value-prop-2 .value-prop-item,
	#flam-value-prop-2 .value-prop-item,
	#is-premium-right-section .value-prop-item,
	#is-flambient-right-section .value-prop-item{
		display: flex;
		flex-direction: row;
		gap: 1rem;
		align-items: center;
		padding: 1.5rem;
		background: var(--tp-darken);
		border-radius: var(--tp-button-radius);
	}
	
	#prep-value-prop-2 svg,
	#flam-value-prop-2 svg {
		height: 1.5rem;
		width: 1.5rem;
		fill: currentColor;
	}

	
	p.fine-print {
	opacity: 50%;
	font-size: 0.9rem
}
		
	#is-premium-right-container,
	#is-flambient-right-container {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("portfolio/DSC06194-HDR-Edit-2.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	
	#is-premium-right-section .value-props,
	#is-flambient-right-section .value-props {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	
	#is-premium-right-section .value-prop-item,
	#is-flambient-right-section .value-prop-item {
		background: rgba(255,255,255,0.10);
		backdrop-filter: blur(5px);
	}
	
/*======== END PREMIUM PHOTOGRAPHYE =======*/
/*======== CONTACT FORM =======*/

#contact-form-section {
	max-width: 800px;
	margin: 2rem auto;
	padding: clamp(2rem, 5vw, 5rem);
	background: var(--tp-text-light);
	border-radius: 2rem;
	text-align: center;
}

#contact-form-section h1 {
	margin: 0;
	padding: 0;
}

#contact-form-section > p {
	max-width: 600px;
	margin-bottom: 2.5rem;
	color: #666;
	line-height: 1.6;
}


/* Form */

.contact-form {
	display: grid;
	gap: 1.5rem;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-field label {
	font-size: 0.9rem;
	font-weight: 500;
}


/* Inputs */

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 1rem;

	border: 1px solid #ccc;
	border-radius: 4px;

	background: transparent;
	font: inherit;
	color: inherit;

	outline: none;

	transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: #111;
}

.contact-form textarea {
	min-height: 160px;
	resize: vertical;
}


/* Submit button */

.contact-form button {
	justify-self: start;
	margin-top: 0.5rem;
	padding: 0.9rem 1.5rem;

	border: 1px solid #111;
	border-radius: 0;

	background: #111;
	color: #fff;

	font: inherit;
	font-weight: 500;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.contact-form button:hover {
	background: transparent;
	color: #111;
}


/* Honeypot */

.contact-hp {
	position: absolute;
	left: -9999px;
}

/* Confirmation Page */


#contact-confirmation-section {
	max-width: 700px;
	margin: 0 auto;
	padding: clamp(5rem, 12vw, 10rem) 1rem;
	text-align: center;
}

.confirmation-button {
	display: inline-block;
	padding: 0.9rem 1.5rem;

	border: 1px solid #111;

	background: #111;
	color: #fff;

	text-decoration: none;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.confirmation-button:hover {
	background: transparent;
	color: #111;
}

/*======== END CONTACT FORM =======*/
/*======== CAROUSEL STYLE ========*/

/* Add 9 Image Gallery Containers Here */



	/* Hide Carousel Elements On Full-Size Screens */
	@media screen and (min-width: 600px) {
		.carousel-button,
		.carousel-dots {
			display: none;
		}
	}
		
	@media screen and (max-width: 600px) {
		
		.carousel {
			width: 100%;
			display: flex;
			flex-direction: row;
			gap: 1rem;
			overflow-x: auto;
			
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;

			scrollbar-width: none;
		}
		
		.carousel::-webkit-scrollbar {
			display: none;
		}
		
		.carousel-item {
			flex: 0 0 100%;
			scroll-snap-align: center;
		}
		
		.carousel-item img {
			width: 100%;
		}
		
		.carousel-button {
			position: absolute;
			width: 2rem;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			border-radius: 50%;
			cursor: pointer;
			background: var(--tp-primary-color);
			opacity: 50%;
			
			/*stops double-tap zoom */
			touch-action: manipulation;
			
			transition: 200ms ease;
		}
		
		/* fixes button background color on dark backgrounds */
		.dark .carousel-button {
			background: var(--tp-5th-color);
		}
		
		
		.carousel-button:hover, .carousel-button:active {
			opacity: 100%;
		}
		
		.carousel-button:disabled {
			opacity: 0;
		}
		
		.carousel-button svg {
			fill: var(--tp-text-light);
		}
		
		/* fixes button text color on dark backgrounds */
		.dark .carousel-button svg {
			fill: var(--tp-text-dark);
		}
		
		.carousel-prev {
			position-area: center left;
			transform: translateX(33%);
			padding-right: 0.2em;
		}
		
		.carousel-next {
			position-area: center right;
			transform: translateX(-33%);
			padding-left: 0.2em;
		}
		
		.carousel-dots {
			width: 100%;
			display: flex;
			justify-content: center;
			gap: 1rem;
		}
		
		.carousel-dot {
			width: 8px;
			height: 8px;
			padding: 0;
			border: none;
			border-radius: 50%;
			background: var(--tp-5th-color);
			cursor: pointer;
			transition:
			transform 0.2s ease,
			background 0.2s ease;
		}
		
		/* fixes inactive dots on dark background */
		.dark .carousel-dot {
			background: var(--tp-2nd-color);
		}
		
		.carousel-dot.active {
			background: var(--tp-primary-color);
			transform: scale(1.2);
		}
		
		/* fixes active dots on dark background */
		.dark .carousel-dot.active {
			background: var(--tp-5th-color);
		}
	}


/*  Select Carousel Gallery ID to anchor buttons - must be parent elemnt of .carousel-items and sibling element .carousel-button */

#fp-image-gallery {
	anchor-name: --button-anchor-fp-gallery;
}

#tp-services {
	anchor-name: --button-anchor-services;
}

#prep-gallery {
	anchor-name: --button-anchor-prep-gallery;
}

#flam-gallery {
	anchor-name: --button-anchor-flam-gallery;
}

/* Select specific carousel button  */

#fp-gallery-section .carousel-button {
	position-anchor: --button-anchor-fp-gallery;
}

#services-section .carousel-button {
		position-anchor: --button-anchor-services;
	}

#prep-gallery-section .carousel-button {
		position-anchor: --button-anchor-prep-gallery;
	}
	
#flam-gallery-section .carousel-button {
		position-anchor: --button-anchor-flam-gallery;
	}

	
	
/*======== END CAROUSEL ========*/
/*======== BEFORE AFTER STYLE ========*/

.before-after-container {
		display: flex;
		gap: 2rem;
	}
	
	@media screen and (max-width: 900px) {
		
		.before-after-container {
			flex-direction: column;
		}
	}

.before-after-image {
	position: relative;
    width: min(100%, 900px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.image-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.image-layer img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 15px;
}

/* Initial 50/50 split */
.before-layer {
    clip-path: inset(0 50% 0 0);
}

.after-layer {
    clip-path: inset(0 0 0 50%);
}

.before-after-label {
    position: absolute;
    top: 20px;
    z-index: 4;
    padding: 0.5rem 1rem;
    color: var(--tp-text-light);
    background: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    letter-spacing: 0.08em;
    border-radius: 500px;
    pointer-events: none;
}

@media screen and (max-width: 600px) {
	
	.before-after-label {
		font-size: 10px;
	}
}

.before-label {
    left: 20px;
}

.after-label {
    right: 20px;
}

.before-after-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 10;
}

.before-after-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: white;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 5;
}

.before-after-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 2px solid white;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-size: 20px;
}

@media screen and (max-width: 600px) {
		
	#see-the-difference-container {
		padding-inline: unset;
		padding: 0;
	}
		
	#see-the-difference-container h2 {
		padding-inline: 2rem;
	}
		
	.image-layer img {
		border-radius: 0;
	}
}