/**
 * Window Tinting landing page (/window-tinting/).
 *
 * Everything is scoped under `.pwc-wt` so it cannot leak into the Elementor
 * header/footer or any other page. Tokens, fonts and button treatment are
 * lifted from the existing site so the page reads as native:
 *
 *   ink        #091926  --e-global-color-62d3901
 *   ink-soft   #113F66  --e-global-color-d8743aa
 *   teal       #399FAE  --e-global-color-2c432b7   (primary button / accent)
 *   teal-dark  #266A74  --e-global-color-83be617
 *   aqua       #57BFB8  --e-global-color-943cc5b
 *   tint       #F0FDFF  --e-global-color-d57014d   (section wash)
 *   line       #D3E4EC                             (from the contact form card)
 *
 * Headings are Oswald 500 uppercase, body copy is Roboto — both already
 * loaded globally by Elementor. Breakpoints are the site's own: 1024px
 * (tablet) and 767px (mobile).
 */

.pwc-wt {
	--pwc-ink: #091926;
	--pwc-ink-soft: #113F66;
	--pwc-teal: #399FAE;
	--pwc-teal-dark: #266A74;
	--pwc-aqua: #57BFB8;
	--pwc-tint: #F0FDFF;
	--pwc-tint-2: #E6F4FF;
	--pwc-line: #D3E4EC;
	--pwc-body: #5C7183;
	--pwc-radius: 10px;

	font-family: "Roboto", Arial, sans-serif;
	color: var(--pwc-ink);
	/* Belt and braces against horizontal scroll on phones. */
	overflow-x: clip;
}

.pwc-wt *,
.pwc-wt *::before,
.pwc-wt *::after {
	box-sizing: border-box;
}

.pwc-wt img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
   Shared layout primitives
   --------------------------------------------------------------- */

.pwc-wt__section {
	padding: 78px 20px;
}

.pwc-wt__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.pwc-wt__section--tint {
	background-color: var(--pwc-tint);
}

.pwc-wt__section--tint-2 {
	background-color: var(--pwc-tint-2);
}

.pwc-wt__section--dark {
	background-color: var(--pwc-ink);
	color: #FFFFFF;
}

.pwc-wt__eyebrow {
	display: block;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pwc-teal);
	margin: 0 0 12px;
}

.pwc-wt__section--dark .pwc-wt__eyebrow {
	color: var(--pwc-aqua);
}

/* Section headings mirror the Elementor heading widget: Oswald 500, 40px,
   uppercase, 1.15em line height. */
.pwc-wt h2 {
	font-family: "Oswald", Sans-serif;
	font-size: 40px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.15em;
	letter-spacing: 0;
	color: var(--pwc-ink);
	margin: 0 0 18px;
}

.pwc-wt__section--dark h2 {
	color: #FFFFFF;
}

.pwc-wt h3 {
	font-family: "Oswald", Sans-serif;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.2em;
	color: var(--pwc-ink);
	margin: 0 0 10px;
}

.pwc-wt__section--dark h3 {
	color: #FFFFFF;
}

.pwc-wt p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pwc-body);
	margin: 0 0 16px;
}

.pwc-wt__section--dark p {
	color: rgba(255, 255, 255, .82);
}

.pwc-wt p:last-child {
	margin-bottom: 0;
}

.pwc-wt__lead {
	font-size: 19px;
	line-height: 1.65;
}

.pwc-wt a {
	color: var(--pwc-teal-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pwc-wt a:hover {
	color: var(--pwc-teal);
}

.pwc-wt__section--dark a {
	color: var(--pwc-aqua);
}

/* ---------------------------------------------------------------
   Buttons — same treatment as the Elementor global button (teal fill,
   19px bold, glow shadow, inverts on hover, wrapper lifts 5px).
   The markup also carries .elementor-button so padding/typography come
   straight from Elementor's own frontend.min.css.
   --------------------------------------------------------------- */

.pwc-wt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.pwc-wt__btn.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 30px;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-radius: var(--pwc-radius);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	transition: background-color .3s ease-out, color .3s ease-out, transform .3s ease-out;
}

.pwc-wt__btn--primary.elementor-button {
	background-color: var(--pwc-teal);
	border-color: var(--pwc-teal);
	color: #FFFFFF;
}

.pwc-wt__btn--primary.elementor-button:hover,
.pwc-wt__btn--primary.elementor-button:focus {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--pwc-teal);
}

