header {

	picture,
	div.content-wrapper {
		grid-row: 1;
	}

	picture {
		grid-column: full-bleed;
		position: relative;

		img {
			height: 90dvh;
			object-position: right bottom;
		}
	}

	picture::before {
		background: radial-gradient(
			circle at top right, transparent 50%, rgba(0, 0, 0, 0.3) 80%);
		content: "";
		height: 100%;
		position: absolute;
		width: 100%;
	}

	div.content-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: var(--dim-height-bleed) 0;
		padding-top: calc(0.5 * var(--dim-height-bleed));
		z-index: 0;

		nav {
			align-items: center;
			display: flex;
			justify-content: space-between;

			a.logo svg {
				--width-svg: 8.00rem;
				--height-svg: calc(0.432 * var(--width-svg));

				fill: white;
				filter: drop-shadow(0 0.0625em 0.0625em rgba(0, 0, 0, 0.2));
				height: var(--height-svg);
				min-height: var(--height-svg);
				min-width: var(--width-svg);
				stroke: none;
				width: var(--width-svg);
			}
			
			a.button { display: none; }
		}

		hgroup {
			color: white;
			grid-column: regular;
			text-shadow: 0 0.0625em 0.0625em rgba(0, 0, 0, 0.2);

			p:nth-of-type(1) { max-width: 50ch; }

			p:nth-of-type(2) { font-weight: bold; }
		}
	}
}


section.services {

	hgroup {
		margin-bottom: 2.50rem;

		h2 { margin-top: 0; }
	}

	div[role=list] {
		flex-wrap: wrap;
		gap: 2.50rem;

		article {
			flex: 1;
			min-width: 35ch;

			picture {
				border-radius: var(--dim-brounded);
				height: 50lvh;
			}

			picture:hover img { transform: scale(1.05); }
		}
	}
}


section.google-reviews {
	display: grid;
	grid-column: full-bleed;
	grid-template-columns: subgrid;

	div[role=list] {
		align-items: flex-start;
		display: flex;
		gap: 2.50rem;
		grid-column: full-bleed;
		margin-bottom: -1.00rem;
		overflow: scroll;
		padding-bottom: 1.00rem;
		padding-left: calc(2 * var(--dim-width-bleed));
		padding-right: var(--dim-width-bleed);

		a {
			background-color: #f6f6f6;
			border-radius: var(--dim-brounded);
			display: block;
			min-width: 40ch;
			padding: 1.00rem;
			text-decoration: none;

			div[role=presentation] {
				align-items: center;
				display: flex;
				gap: 1ch;
				margin-bottom: 1.50rem;

				div.avatar {
					--dim-avatar: 3rem;

					align-items: center;
					border-radius: 100%;
					color: white;
					font-size: var(--font-size-minor);
					font-weight: bold;
					display: flex;
					height: var(--dim-avatar);
					margin-right: 1ch;
					justify-content: center;
					width: var(--dim-avatar);
				}

				h3 {
					display: block;
					margin: 0;
				}

				span.n-stars {
					font-size: 1.25rem;
					margin-left: auto;
				}

				svg {
					--dim-svg: 1.75rem;

					/*stroke: #d30000;*/
					stroke-width: 1.5;
					transform: translateY(-0.1ex);
				}
			}

			p::before {
				content: "“";
			}

			p::after {
				content: "”";
			}

		}

		a.review-PB div.avatar  { background-color: #d30000; }

		a.review-MvZ div.avatar { background-color: #ab47bc; }

		a.review-EvS div.avatar { background-color: #adbb41; }

		a.review-WdJ div.avatar { background-color: #5c6bc0; }

		a.review-HA div.avatar  { background-color: var(--color-copy); }

		a.review-EG div.avatar  { background-color: #5c6bc0; }

		a.review-HN div.avatar { background-color: #ab47bc; }

		a.review-JS div.avatar  { background-color: var(--color-copy); }
	}

	menu {
		align-items: center;
		display: flex;
		gap: 2rem;
		grid-column: regular;
		justify-content: center;
		margin-top: 3rem;

		button {
			align-items: center;
			display: flex;
			border-radius: 100%;
			height: 4rem;
			justify-content: center;
			width: 4rem;

			svg { stroke-width: 1.5; }
		}

		button[disabled] {
			background-color: #f9f9f9;

			svg { stroke: #ddd; }
		}
	}
}


section.about-us {
	/* border-top: 1px solid #d30000; */
	column-count: 2;
	column-gap: var(--dim-width-bleed);
	column-width: calc(0.5 * (var(--dim-width-content) - var(--dim-width-bleed)));

	hgroup,
	blockquote {
		column-span: all;
	}

	blockquote {
		align-items: flex-end;
		color: #d30000;
		display: flex;
		flex-direction: column;
		gap: 1.00em;
		margin-bottom: 2.50rem;
		text-align: right;

		p {
			font-size: 1.50rem;
			max-width: 30ch;
			position: relative;
		}

		p::before,
		p::after {
			position: absolute;
		}

		p::before {
			content: "\201C";
			transform: translateX(-100%);
		}

		p::after { content: "\201D"; }

	}
}


section.contact {
	hgroup { margin-bottom: 2.50rem; }

	iframe {
		background-color: var(--color-placeholder);
		border-radius: var(--dim-brounded);
		min-height: 50lvh;
	}

	ul {
		flex: 1;

		li:not(.vCard) { white-space: nowrap; }

		li.vCard {
			flex-direction: column;
		
			p#descr-vCard {
				font-size: var(--font-size-minor);
				margin: 2.00rem 0;
				/* max-width: 30ch; */
			}
		}
	}
}