/**
 * Locksmiths landing page (tpl-locksmiths.php).
 *
 * Everything is namespaced under .phl because the page shares the document
 * with Bootstrap 4 (bb-theme), which owns unprefixed .btn / .card / .nav.
 * Element resets use :where() so Gravity Forms and theme styles still win.
 */

html:has(.phl) {
	scroll-behavior: smooth;
}

.phl {
	--phl-bg: #faf8f5;
	--phl-surface: #fff;
	--phl-border: #e0d9cf;
	--phl-accent: #2c5282;
	--phl-accent-d: #234268;
	--phl-accent-light: #ebf0f8;
	--phl-gold: #c4973a;
	--phl-text: #1a1a2e;
	--phl-text-mid: #4a4a6a;
	--phl-text-dim: #9090b0;

	font-family: 'DM Sans', sans-serif;
	background: var(--phl-bg);
	color: var(--phl-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

.phl :where(h1, h2, h3, p, ul, li, figure, figcaption, details, summary) {
	margin: 0;
	padding: 0;
}

.phl :where(ul) {
	list-style: none;
}

.phl :where(h1, h2, h3) {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	line-height: 1.1;
	color: var(--phl-text);
}

.phl :where(a) {
	color: inherit;
	text-decoration: none;
}

.phl :where(img) {
	display: block;
	max-width: 100%;
}

.phl-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
}

.phl-section {
	padding: 84px 0;
}

.phl-section--flush {
	padding-top: 0;
}

.phl-eyebrow {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--phl-gold);
}

/* hero */
.phl-hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	border-bottom: 1px solid var(--phl-border);
}

.phl-hero__left {
	padding: 82px 56px 82px 0;
}

.phl-hero h1 {
	font-size: clamp(42px, 5.6vw, 76px);
	margin: 20px 0 6px;
}

.phl-hero h1 em {
	font-style: italic;
	color: var(--phl-accent);
}

.phl-hero__sub {
	font-size: 18px;
	color: var(--phl-text-mid);
	max-width: 31em;
	margin: 20px 0 34px;
}

.phl-hero__right {
	background: var(--phl-accent-light);
	border-left: 1px solid var(--phl-border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative;
}

.phl-hero__right::before {
	content: "SC1 KEYWAY";
	position: absolute;
	top: 24px;
	left: 26px;
	font-family: 'DM Mono', monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--phl-accent);
}

.phl-card {
	background: #fff;
	border: 1px solid var(--phl-border);
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(44, 82, 130, .08);
	padding: 30px;
}

.phl-card img {
	max-height: 270px;
	width: auto;
	filter: drop-shadow(0 14px 22px rgba(26, 26, 46, .12));
}

@media (max-width: 880px) {
	.phl-hero {
		grid-template-columns: 1fr;
	}

	.phl-hero__left {
		padding: 54px 0 42px;
	}

	.phl-hero__right {
		border-left: 0;
		border-top: 1px solid var(--phl-border);
	}
}

/* buttons */
.phl-btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.phl-btn {
	display: inline-block;
	font-size: 14px;
	line-height: 1.6;
	padding: 14px 26px;
	border-radius: 3px;
	transition: .2s;
	cursor: pointer;
}

.phl-btn--solid {
	background: var(--phl-accent);
	color: #fff;
}

.phl-btn--solid:hover,
.phl-btn--solid:focus {
	background: var(--phl-accent-d);
	color: #fff;
}

.phl-btn--ghost {
	border: 1px solid var(--phl-accent);
	color: var(--phl-accent);
}

.phl-btn--ghost:hover,
.phl-btn--ghost:focus {
	background: var(--phl-accent);
	color: #fff;
}

/* trust bar */
.phl-trust {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--phl-border);
	background: var(--phl-surface);
}

.phl-trust div {
	flex: 1 1 0;
	min-width: 160px;
	padding: 22px;
	border-right: 1px solid var(--phl-border);
	font-size: 13px;
	color: var(--phl-text-mid);
}