/* Ghost button, as used beside the primary CTA on the dark hero. */
.pwc-wt__btn--ghost.elementor-button {
	background-color: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
	fill: #FFFFFF;
}

.pwc-wt__btn--ghost.elementor-button:hover,
.pwc-wt__btn--ghost.elementor-button:focus {
	background-color: var(--pwc-teal);
	border-color: var(--pwc-teal);
	color: #FFFFFF;
}

/* On light sections the ghost button needs ink, not white. */
.pwc-wt__btn--outline.elementor-button {
	background-color: transparent;
	border-color: var(--pwc-teal);
	color: var(--pwc-teal-dark);
	box-shadow: none;
}

.pwc-wt__btn--outline.elementor-button:hover,
.pwc-wt__btn--outline.elementor-button:focus {
	background-color: var(--pwc-teal);
	color: #FFFFFF;
}

.pwc-wt__btn.elementor-button:hover {
	transform: translate(0, -5px);
}

.pwc-wt__btn.elementor-button svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: currentColor;
}

.pwc-wt a:focus-visible,
.pwc-wt button:focus-visible,
.pwc-wt summary:focus-visible {
	outline: 3px solid var(--pwc-aqua);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.pwc-wt__hero {
	position: relative;
	background-color: #091926;
	background-image: url("/wp-content/uploads/2024/11/shutterstock_2433521313-copy.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 150px 20px 90px;
	isolation: isolate;
}

.pwc-wt__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, #00000075 0%, #287C88B5 100%);
	z-index: -1;
}

.pwc-wt__hero-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	max-width: min(1200px, 100%);
}

.pwc-wt__hero-copy {
	max-width: 780px;
}

.pwc-wt__hero h1 {
	font-family: "Oswald", Sans-serif;
	font-size: 72px;
	font-weight: bold;
	font-style: normal;
	line-height: 1.05em;
	letter-spacing: 1px;
	text-shadow: 0 0 10px #000000;
	color: #FFFFFF;
	margin: 0 0 18px;
	/* Long place names must never force a scrollbar. */
	overflow-wrap: break-word;
}

.pwc-wt__hero-sub {
	font-family: "Oswald", Sans-serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.25em;
	letter-spacing: 1px;
	text-shadow: 0 0 10px #000000;
	color: #FFFFFF;
	margin: 0 0 20px;
}

.pwc-wt__hero p {
	color: rgba(255, 255, 255, .93);
	font-size: 18px;
	line-height: 1.65;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
	max-width: 660px;
}

.pwc-wt__hero .pwc-wt__eyebrow {
	color: #FFFFFF;
	text-shadow: 0 0 10px #000000;
}

/* Small reassurance strip under the hero CTAs. */
.pwc-wt__hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.pwc-wt__hero-points li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	color: #FFFFFF;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.pwc-wt__hero-points svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: var(--pwc-aqua);
}

/* ---------------------------------------------------------------
   Card grids (benefits, film types, process)
   --------------------------------------------------------------- */

.pwc-wt__grid {
	display: grid;
	gap: 24px;
	margin-top: 44px;
}

.pwc-wt__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pwc-wt__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pwc-wt__card {
	background: #FFFFFF;
	border: 1px solid rgba(9, 25, 38, .07);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(9, 25, 38, .09);
	padding: 30px 26px;
	transition: transform .3s ease-out, box-shadow .3s ease-out;
}

.pwc-wt__card:hover {
	transform: translate(0, -5px);
	box-shadow: 0 16px 38px rgba(9, 25, 38, .14);
}

.pwc-wt__card p:last-child {
	margin-bottom: 0;
}

.pwc-wt__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pwc-tint);
	margin-bottom: 18px;
}

.pwc-wt__card-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--pwc-teal);
}

