/*
    Theme Name: ottawajewellery
    Theme URI: https://ottawajewellery.ca
    Description: ottawajewellery
    Author URI: https://ottawajewellery.ca
    Version: 1.1.0
    Text Domain: https://ottawajewellery.ca
*/

:root {
	--black: #030303;
	--deep-black: #090806;
	--gold: #e3a92f;
	--gold-bright: #fff2a4;
	--gold-mid: #c88920;
	--gold-dark: #5f3309;
	--green: #0b8f32;
	--green-dark: #04732a;
	--white: #f8f8f8;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--black);
}

body.gold-buying-page {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 50% 17%, rgba(216, 154, 38, .2), transparent 25%),
		linear-gradient(90deg, #030303, #111 48%, #030303);
	color: var(--white);
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	overflow-x: hidden;
}

body.gold-buying-page,
.gold-poster {
	display: grid;
	place-items: center;
}

a {
	color: inherit;
	text-decoration: none;
}

.gold-poster {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 100svh;
	margin: 0 auto;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle at 48% 7%, rgba(255, 216, 91, .22), transparent 17%),
		radial-gradient(circle at 55% 78%, rgba(255, 175, 35, .32), transparent 20%),
		linear-gradient(180deg, rgba(13, 16, 18, .96), rgba(0, 0, 0, .94) 38%, #030201 100%);
	box-shadow: 0 0 80px rgba(0, 0, 0, .9);
}

.gold-poster::before,
.gold-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

.gold-poster::before {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .88), transparent 24%, transparent 75%, rgba(0, 0, 0, .9)),
		linear-gradient(180deg, transparent 0 19%, rgba(0, 0, 0, .74) 36%, rgba(0, 0, 0, .2) 64%, rgba(0, 0, 0, .94) 93%);
}

.gold-poster::after {
	opacity: .3;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 4px 4px, 5px 5px;
	mix-blend-mode: overlay;
}

.poster-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background:
		radial-gradient(circle at 22% 22%, rgba(255, 198, 71, .17), transparent 23%),
		radial-gradient(circle at 78% 22%, rgba(255, 198, 71, .17), transparent 22%);
}

.scene-photo {
	position: absolute;
	inset: -4% 0 0;
	width: 100%;
	height: 108%;
	object-fit: cover;
	object-position: center top;
	opacity: .2;
	filter: sepia(.25) saturate(1.2) contrast(1.12) brightness(.72);
	mix-blend-mode: screen;
}

.bridge-scene,
.church-scene {
	position: absolute;
	top: 5.1%;
	height: 33%;
	opacity: .6;
	filter: sepia(.65) saturate(1.35) brightness(.72);
}

.bridge-scene {
	left: -7%;
	width: 47%;
	background:
		linear-gradient(9deg, transparent 51%, rgba(185, 139, 58, .5) 51.6%, transparent 52.2%),
		linear-gradient(13deg, transparent 48%, rgba(185, 139, 58, .45) 48.7%, transparent 49.4%),
		linear-gradient(17deg, transparent 45%, rgba(185, 139, 58, .42) 45.7%, transparent 46.4%),
		linear-gradient(21deg, transparent 42%, rgba(185, 139, 58, .4) 42.7%, transparent 43.4%),
		linear-gradient(25deg, transparent 39%, rgba(185, 139, 58, .38) 39.7%, transparent 40.4%),
		linear-gradient(29deg, transparent 36%, rgba(185, 139, 58, .36) 36.7%, transparent 37.4%),
		linear-gradient(34deg, transparent 33%, rgba(185, 139, 58, .34) 33.7%, transparent 34.4%);
}

.bridge-tower {
	position: absolute;
	left: 36%;
	top: 2%;
	width: 7%;
	height: 79%;
	background:
		linear-gradient(90deg, rgba(255, 219, 120, .35), rgba(67, 37, 9, .88)),
		linear-gradient(180deg, transparent 12%, rgba(255, 223, 126, .32) 12% 13.5%, transparent 13.5%);
	clip-path: polygon(43% 0, 75% 7%, 100% 100%, 0 100%, 20% 7%);
}

.bridge-tower::before {
	content: "";
	position: absolute;
	inset: 9% 39% 0 22%;
	background: rgba(5, 5, 5, .64);
}

.bridge-deck {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 19%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(226, 170, 64, .7), transparent);
}

.bridge-city {
	position: absolute;
	bottom: 17%;
	display: block;
	height: 11%;
	background: rgba(195, 139, 53, .42);
	box-shadow:
		34px -13px 0 rgba(205, 147, 54, .36),
		62px 1px 0 rgba(190, 132, 44, .4),
		91px -18px 0 rgba(205, 147, 54, .34),
		128px -4px 0 rgba(184, 126, 42, .38),
		160px -22px 0 rgba(220, 162, 67, .33);
}