.phl-trust div:last-child {
	border-right: 0;
}

.phl-trust b {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 24px;
	color: var(--phl-accent);
	margin-bottom: 2px;
}

@media (max-width: 880px) {
	.phl-trust div {
		flex: 1 1 50%;
		border-bottom: 1px solid var(--phl-border);
	}
}

/* section headings */
.phl-sec-head {
	max-width: 44em;
	margin-bottom: 50px;
}

.phl-sec-head h2 {
	font-size: clamp(32px, 4vw, 50px);
	margin-top: 14px;
}

.phl-sec-head p {
	color: var(--phl-text-mid);
	margin-top: 16px;
	font-size: 17px;
}

/* value props */
.phl-value {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.phl-value__cell {
	background: var(--phl-surface);
	border: 1px solid var(--phl-border);
	border-radius: 4px;
	padding: 32px 28px;
	border-top: 3px solid var(--phl-gold);
}

.phl-value__n {
	font-family: 'DM Mono', monospace;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--phl-gold);
}

.phl-value h3 {
	font-size: 23px;
	margin: 10px 0;
	color: var(--phl-accent);
}

.phl-value p {
	font-size: 15px;
	color: var(--phl-text-mid);
}

@media (max-width: 880px) {
	.phl-value {
		grid-template-columns: 1fr;
	}
}

/* product rows */
.phl-prod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	padding: 60px 0;
	border-top: 1px solid var(--phl-border);
}

.phl-prod:nth-child(even) .phl-prod__media {
	order: 2;
}

.phl-prod__media {
	background: var(--phl-surface);
	border: 1px solid var(--phl-border);
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(44, 82, 130, .06);
	padding: 34px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
}

.phl-prod__tag {
	align-self: flex-start;
	font-family: 'DM Mono', monospace;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--phl-text-dim);
}

.phl-prod__media img {
	max-height: 178px;
	width: auto;
	object-fit: contain;
}

.phl-prod__pair {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* min-width lets the flex items shrink; several source files are square rather
   than the portrait ratio their width/height attributes claim. */
.phl-prod__pair img {
	max-height: 116px;
	min-width: 0;
}

.phl-prod__pair--tall img {
	max-height: 236px;
}

.phl-prod__lead {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--phl-gold);
	margin-bottom: 12px;
}

.phl-prod h3 {
	font-size: 34px;
	color: var(--phl-accent);
	margin-bottom: 8px;
}

.phl-prod p {
	color: var(--phl-text-mid);
	margin-bottom: 20px;
	font-size: 16px;
}

.phl-spec {
	border-top: 1px solid var(--phl-border);
}

.phl-spec li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--phl-border);
	font-size: 14px;
}

.phl-spec li span:first-child {
	color: var(--phl-text-dim);
}

.phl-spec li span:last-child {
	text-align: right;
	font-weight: 500;
}

.phl-parts {
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--phl-text-dim);
}

.phl-parts b {
	color: var(--phl-accent);
	font-weight: 600;
}

@media (max-width: 880px) {
	.phl-prod {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.phl-prod:nth-child(even) .phl-prod__media {
		order: 0;
	}
}

.phl-pullgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
}

.phl-pullgrid figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.phl-pullgrid img {
	height: 166px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.phl-pullgrid figcaption {
	font-family: 'DM Mono', monospace;
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--phl-text-dim);
	text-align: center;
}

/* SC1 keyway callout */
.phl-sc1 {
	background: var(--phl-accent);
	color: #fff;
	border-radius: 5px;
	padding: 52px 46px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 46px;
	align-items: center;
}

.phl-sc1 .phl-eyebrow {
	color: var(--phl-gold);
}

.phl-sc1 h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	color: #fff;
	margin: 12px 0 14px;
}

.phl-sc1 p {
	color: #cdd8e6;
	font-size: 16px;
}