/* ---------------------------------------------------------------
   Two-column media rows (residential / commercial / cross-sell)
   --------------------------------------------------------------- */

.pwc-wt__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
}

.pwc-wt__split--reverse .pwc-wt__split-media {
	order: -1;
}

.pwc-wt__split-media img {
	display: block;
	width: 100%;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(9, 25, 38, .18);
}

.pwc-wt__figure {
	margin: 0;
}

.pwc-wt__figure figcaption {
	font-size: 14px;
	line-height: 1.5;
	color: var(--pwc-body);
	margin-top: 10px;
}

/* Checklist used inside the residential/commercial copy. */
.pwc-wt__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 22px;
}

.pwc-wt__list li {
	position: relative;
	padding-left: 27px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pwc-ink-soft);
}

.pwc-wt__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 15px;
	height: 8px;
	border-left: 2.5px solid var(--pwc-teal);
	border-bottom: 2.5px solid var(--pwc-teal);
	transform: rotate(-45deg);
}

.pwc-wt__section--dark .pwc-wt__list li {
	color: rgba(255, 255, 255, .9);
}

.pwc-wt__section--dark .pwc-wt__list li::before {
	border-color: var(--pwc-aqua);
}

/* Pull-quote style line used for the residential promise. */
.pwc-wt__promise {
	font-family: "Oswald", Sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--pwc-teal-dark);
	border-left: 4px solid var(--pwc-teal);
	padding: 4px 0 4px 18px;
	margin: 0 0 22px;
}

/* ---------------------------------------------------------------
   Process — 4 numbered steps
   --------------------------------------------------------------- */

.pwc-wt__step {
	background: #FFFFFF;
	border: 1px solid rgba(9, 25, 38, .07);
	border-radius: 14px;
	padding: 28px 24px;
	box-shadow: 0 10px 30px rgba(9, 25, 38, .07);
}

.pwc-wt__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--pwc-teal);
	color: #FFFFFF;
	font-family: "Oswald", Sans-serif;
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------
   FAQ — native <details>, no JavaScript
   --------------------------------------------------------------- */

.pwc-wt__faq {
	max-width: 900px;
	margin: 40px auto 0;
}

.pwc-wt__faq-item {
	background: #FFFFFF;
	border: 1px solid var(--pwc-line);
	border-radius: var(--pwc-radius);
	margin-bottom: 14px;
	overflow: hidden;
}

.pwc-wt__faq-item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
	font-family: "Oswald", Sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pwc-ink);
}

.pwc-wt__faq-item summary::-webkit-details-marker {
	display: none;
}

.pwc-wt__faq-item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-top: .35em;
	border-right: 2.5px solid var(--pwc-teal);
	border-bottom: 2.5px solid var(--pwc-teal);
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.pwc-wt__faq-item[open] summary::after {
	transform: rotate(-135deg);
}

.pwc-wt__faq-item summary:hover {
	color: var(--pwc-teal-dark);
}

.pwc-wt__faq-answer {
	padding: 0 20px 20px;
}

.pwc-wt__faq-answer p {
	font-size: 16px;
}

/* ---------------------------------------------------------------
   Service area chips
   --------------------------------------------------------------- */

.pwc-wt__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.pwc-wt__areas li a,
.pwc-wt__areas li span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 15px;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease;
}

