/* Landing pages: layout "landing", used by /client-work/ and later
   profession pages. main_v12.css resets every margin and font size,
   so this sheet sets all text spacing itself. The Hamburger block is copied
   from about.css, which is the only other place it is styled. */

/* Hamburger */

	.hamburger {
		position: absolute;
		top: 5px;
		right: 15px;
		z-index: 100;
	}
	
	.home-button {
		position: absolute;
		top: -2px;
		right: 40px;
		font-size: 16px;
		font-weight: 400;
	}
	
	.hamburger a:link {
		color: rgba(0, 0, 0, 0.4);
	}
	
	.hamburger a:hover {
		color: #FF9A01;
	}
	
	.hamburger a:visited {
		color: rgba(0, 0, 0, 0.4);
	}
	
	.menu-button {
		display: inline;
	}
	
	.menu-button img {
		width: 22px; 
		height: 22px;
	}
	



/* Page */

	/* Banner: the homepage header's colours, measured from the live page. */

	.lp-sky {
		background: #FFB502;
		overflow: hidden;
	}

	.lp-band {
		background: #FF8600;
		height: 102px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lp-scene {
		position: relative;
		height: 240px;
		max-width: 1100px;
		margin: 0 auto;
	}

	.lp-mountains {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 392px;
		height: auto;
		z-index: 3;
	}

	.lp-sun {
		position: absolute;
		width: 121px;
		height: 121px;
		border-radius: 50%;
		background: #FF8600;
		right: calc(50% + 220px); /* clear of the mountains (half width 196) */
		top: 0;
		z-index: 1;
	}

	.lp-cloud {
		position: absolute;
		height: auto;
	}
	/* Anchored to the centre so no width slides a cloud behind the mountains. */
	.lp-cloud-far   { width: 113px; right: calc(50% + 390px); top: 60px;  opacity: 0.3; z-index: 0; }
	.lp-cloud-left  { width: 229px; right: calc(50% + 225px); bottom: -30px; opacity: 0.3; z-index: 2; }
	.lp-cloud-near  { width: 155px; left: calc(50% + 205px); bottom: -35px; opacity: 0.7; z-index: 2; }
	.lp-cloud-right { width: 377px; left: calc(50% + 380px); bottom: -40px; opacity: 0.93; z-index: 2; }

	/* Faint Agenda icons in the sky, as on the homepage (opacity 0.1-0.26). */
	.lp-icon {
		position: absolute;
		height: auto;
		z-index: 0;
	}
	.lp-icon-card  { width: 153px; left: calc(50% + 250px); top: -10px;  opacity: 0.26; }
	.lp-icon-cal   { width: 100px; left: calc(50% + 205px); top: 120px;  opacity: 0.18; }
	.lp-icon-notes { width: 168px; left: calc(50% + 390px); top: 40px;   opacity: 0.26; }

	.lp-get-it {
		padding: 28px 24px 8px;
	}

	.cw-hero {
		max-width: 760px;
		margin: 0 auto;
		padding: 80px 24px 10px;
		text-align: center;
	}

	.cw-eyebrow {
		font-size: 13pt;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #1A1A1A;
		margin-bottom: 0.8em;
	}

	.cw-headline {
		font-size: 40pt;
		font-weight: 600;
		line-height: 1.15;
		margin-bottom: 0.5em;
	}

	.cw-summary {
		font-size: 16pt;
		font-weight: 400;
		line-height: 1.6;
		color: #000;
		margin-bottom: 1.6em;
	}

	.cw-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		margin: 1em 0;
	}

	.cw-buttons img {
		height: 48px;
		width: auto;
		display: block;
	}

	.cw-body {
		max-width: 680px;
		margin: 0 auto;
		padding: 0 24px 80px;
		font-size: 13pt;
		font-weight: 400; /* matches .feature-description on the homepage */
		line-height: 1.8;
	}

	.cw-body h2 {
		font-size: 24pt;
		font-weight: 600;
		line-height: 1.25;
		margin: 2.2em 0 0.6em;
		padding-top: 1.2em;
		border-top: 1px solid #e8e2d6;
	}

	.cw-body h3 {
		font-size: 15pt;
		font-weight: 600;
		line-height: 1.4;
		margin: 1.6em 0 0.3em;
	}

	.cw-body p {
		margin: 0 0 1em;
	}

	.cw-body a {
		color: #FF9A01;
	}

	.cw-body .cw-buttons {
		justify-content: flex-start;
		margin-top: 1.6em;
	}

	@media screen and (max-width: 600px) {
		.cw-hero {
			padding-top: 70px;
		}
		.cw-headline {
			font-size: 30pt;
		}
		.cw-summary {
			font-size: 14pt;
		}
		.lp-scene {
			height: 170px;
		}
		.lp-mountains {
			width: 260px;
		}
		.lp-sun {
			width: 54px;
			height: 54px;
			right: calc(50% + 136px);
			top: 10px;
		}
		.lp-cloud-far, .lp-cloud-near, .lp-icon {
			display: none;
		}
		.lp-cloud-left  { width: 150px; right: calc(50% + 135px); }
		.lp-cloud-right { width: 220px; left: calc(50% + 135px); }
		.lp-band {
			height: 80px;
		}
		.cw-body .cw-buttons {
			justify-content: center;
		}
	}