.city-a {
	left: 18%;
	width: 18px;
}

.city-b {
	left: 49%;
	width: 21px;
	transform: scaleY(1.3);
}

.church-scene {
	right: -5%;
	width: 36%;
}

.church-body {
	position: absolute;
	right: 19%;
	bottom: 5%;
	width: 45%;
	height: 55%;
	background: linear-gradient(90deg, rgba(87, 51, 18, .96), rgba(216, 162, 76, .58) 50%, rgba(54, 30, 10, .98));
	border: 2px solid rgba(238, 184, 86, .25);
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.church-tower {
	position: absolute;
	right: 33%;
	top: 18%;
	width: 18%;
	height: 77%;
	background: linear-gradient(90deg, rgba(72, 42, 15, .98), rgba(225, 167, 79, .6), rgba(43, 25, 10, .98));
	border: 2px solid rgba(238, 184, 86, .2);
}

.church-dome {
	position: absolute;
	right: 32.2%;
	top: 7%;
	width: 20%;
	height: 18%;
	background: linear-gradient(90deg, rgba(83, 47, 14, .96), rgba(219, 160, 68, .62), rgba(41, 25, 10, .96));
	border-radius: 50% 50% 8% 8%;
}

.church-cross {
	position: absolute;
	right: 40.8%;
	top: 0;
	width: 2px;
	height: 13%;
	background: rgba(225, 171, 77, .75);
}

.church-cross::before {
	content: "";
	position: absolute;
	top: 21%;
	left: -8px;
	width: 18px;
	height: 2px;
	background: currentColor;
	color: rgba(225, 171, 77, .75);
}

.church-window {
	position: absolute;
	background: rgba(7, 7, 7, .66);
	border: 2px solid rgba(238, 184, 86, .22);
	border-radius: 50% 50% 6px 6px;
}

.window-a {
	right: 37.5%;
	top: 39%;
	width: 8%;
	height: 18%;
}

.window-b {
	right: 27%;
	bottom: 17%;
	width: 7%;
	height: 13%;
}

.window-c {
	right: 55%;
	bottom: 16%;
	width: 7%;
	height: 13%;
}

.poster-content {
	container-type: inline-size;
	width: min(92vw, calc(58svh + 110px), 1080px);
	height: 100%;
	min-height: 0;
	padding: clamp(18px, 3.8svh, 48px) 0 clamp(14px, 2.8svh, 38px);
	display: grid;
	grid-template-rows: 25% 30% 13% 20% 12%;
	align-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}

.brand {
	align-self: start;
	display: grid;
	justify-items: center;
	gap: .45cqw;
}

.brand-mark {
	position: relative;
	width: 20cqw;
	height: 20cqw;
	display: grid;
	place-items: center;
	margin-bottom: -1.2cqw;
}

.brand-c {
	font-family: "Cinzel", Georgia, serif;
	font-size: 22cqw;
	line-height: .78;
	font-weight: 700;
	color: transparent;
	background: linear-gradient(115deg, #fff5b2 0%, #f4c85c 28%, #b97618 54%, #ffe999 76%, #8d520f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: 0 0 22px rgba(245, 188, 62, .22);
}

.gold-ingot {
	position: absolute;
	top: 42%;
	left: 44%;
	width: 39%;
	height: 23%;
	background: linear-gradient(135deg, #fff4a7, #cf8b21 45%, #8b560e);
	transform: rotate(24deg) skewX(-12deg);
	box-shadow: 0 13px 18px rgba(0, 0, 0, .45), 0 0 15px rgba(251, 215, 95, .45);
	clip-path: polygon(15% 0, 100% 0, 84% 100%, 0 100%);
}

.gold-ingot::before {
	content: "";
	position: absolute;
	inset: 0 34% 0 0;
	background: rgba(255, 247, 188, .75);
	clip-path: polygon(15% 0, 100% 0, 84% 100%, 0 100%);
}

.gold-ingot::after {
	content: "";
	position: absolute;
	left: 45%;
	top: -56%;
	width: 5px;
	height: 54%;
	background: linear-gradient(#ffeaa0, #9c620f);
	transform: rotate(-29deg);
	transform-origin: bottom;
}

.spark,
.spark::before,
.spark::after {
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	background: var(--gold-bright);
	box-shadow: 0 0 12px 5px rgba(255, 215, 86, .72);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.spark::before,
.spark::after {
	content: "";
}

.spark-a {
	top: 11%;
	right: 12%;
	transform: scale(1.5);
}

.spark-a::before {
	left: 36px;
	top: 34px;
	transform: scale(1.9);
}

.spark-a::after {
	left: -50px;
	top: 0;
	transform: scale(.9);
}

.spark-b {
	right: 0;
	top: 36%;
	transform: scale(1.9);
}

.brand-name {
	margin: 0;
	font-family: "Cinzel", Georgia, serif;
	font-size: 6.25cqw;
	font-weight: 600;
	line-height: .98;
	text-transform: uppercase;
	color: transparent;
	background: linear-gradient(180deg, #fff1ab 0%, #dfaa38 42%, #916018 100%);
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: 0 3px 12px rgba(0, 0, 0, .85);
	letter-spacing: 0;
}

.brand-location {
	display: grid;
	grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
	align-items: center;
	gap: 2.4cqw;
	width: min(62%, 43cqw);
	margin-top: .5cqw;
	color: #fff7cf;
}

.brand-location span {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(221, 163, 45, .9));
}

.brand-location span:last-child {
	background: linear-gradient(90deg, rgba(221, 163, 45, .9), transparent);
}

.brand-location strong {
	font-size: 3.25cqw;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .33em;
	text-indent: .33em;
}

.headline {
	display: grid;
	justify-items: center;
	align-self: start;
	gap: .85cqw;
	margin-top: 3.3cqw;
	overflow: visible;
	text-transform: uppercase;
}

.headline-small,
.headline-place {
	margin: 0;
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 7px 18px rgba(0, 0, 0, .88);
	letter-spacing: 0;
}

.headline-small {
	font-size: 8.6cqw;
	color: transparent;
	background: linear-gradient(180deg, #fff1a0 0%, #d19626 52%, #7c4809 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.headline h1 {
	margin: 0;
	padding-top: .04em;
	padding-bottom: .02em;
	font-family: "Cinzel", Georgia, serif;
	font-size: 22.8cqw;
	font-weight: 900;
	line-height: .84;
	color: transparent;
	background:
		linear-gradient(180deg, #fff2ab 0%, #ebb348 34%, #c78317 58%, #f4c34b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .92));
	letter-spacing: 0;
}

.headline-place {
	margin-top: 0;
	font-size: 10.2cqw;
	color: #f6f6f6;
}

.trust-row {
	position: relative;
	width: min(86%, 704px);
	align-self: end;
	margin: 0 auto;
	padding-top: 2.4cqw;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2.2cqw;
	color: #fff;
	text-align: left;
}

.trust-row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(213, 148, 37, .98), transparent);
}

.shield-icon {
	width: 9.3cqw;
	aspect-ratio: .82;
	color: var(--gold);
	filter: drop-shadow(0 0 10px rgba(213, 148, 37, .25));
}

.shield-icon svg,
.whatsapp-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.trust-row p {
	margin: 0;
	font-size: 2.78cqw;
	font-weight: 600;
	line-height: 1.46;
	text-transform: uppercase;
	text-shadow: 0 3px 13px rgba(0, 0, 0, .95);
}

.trust-row span {
	color: var(--gold);
	padding: 0 .28em;
}

.jewelry-stage {
	position: relative;
	width: min(108%, 940px);
	aspect-ratio: 980 / 270;
	justify-self: center;
	align-self: end;
	margin-top: .8cqw;
	margin-bottom: -.4cqw;
	overflow: visible;
	isolation: isolate;
}

.jewelry-stage::before {
	content: "";
	position: absolute;
	inset: 14% 4% -8%;
	z-index: 0;
	background: radial-gradient(ellipse at center, rgba(255, 196, 48, .42), rgba(255, 196, 48, .14) 36%, transparent 73%);
	filter: blur(18px);
	opacity: .9;
}

.jewelry-stage::after {
	content: "";
	position: absolute;
	inset: -10% -8% -12%;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 46%, rgba(255, 196, 48, .08) 66%, transparent 86%);
}

.jewelry-photo {
	position: absolute;
	inset: -10% -8% -12%;
	z-index: 1;
	display: block;
	width: 116%;
	height: 122%;
	object-fit: cover;
	object-position: center 78%;
	border: 0;
	opacity: .84;
	filter: contrast(1.06) saturate(1.15) brightness(.88);
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 66% 52% at 50% 52%, rgba(0, 0, 0, 1) 0 48%, rgba(0, 0, 0, .76) 61%, rgba(0, 0, 0, .28) 76%, transparent 100%);
	-webkit-mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: radial-gradient(ellipse 66% 52% at 50% 52%, rgba(0, 0, 0, 1) 0 48%, rgba(0, 0, 0, .76) 61%, rgba(0, 0, 0, .28) 76%, transparent 100%);
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.jewelry-art {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: auto;
	filter: contrast(1.1) saturate(1.2);
	transform: translateY(-4cqw);
}

.whatsapp-cta {
	width: min(91%, 820px);
	min-height: 14.6cqw;
	margin: 1cqw auto 0;
	padding: 1.55cqw 3.4cqw;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 2.15cqw;
	border-radius: 999px;
	border: max(2px, .36cqw) solid #d4a546;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 35%),
		linear-gradient(180deg, #10a840 0%, var(--green) 45%, var(--green-dark) 100%);
	box-shadow:
		0 16px 35px rgba(0, 0, 0, .62),
		0 0 22px rgba(20, 159, 59, .34),
		inset 0 0 0 1px rgba(255, 255, 255, .13);
	color: #fff;
	text-transform: uppercase;
	transition: transform .18s ease, filter .18s ease;
}

.whatsapp-cta:hover,
.whatsapp-cta:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.08);
	outline: none;
}

.whatsapp-icon {
	width: 9.8cqw;
	aspect-ratio: 1;
	color: #fff;
}

.whatsapp-cta span:last-child {
	min-width: 0;
	font-size: 5.45cqw;
	font-weight: 900;
	line-height: 1;
	text-align: left;
	white-space: nowrap;
	text-shadow: 0 3px 9px rgba(0, 0, 0, .42);
	letter-spacing: 0;
}

@media (min-width: 761px) {
	.poster-content {
		width: min(78vw, calc(46svh + 72px), 860px);
		padding-top: clamp(14px, 2.4svh, 30px);
		padding-bottom: clamp(12px, 2.2svh, 28px);
		grid-template-rows: repeat(5, auto);
		align-content: space-evenly;
		row-gap: clamp(7px, 1.1svh, 14px);
	}

	.brand,
	.headline,
	.whatsapp-cta,
	.jewelry-stage,
	.trust-row {
		align-self: center;
	}

	.headline,
	.whatsapp-cta,
	.jewelry-stage,
	.trust-row {
		margin-top: 0;
		margin-bottom: 0;
	}

	.jewelry-stage {
		width: min(94%, 760px);
	}

	.whatsapp-cta {
		width: min(80%, 650px);
		min-height: 12.2cqw;
	}

	.trust-row {
		width: min(76%, 560px);
		padding-top: 1.7cqw;
	}
}

@media (max-width: 760px) {
	.poster-content {
		width: min(91.5%, 850px);
	}

	.brand-location {
		width: 58cqw;
	}

	.trust-row {
		width: min(88%, 704px);
	}
}

@media (max-width: 760px) {
	body.gold-buying-page {
		background: #030303;
	}

	.poster-content {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: min(89vw, 430px);
		gap: clamp(6px, 1svh, 12px);
		height: 100svh;
		min-height: 100svh;
		padding-top: clamp(10px, 1.8svh, 18px);
		padding-bottom: clamp(10px, 1.8svh, 18px);
	}

	.brand-mark {
		width: 16.4cqw;
		height: 16.4cqw;
		margin-bottom: -.75cqw;
	}

	.brand-c {
		font-size: 18.4cqw;
	}

	.brand-name {
		font-size: 5.45cqw;
	}

	.brand-location {
		width: 54cqw;
		gap: 2cqw;
	}

	.brand,
	.headline,
	.trust-row,
	.jewelry-stage {
		align-self: center;
	}

	.headline {
		gap: 1.05cqw;
		margin-top: 0;
	}

	.headline-small {
		font-size: 7.35cqw;
		line-height: 1.08;
	}

	.headline h1 {
		font-size: 19.8cqw;
		line-height: .9;
		padding-top: .08em;
		padding-bottom: .03em;
	}

	.headline-place {
		font-size: 8.65cqw;
		line-height: 1.05;
	}

	.whatsapp-cta {
		width: min(88%, 390px);
		min-height: 12.4cqw;
		padding: 1.3cqw 2.8cqw;
		gap: 1.9cqw;
		margin-top: 0;
	}

	.whatsapp-icon {
		width: 8.5cqw;
	}

	.whatsapp-cta span:last-child {
		font-size: 4.7cqw;
	}

	.jewelry-stage {
		width: min(98%, 430px);
		aspect-ratio: 980 / 238;
		margin-top: 0;
		margin-bottom: 0;
	}

	.trust-row {
		width: min(88%, 420px);
		padding-top: 1.7cqw;
		gap: 1.7cqw;
	}

	.shield-icon {
		width: 7.2cqw;
	}

	.trust-row p {
		font-size: 2.45cqw;
		line-height: 1.38;
	}

	.jewelry-art {
		transform: translateY(0);
	}

	.bridge-scene {
		left: -18%;
		width: 58%;
	}

	.church-scene {
		right: -18%;
		width: 48%;
	}

	.brand-location strong {
		letter-spacing: .28em;
		text-indent: .28em;
	}
}

@media (max-width: 390px) {
	.poster-content {
		width: 90vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}