.pwc-wt__areas li a:hover {
	background: var(--pwc-teal);
	border-color: var(--pwc-teal);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------
   Closing CTA band
   --------------------------------------------------------------- */

.pwc-wt__cta {
	background-color: var(--pwc-teal-dark);
	background-image: linear-gradient(135deg, #266A74 0%, #399FAE 100%);
	text-align: center;
}

.pwc-wt__cta h2,
.pwc-wt__cta .pwc-wt__eyebrow {
	color: #FFFFFF;
}

.pwc-wt__cta p {
	color: rgba(255, 255, 255, .93);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.pwc-wt__cta .pwc-wt__actions {
	justify-content: center;
}

.pwc-wt__cta .pwc-wt__btn--primary.elementor-button {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--pwc-teal-dark);
}

.pwc-wt__cta .pwc-wt__btn--primary.elementor-button:hover,
.pwc-wt__cta .pwc-wt__btn--primary.elementor-button:focus {
	background-color: var(--pwc-ink);
	border-color: var(--pwc-ink);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------
   Tablet — 1024px, the site's own tablet breakpoint
   --------------------------------------------------------------- */

@media (max-width: 1024px) {

	.pwc-wt__section {
		padding: 62px 20px;
	}

	.pwc-wt__hero {
		padding: 120px 20px 72px;
	}

	.pwc-wt__hero h1 {
		font-size: 56px;
	}

	.pwc-wt__hero-sub {
		font-size: 30px;
	}

	.pwc-wt h2 {
		font-size: 38px;
	}

	.pwc-wt__grid--3,
	.pwc-wt__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pwc-wt__split {
		gap: 40px;
	}
}

/* ---------------------------------------------------------------
   Mobile — 767px.
   Transforms and hover lifts are dropped here: they cost paint on
   phones and there is no hover to trigger them on touch anyway.
   --------------------------------------------------------------- */

@media (max-width: 767px) {

	.pwc-wt__section {
		padding: 48px 18px;
	}

	.pwc-wt__hero {
		padding: 100px 18px 56px;
		/* A fixed/parallax attachment is expensive on mobile GPUs. */
		background-attachment: scroll;
	}

	.pwc-wt__hero h1 {
		font-size: 34px;
		line-height: 1.1em;
	}

	.pwc-wt__hero-sub {
		font-size: 20px;
	}

	.pwc-wt__hero p,
	.pwc-wt__lead {
		font-size: 16px;
	}

	.pwc-wt h2 {
		font-size: 28px;
	}

	.pwc-wt h3 {
		font-size: 21px;
	}

	.pwc-wt__grid {
		margin-top: 30px;
	}

	.pwc-wt__grid--3,
	.pwc-wt__grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.pwc-wt__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* On a single column the image should follow the copy everywhere,
	   so the reversed desktop row un-reverses. */
	.pwc-wt__split--reverse .pwc-wt__split-media {
		order: 0;
	}

	.pwc-wt__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.pwc-wt__promise {
		font-size: 20px;
	}

	.pwc-wt__card {
		padding: 24px 20px;
	}

	/* Full-width CTAs are far easier to hit with a thumb. */
	.pwc-wt__actions {
		gap: 12px;
	}

	.pwc-wt__btn.elementor-button {
		width: 100%;
		font-size: 17px;
		padding: 14px 20px;
	}

	.pwc-wt__faq-item summary {
		font-size: 17px;
		padding: 16px;
	}

	.pwc-wt__faq-answer {
		padding: 0 16px 16px;
	}

	/* No entrance or hover motion on phones. */
	.pwc-wt__card,
	.pwc-wt__btn.elementor-button {
		transition: none;
	}

	.pwc-wt__card:hover,
	.pwc-wt__btn.elementor-button:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pwc-wt *,
	.pwc-wt *::before,
	.pwc-wt *::after {
		transition: none !important;
		animation: none !important;
	}

	.pwc-wt__card:hover,
	.pwc-wt__btn.elementor-button:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   Header — this page only.

   The site header is a transparent overlay: Elementor pulls the page
   content up underneath it with a negative bottom margin sized to the
   tall (150x178) logo. The logo hung down over the hero headline here,
   so the logo widget is removed from this page's header markup.

   With the logo gone the header is far shorter than that negative
   margin, which would drag the hero up and clip its top. Taking the
   header out of flow entirely gives the same overlay effect without
   depending on its height, and the hero starts cleanly at the top of
   the page. Scoped to this page's body id so no other page is touched.
   --------------------------------------------------------------- */

body.page-id-4096 #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

body.page-id-4096 .elementor-3220 .elementor-element.elementor-element-625ade7 {
	margin-bottom: 0;
}

/* The nav now sits alone at the top of the hero; keep the headline clear
   of it on phones, where the burger toggle is the tallest thing there. */
@media (max-width: 767px) {

	body.page-id-4096 .pwc-wt__hero {
		padding-top: 118px;
	}
}