:root {
	--grid-gap: 2em;
	--link-color: #1e738d;
	--light-bg: hsla(46, 95.5%, 64.9%, 0.1);
  --body-bg: #fff;
}

body {
  background-color: var(--body-bg);
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}

header {
	margin: 0;
	padding: 0 1em 1em;
}

footer {
	font-size: 0.8em;
}

footer h3 {
	margin-bottom: 0.2em;
}

footer menu {
	margin: 0 0 0 1em;
	padding: 0;
}

footer li {
	display: inline-block;
	line-height: 3;
	list-style: none;
	padding: 0 1em;
}

footer li a {
	display: inline-block;
}

main > section {
	display: grid;
	grid-template-columns: 1fr;
}

.pricing ul {
	list-style-type: none;
	padding: 0;
}

.pricing li {
  margin-bottom: 1px;
}

h1, h2, h3, h4 {
	font-weight: 500;
	font-style: normal;
	margin-bottom: 1rem;
	margin-top: 0;
}

a:link, a:visited {
	color: var(--link-color);
}

.phone {
	background-color: #000;
	color: #fff;
	display: inline-block;
	padding: 0.5em;
}

.phone a:link, .phone a:visited {
	color: #fff;
	text-decoration: none;
}

section {
	padding: 1em;
}

figure {
	margin: 0;
	padding: 0;
}

img {
	width: 100%;
}

.logo img { aspect-ratio: 65/32; }
.machine img { aspect-ratio: 585/892; }
.combs img { aspect-ratio: 3/4; }
.portrait img { aspect-ratio: 1/1; }

.announcement {
  align-items: center;
  background-color: var(--light-bg);
  border: 2px solid var(--link-color);
  border-radius: 0.2em;
  font-size: 1.1em;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.about {
	background-color: var(--light-bg);
}

.about img {
	border-radius: 50%;
}

.cities h2 {
  margin-bottom: 0;
}

.cities h2 + p {
  margin-top: 0;
}

.cities ul {
	columns: 2 auto;
	list-style: none;
	padding: 0;
}

.cities ul li {
	font-size: 0.8em;
	white-space: nowrap;
}

.map > iframe {
	background: url("images/map-1col.png") top left / cover no-repeat;
}

.logo { grid-area: logo; }
.intro > h1 { grid-area: intro-heading; }
.machine { grid-area: machine; }
.intro > div { grid-area: intro-text; }
.treatment > h2 { grid-area: treatment-heading; }
.hot-air { grid-area: hot-air; }
.comb-out { grid-area: comb-out; }
.combs { grid-area: combs; }
.oil { grid-area: oil; }
.pricing { grid-area: pricing; }
.about > h2 { grid-area: about-heading; }
.experience { grid-area: experience; }
.portrait { grid-area: portrait; }
.fix { grid-area: fix; }
.cities { grid-area: cities; }
.map { grid-area: map; }

.intro {
	grid-template-areas:
		"intro-heading"
		"machine"
		"intro-text"
	;
}

.treatment {
	grid-template-areas:
		"treatment-heading"
		"hot-air"
		"comb-out"
		"combs"
		"oil"
	;
}

.services {
	grid-template-areas:
		"pricing"
	;
}

.about {
	grid-template-areas:
		"about-heading"
		"experience"
		"portrait"
		"fix"
	;
}

.service-area {
	grid-template-areas:
		"cities"
		"map"
	;
}


@media (min-width: 480px) {
	.logo {
		aspect-ratio: 143/94;
		max-height: 9rem;
	}
	
	.logo img { aspect-ratio: 143/94; }

	.map > iframe {
		background: url("images/map-3col.png") top left / cover no-repeat;
		width: 100%;
		height: 100%;
	}

	header {
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: 1fr 2fr;
		grid-template-areas: ". logo";
	}
	
	main > section {
		gap: 0 var(--grid-gap);
		grid-template-columns: 1fr 2fr;
	}
	
	.intro {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"machine intro-heading"
			"machine intro-text"
		;
	}

	.treatment {
		grid-template-areas:
			"combs treatment-heading"
			"combs hot-air"
			"combs comb-out"
			"combs oil"
		;
	}

	.services {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			". pricing"
		;
	}

	.about {
		grid-template-areas:
			"portrait about-heading"
			"portrait experience"
			"portrait fix"
		;
	}

	.service-area {
		grid-template-columns: 1fr;
		grid-template-areas:
			"cities"
			"map"
		;
	}
}

@media (min-width: 620px) {
	.service-area {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "cities map";
	}
}

@media (min-width: 740px) {
	body {
		margin: 0 auto 2em;
		max-width: 60rem;
	}

	.portrait img {
		border-radius: 50%;
	}

	.cities ul {
		columns: 2 auto;
		list-style: none;
	}
	
	.map > iframe {
		background: url("images/map-4col.png") top left / cover no-repeat;
		width: 100%;
		height: 100%;
	}

	header {
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: 1fr 3fr;
		grid-template-areas: ". logo";
	}

	main > section {
		gap: 0 var(--grid-gap);
		grid-template-columns: 1fr 3fr;
	}
}