.phl-sc1__kp {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.phl-sc1__kp div {
	border-left: 2px solid var(--phl-gold);
	padding-left: 15px;
}

.phl-sc1__kp b {
	font-family: 'Playfair Display', serif;
	font-size: 19px;
	display: block;
	margin-bottom: 2px;
}

.phl-sc1__kp span {
	font-size: 13.5px;
	color: #cdd8e6;
}

@media (max-width: 880px) {
	.phl-sc1 {
		grid-template-columns: 1fr;
		padding: 38px 26px;
	}
}

/* how to order */
.phl-order {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

.phl-order__num {
	font-family: 'Playfair Display', serif;
	font-size: 40px;
	color: var(--phl-gold);
}

.phl-order h3 {
	font-size: 21px;
	color: var(--phl-accent);
	margin: 10px 0 8px;
}

.phl-order p {
	color: var(--phl-text-mid);
	font-size: 15px;
}

@media (max-width: 880px) {
	.phl-order {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* trade pricing application (Gravity Form 2) */
.phl-apply {
	margin-top: 30px;
}

.phl-apply h3 {
	font-size: 1.3rem;
	color: var(--phl-text);
	margin: 0 0 6px;
}

.phl-apply__intro {
	color: var(--phl-text-mid);
	margin: 0 0 18px;
	max-width: 62ch;
}

.phl-apply__form {
	max-width: 680px;
}

.phl-apply__form .gform_wrapper {
	--gf-color-primary: var(--phl-accent);
	--gf-color-primary-darker: var(--phl-accent-d);
	--gf-color-primary-contrast: var(--phl-surface);
	--gf-ctrl-border-color: var(--phl-border);
	--gf-ctrl-radius: 7px;
	--gf-ctrl-btn-bg-color-primary: var(--phl-accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--phl-accent-d);
	--gf-ctrl-btn-border-color-primary: var(--phl-accent);
	--gf-ctrl-btn-radius: 7px;
	--gf-ctrl-label-color-primary: var(--phl-text-mid);
}

.phl-apply__note {
	font-size: .8rem;
	color: var(--phl-text-dim);
	margin-top: 12px;
}

.phl-apply__note a {
	color: var(--phl-accent);
	text-decoration: underline;
}

/* FAQ */
.phl-faq {
	max-width: 880px;
}

.phl-faq details {
	border-bottom: 1px solid #e5ddd0;
	padding: 4px 0;
}

.phl-faq details:first-of-type {
	border-top: 1px solid #e5ddd0;
}

.phl-faq summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
	color: var(--phl-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.phl-faq summary::-webkit-details-marker {
	display: none;
}

.phl-faq summary::after {
	content: "+";
	color: var(--phl-gold);
	font-weight: 600;
	flex: none;
}

.phl-faq details[open] summary::after {
	content: "\2212";
}

.phl-faq p {
	margin: 0 0 18px;
	color: #55524e;
	max-width: 60ch;
}

/* closing CTA */
.phl-cta {
	text-align: center;
	padding: 92px 0;
	border-top: 1px solid var(--phl-border);
}

.phl-cta h2 {
	font-size: clamp(36px, 5vw, 62px);
}

.phl-cta h2 em {
	font-style: italic;
	color: var(--phl-accent);
}

.phl-cta p {
	color: var(--phl-text-mid);
	max-width: 34em;
	margin: 16px auto 30px;
	font-size: 18px;
}

.phl-cta .phl-btns {
	justify-content: center;
}

/* trademark notice */
.phl-legal {
	background: var(--phl-surface);
	border-top: 1px solid var(--phl-border);
	color: var(--phl-text-dim);
	padding: 40px 0 34px;
}

.phl-legal p {
	font-size: 11.5px;
	line-height: 1.7;
	max-width: 64em;
}

.phl-legal p + p {
	margin-top: 12px;
}

.phl-legal b {
	color: var(--phl-text-mid);
}

/* scroll reveal */
.phl-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
}

.phl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.phl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}