/*
Theme Name: Morgridge V3
Theme URI: https://allthingsseptic.com/
Author: IGG Marketing
Author URI: https://iggmarketing.com/
Description: Full site build for L.W. Morgridge & Son, Inc. The ten service pages are built from the approved Figma designs; the rest of the site is ported from v2 and restyled in the same system. Flat editorial layout, squared structural corners, real photography only. Separate from the v2 comparison build.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 3.7.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morgridge-v3
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANISED

   1.  Tokens            the colours, type sizes and spacing from the Figma
   2.  Base              resets and defaults
   3.  Layout            bands and the content wrapper
   4.  Type helpers      eyebrow, headings, measures
   5.  Buttons and links
   6.  Header            utility bar and nav
   7.  Hero
   8.  Section types     one block per archetype in the design
   9.  Form
   10. Emergency band and footer
   11. Responsive        everything above is the phone layout; these are the
                         larger screens, so a missing rule fails to mobile,
                         never to a broken phone.

   Every structural corner is square on purpose. Only buttons (10px) and the
   Google rating pill (999px) are rounded. Do not add radius to a section,
   photo, card or row: the flat editorial look is the whole point of the
   redesign and rounded card grids are what the client called "AI slop".
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
	--mg-teal-900: #062e38;
	--mg-teal-800: #0a4a57;
	--mg-teal-700: #0e6e82;
	--mg-teal-600: #12869e;
	--mg-teal-100: #d6e7eb;
	--mg-teal-50: #eef5f6;
	--mg-paper: #f7f9fa;
	--mg-sand-100: #ede4d3;
	--mg-sand-500: #d8c7a8;
	--mg-sand-600: #b9a47e;
	--mg-red-600: #d0362c;
	--mg-red-700: #b02a21;
	--mg-star: #e5a62f;
	/* The brand gold is 6.75:1 on teal-900 and correct on a dark ground, but
	   only 2.14:1 on white, which fails WCAG AA at any size. Wherever a star
	   or a gold figure is meaningful TEXT on a light ground, use this instead:
	   4.91:1 at worst, on teal-50, and the same hue family.
	   The live site's .mg-rail__num--gold still has the original bug. */
	--mg-star-text: #8f6100;
	/* Placeholder text on this build carries real instruction, so it meets the
	   same 4.5:1 bar as body copy. 4.68:1 on white. Not a light gray. */
	--mg-placeholder: #5f7880;
	--mg-text: #10262c;
	--mg-text-2: #4a6068;
	--mg-on-dark: #eaf2f4;
	--mg-on-dark-2: #bad2d8;
	--mg-border: #dce7ea;
	--mg-border-dark: #1b5c6b;
	--mg-white: #fff;

	--mg-display: Archivo, Helvetica, Arial, sans-serif;
	--mg-body: "Public Sans", Helvetica, Arial, sans-serif;

	/* The side gutter. 5vw lands on exactly 72px at the 1440px design width,
	   and never strands a 390px phone with 72px of padding a side. This single
	   token is the reason the v3 pages read correctly on a phone. */
	--mg-gutter: clamp(20px, 5vw, 72px);
	--mg-band-y: clamp(48px, 7vw, 88px);
	--mg-max: 1296px;
}

/* 2. BASE ================================================================== */

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

body {
	margin: 0;
	background: var(--mg-white);
	color: var(--mg-text);
	font-family: var(--mg-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
h4 {
	font-family: var(--mg-display);
	font-weight: 700;
	line-height: 1.12;
	margin: 0;
	letter-spacing: -0.01em;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--mg-teal-700);
}

:focus-visible {
	outline: 3px solid var(--mg-teal-600);
	outline-offset: 3px;
}

.mg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--mg-white);
	color: var(--mg-teal-700);
	padding: 12px 20px;
	font-weight: 600;
	z-index: 999;
}

.mg-skip:focus {
	left: 0;
}

.mg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 3. LAYOUT ================================================================ */

/* A band is one full-width horizontal stripe of the page. */
.mg-band {
	padding: var(--mg-band-y) var(--mg-gutter);
}

.mg-band--tight {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.mg-band--paper {
	background: var(--mg-paper);
}

.mg-band--teal50 {
	background: var(--mg-teal-50);
}

.mg-band--dark {
	background: var(--mg-teal-900);
	color: var(--mg-on-dark);
}

.mg-wrap {
	max-width: var(--mg-max);
	margin-inline: auto;
	width: 100%;
}

/* Two columns that become one on a phone. */
.mg-split {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* 4. TYPE ================================================================== */

.mg-eyebrow {
	font-family: var(--mg-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.123em;
	text-transform: uppercase;
	color: var(--mg-teal-700);
	margin: 0 0 14px;
}

.mg-band--dark .mg-eyebrow,
.mg-photoband .mg-eyebrow {
	color: var(--mg-sand-500);
}

.mg-h2 {
	font-size: clamp(28px, 4.2vw, 42px);
	color: var(--mg-text);
}

.mg-band--dark .mg-h2 {
	font-size: clamp(30px, 4.6vw, 46px);
	color: var(--mg-on-dark);
}

.mg-lede {
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.58;
	color: var(--mg-text-2);
}

.mg-body {
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-text-2);
}

.mg-band--dark .mg-lede,
.mg-band--dark .mg-body {
	color: var(--mg-on-dark-2);
}

.mg-measure {
	max-width: 700px;
}

.mg-stack > * + * {
	margin-top: 20px;
}

/* 5. BUTTONS =============================================================== */

.mg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 24px;
	border-radius: 10px;
	font-family: var(--mg-body);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mg-btn--primary {
	background: var(--mg-teal-700);
	color: var(--mg-white);
}

.mg-btn--primary:hover {
	background: var(--mg-teal-800);
	color: var(--mg-white);
}

.mg-btn--outline {
	border-color: var(--mg-teal-700);
	color: var(--mg-teal-700);
	background: transparent;
}

.mg-btn--outline:hover {
	background: var(--mg-teal-700);
	color: var(--mg-white);
}

/* On a dark or photographic background the primary button flips to white. */
.mg-btn--ondark {
	background: var(--mg-white);
	color: var(--mg-teal-700);
	font-size: 18px;
}

.mg-btn--ondark:hover {
	background: var(--mg-teal-50);
	color: var(--mg-teal-800);
}

.mg-btn--ghost {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--mg-white);
	background: transparent;
	font-size: 18px;
}

.mg-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--mg-white);
}

.mg-btn--red {
	background: var(--mg-red-600);
	color: var(--mg-white);
}

.mg-btn--red:hover {
	background: var(--mg-red-700);
	color: var(--mg-white);
}

.mg-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* The quiet text link that pairs with a call button. It is a standalone
   target, not a link inside a sentence, so it gets a full 44px tap height. */
.mg-textlink {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	font-size: 17px;
	color: var(--mg-teal-700);
	text-decoration: none;
}

.mg-textlink:hover {
	text-decoration: underline;
}

.mg-band--dark .mg-textlink {
	color: var(--mg-sand-500);
}

/* 6. HEADER ================================================================ */

/* Utility bar. Mike asked for this to be smaller and less intrusive than the
   old one, with 24/7 emergency still the loudest thing on it. */
.mg-util {
	background: var(--mg-teal-900);
	color: var(--mg-on-dark-2);
	font-size: 13px;
	padding: 7px var(--mg-gutter);
}

.mg-util__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
}

.mg-util__left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mg-util__tag {
	background: var(--mg-red-600);
	color: var(--mg-white);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	text-transform: uppercase;
}

.mg-util a {
	color: var(--mg-white);
	font-weight: 600;
	text-decoration: none;
}

.mg-util a:hover {
	text-decoration: underline;
}

.mg-util__right {
	color: var(--mg-on-dark-2);
}

/* Nav. The logo replaces the old text lockup (Mike, 00:00 and 17:15). */
.mg-nav {
	background: var(--mg-teal-900);
	border-top: 1px solid var(--mg-border-dark);
	padding: 12px var(--mg-gutter);
}

.mg-nav__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mg-nav__logo {
	display: inline-flex;
	align-items: center;
	/* Clear space around the mark so it never crowds the bar edges. */
	padding: 4px 0;
	flex-shrink: 0;
}

.mg-nav__logo img {
	/* The mark is a wide 2.5:1 wordmark. 118px on a phone keeps "& Son, Inc."
	   readable without crowding the menu button; 164px on desktop matches the
	   visual weight the Figma gave the old text lockup. */
	width: 118px;
	height: auto;
}

@media (min-width: 600px) {
	.mg-nav__logo img {
		width: 164px;
	}
}

.mg-nav__list {
	display: none;
	align-items: center;
	gap: 26px;
}

.mg-nav__list a {
	color: var(--mg-on-dark);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.mg-nav__list a:hover {
	color: var(--mg-white);
	text-decoration: underline;
}

.mg-nav__list a.is-emergency {
	color: #ff8a80;
}

/* The nav link colour rule above is more specific than .mg-btn--ondark, which
   would leave the Request Service button as white text on a white background.
   This puts the button's own colour back. */
.mg-nav__list a.mg-btn--ondark {
	color: var(--mg-teal-700);
}

.mg-nav__list a.mg-btn--ondark:hover {
	color: var(--mg-teal-800);
	text-decoration: none;
}

/* Dropdowns. Opened on hover and on keyboard focus, so tabbing through the nav
   reaches the items inside without needing script. */
.mg-drop {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.mg-drop__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 230px;
	background: var(--mg-teal-900);
	border: 1px solid var(--mg-border-dark);
	padding: 8px 0;
	z-index: 40;
}

.mg-drop:hover .mg-drop__menu,
.mg-drop:focus-within .mg-drop__menu {
	display: block;
}

.mg-drop__menu a {
	display: block;
	padding: 9px 18px;
	font-size: 16px;
	white-space: nowrap;
}

.mg-drop__menu a:hover {
	background: var(--mg-teal-800);
	text-decoration: none;
}

/* Hero chip row, used on the home page. */
.mg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.mg-chips li {
	font-size: 14px;
	font-weight: 600;
	color: var(--mg-on-dark);
	background: rgba(4, 34, 38, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.28);
	padding: 7px 13px;
}

.mg-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: var(--mg-white);
	font-family: var(--mg-body);
	font-size: 15px;
	font-weight: 600;
	padding: 10px 14px;
	min-height: 44px;
	cursor: pointer;
}

.mg-nav__drawer {
	display: none;
	padding: 12px 0 4px;
	border-top: 1px solid var(--mg-border-dark);
	margin-top: 12px;
}

.mg-nav__drawer.is-open {
	display: block;
}

.mg-nav__drawer a {
	display: block;
	color: var(--mg-on-dark);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	padding: 12px 0;
	border-bottom: 1px solid var(--mg-border-dark);
}

/* 7. HERO ================================================================== */

.mg-hero {
	position: relative;
	background: var(--mg-teal-900);
	padding: clamp(40px, 6vw, 72px) var(--mg-gutter);
	min-height: 380px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.mg-hero__media,
.mg-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mg-hero__media img {
	object-fit: cover;
}

.mg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(6, 46, 56, 0.94) 0%,
		rgba(6, 46, 56, 0.86) 30%,
		rgba(6, 46, 56, 0.55) 55%,
		rgba(6, 46, 56, 0.18) 100%
	);
}

.mg-hero__in {
	position: relative;
	z-index: 1;
	max-width: var(--mg-max);
	margin-inline: auto;
	width: 100%;
}

.mg-hero__content {
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.mg-breadcrumb {
	font-size: 15px;
	color: var(--mg-on-dark-2);
}

.mg-breadcrumb a {
	color: var(--mg-on-dark-2);
	text-decoration: none;
}

.mg-breadcrumb a:hover {
	text-decoration: underline;
}

.mg-hero h1 {
	font-size: clamp(30px, 5.2vw, 52px);
	line-height: 1.08;
	color: var(--mg-on-dark);
}

.mg-hero__sub {
	font-size: clamp(16px, 1.7vw, 19px);
	line-height: 1.5;
	color: var(--mg-on-dark-2);
	max-width: 620px;
}

/* Google rating pill. The one element in the design that keeps a full radius. */
.mg-google {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(4, 34, 38, 0.66);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;
	padding: 9px 18px 9px 14px;
	text-decoration: none;
	font-size: 15px;
}

.mg-google__g {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.mg-google__stars {
	color: var(--mg-star);
	letter-spacing: 1.5px;
	white-space: nowrap;
}

.mg-google__score {
	color: var(--mg-white);
	font-weight: 700;
}

.mg-google__label {
	color: var(--mg-on-dark);
}

/* 8. SECTION TYPES ========================================================= */

/* 8a. Intro with the fact rail ------------------------------------------- */
.mg-intro__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.mg-rail {
	border-left: 3px solid var(--mg-border);
	padding-left: 24px;
	display: flex;
	flex-direction: column;
}

.mg-rail__item {
	padding: 22px 0;
	border-bottom: 1px solid var(--mg-border);
}

.mg-rail__item:first-child {
	padding-top: 0;
}

.mg-rail__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mg-rail__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	color: var(--mg-teal-900);
	display: block;
	margin-bottom: 6px;
}

.mg-rail__num--gold {
	color: var(--mg-star-text);
}

.mg-rail__label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-text-2);
	max-width: 280px;
}

/* 8b. Checkmark lists ----------------------------------------------------- */
.mg-lists {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.mg-list__title {
	font-family: var(--mg-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.123em;
	text-transform: uppercase;
	color: var(--mg-teal-700);
	margin-bottom: 16px;
}

.mg-check li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 7px 0;
	font-size: 17px;
	color: var(--mg-text);
}

.mg-check li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	background: var(--mg-teal-700);
	/* A tick drawn as a mask so it scales cleanly and needs no icon file. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.6 9.4l4 4 8.8-9.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.6 9.4l4 4 8.8-9.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The "keep this off the system" column on Routine Maintenance. */
.mg-check--no li::before {
	background: var(--mg-red-600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4L4 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4L4 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 8c. Stat splits --------------------------------------------------------- */
.mg-stats {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mg-stat {
	/* Figma 19:148 - a fixed 190px block (number over unit) with the interval
	   beside it. Grid, not wrapping flex, so a long interval cannot drop to a
	   second line the way "Every 2.5 to 3 years" did. */
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 2px;
	align-items: baseline;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mg-border);
}
.mg-stat__num {
	grid-column: 1;
	grid-row: 1;
}
.mg-stat__unit {
	grid-column: 1;
	grid-row: 2;
}
.mg-stat__note {
	grid-column: 2;
	grid-row: 1;
}

.mg-stat:last-child {
	border-bottom: 0;
}

/* Big numerals are solid teal at 0.85, never a washed-out tint. */
.mg-stat__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(40px, 5vw, 56px);
	line-height: 1;
	color: var(--mg-teal-700);
	opacity: 0.85;
}

.mg-stat__unit {
	font-size: 17px;
	color: var(--mg-text-2);
}

.mg-stat__note {
	font-family: var(--mg-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--mg-text);
}

/* 8d. Numbered rows ------------------------------------------------------- */
.mg-rows {
	display: flex;
	flex-direction: column;
}

.mg-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 24px 0;
	border-top: 1px solid var(--mg-border);
}

.mg-row:last-child {
	border-bottom: 1px solid var(--mg-border);
}

.mg-row__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	color: var(--mg-teal-700);
	opacity: 0.85;
	flex-shrink: 0;
	min-width: 44px;
}

.mg-row__title {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--mg-text);
	margin-bottom: 4px;
}

.mg-row__text {
	font-size: 17px;
	line-height: 1.55;
	color: var(--mg-text-2);
	max-width: 1008px;
}

.mg-band--dark .mg-row {
	border-color: var(--mg-border-dark);
}

.mg-band--dark .mg-row__title {
	color: var(--mg-on-dark);
}

.mg-band--dark .mg-row__text {
	color: var(--mg-on-dark-2);
}

.mg-band--dark .mg-row__num {
	color: var(--mg-sand-500);
	opacity: 0.9;
}

/* 8e. Process steps beside photos ---------------------------------------- */
.mg-process {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.mg-photogrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.mg-photogrid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.mg-photogrid--single img {
	aspect-ratio: 16 / 10;
}

.mg-photogrid--single {
	grid-template-columns: 1fr;
}

.mg-photocap {
	grid-column: 1 / -1;
	font-size: 14.5px;
	color: var(--mg-text-2);
	padding-top: 6px;
}

/* The three-across strip, zero gutters, edge to edge. */
.mg-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.mg-strip img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 8f. Full-bleed photo band ---------------------------------------------- */
.mg-photoband {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	padding: 0 var(--mg-gutter) clamp(28px, 4vw, 48px);
	background: var(--mg-teal-900);
	overflow: hidden;
}

.mg-photoband__media,
.mg-photoband__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mg-photoband__media img {
	object-fit: cover;
}

.mg-photoband::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 46, 56, 0) 0%, rgba(6, 46, 56, 0.82) 100%);
}

.mg-photoband__in {
	position: relative;
	z-index: 1;
	max-width: var(--mg-max);
	margin-inline: auto;
	width: 100%;
}

.mg-photoband h2 {
	font-size: clamp(30px, 5.5vw, 58px);
	line-height: 1.05;
	color: var(--mg-white);
	margin-bottom: 8px;
}

.mg-photoband__sub {
	font-size: clamp(15px, 1.5vw, 16.5px);
	line-height: 1.5;
	color: var(--mg-on-dark-2);
	max-width: 720px;
}

/* 8g. Sand ribbons: guarantee and closing CTA ----------------------------- */
.mg-ribbon {
	background: var(--mg-sand-100);
	border-top: 3px solid var(--mg-teal-700);
	border-bottom: 3px solid var(--mg-teal-700);
	padding: clamp(32px, 4vw, 48px) var(--mg-gutter);
}

.mg-ribbon__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-ribbon h2 {
	font-size: clamp(24px, 3.4vw, 36px);
	color: var(--mg-text);
}

.mg-ribbon__body {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mg-text);
	max-width: 620px;
}

.mg-cta {
	background: var(--mg-sand-100);
	border-top: 3px solid var(--mg-teal-700);
	border-bottom: 3px solid var(--mg-teal-700);
	padding: clamp(28px, 3.2vw, 36px) var(--mg-gutter);
}

.mg-cta__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.mg-cta__line {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.2;
	color: var(--mg-text);
}

/* 8h. Dark why-us with the watermark numeral ------------------------------ */
.mg-why {
	position: relative;
	overflow: hidden;
}

.mg-why__in {
	position: relative;
	z-index: 1;
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.mg-why__mark {
	position: absolute;
	right: -0.06em;
	bottom: -0.28em;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(120px, 16vw, 220px);
	line-height: 1;
	color: var(--mg-sand-500);
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 0;
}

.mg-proofrows {
	display: flex;
	flex-direction: column;
	max-width: 560px;
}

.mg-proofrow {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px 0;
	border-bottom: 1px solid var(--mg-border-dark);
}

.mg-proofrow:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mg-proofrow:first-child {
	padding-top: 0;
}

/* A drawn rule, not a dash character, so the copy stays free of em dashes. */
.mg-proofrow__mark {
	flex-shrink: 0;
	width: 20px;
	height: 2px;
	background: var(--mg-sand-500);
	margin-top: 12px;
}

.mg-proofrow p {
	font-size: 17px;
	line-height: 1.58;
	color: var(--mg-on-dark);
}

/* 8i. Reviews ------------------------------------------------------------- */
.mg-reviews__grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 36px;
}

.mg-quote {
	background: var(--mg-white);
	border-left: 4px solid var(--mg-teal-700);
	padding: clamp(22px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mg-stars {
	color: var(--mg-star);
	font-size: 17px;
	letter-spacing: 1.36px;
	line-height: 1;
}

.mg-quote__text {
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.58;
	font-style: italic;
	color: var(--mg-text);
}

.mg-quote__who {
	font-size: 15px;
	font-weight: 600;
	color: var(--mg-text-2);
}

.mg-reviews__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mg-minireview {
	border-bottom: 1.5px dashed var(--mg-border);
	padding-bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mg-minireview .mg-stars {
	font-size: 15px;
	letter-spacing: 1.2px;
}

.mg-minireview p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mg-text-2);
}

/* 8j. FAQ ----------------------------------------------------------------- */
.mg-faq__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 32px;
}

.mg-faq__list {
	flex: 1;
	max-width: 740px;
}

.mg-faq__item {
	border-bottom: 1px solid var(--mg-border);
}

.mg-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: 0;
	padding: 20px 0;
	min-height: 44px;
	text-align: left;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	color: var(--mg-text);
	cursor: pointer;
}

.mg-faq__sign {
	font-family: var(--mg-body);
	font-weight: 400;
	font-size: 22px;
	color: var(--mg-teal-700);
	line-height: 1;
	flex-shrink: 0;
}

.mg-faq__a {
	display: none;
	padding: 0 0 22px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-text-2);
	max-width: 660px;
}

.mg-faq__item.is-open .mg-faq__a {
	display: block;
}

.mg-faq__note {
	font-size: 15px;
	color: var(--mg-text-2);
	padding-top: 20px;
}

/* The dark "rather just call" card that sits beside the questions. */
.mg-callcard {
	background: var(--mg-teal-900);
	color: var(--mg-on-dark);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: flex-start;
	max-width: 444px;
}

.mg-callcard h3 {
	font-size: 22px;
	color: var(--mg-on-dark);
}

.mg-callcard p {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--mg-on-dark-2);
}

.mg-callcard__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 28px;
	color: var(--mg-white);
	text-decoration: none;
	display: inline-block;
}

.mg-callcard__num:hover {
	text-decoration: underline;
}

/* 8k. Add-on / related cards --------------------------------------------- */
.mg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 32px;
}

.mg-cardcol {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 3px solid var(--mg-teal-700);
	padding-top: 20px;
}

.mg-cardcol img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.mg-cardcol h3 {
	font-size: 22px;
	color: var(--mg-text);
}

.mg-cardcol p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--mg-text-2);
}
/* Only one of the five cards carries a note, so nothing else grew and the
   "Learn more" links landed at five different heights. Pin them instead. */
.mg-cardcol .mg-textlink {
	margin-top: auto;
	padding-top: 4px;
}

/* Tile grid used where a page needs a 4 or 5 item block (Jeff, ruling Q10). */
.mg-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 28px;
	border-top: 1px solid var(--mg-border);
}

.mg-tile {
	padding: 22px 0;
	border-bottom: 1px solid var(--mg-border);
}

.mg-tile h3 {
	font-size: 19px;
	margin-bottom: 6px;
}

.mg-tile p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--mg-text-2);
}

/* 8l. Two-photo labelled band (Pool page) -------------------------------- */
.mg-twoup {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 28px;
}

.mg-twoup figure {
	margin: 0;
}

.mg-twoup img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.mg-twoup figcaption {
	padding-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-on-dark-2);
	border-top: 1px solid var(--mg-border-dark);
	margin-top: 12px;
}

.mg-twoup strong {
	color: var(--mg-on-dark);
	display: block;
	font-family: var(--mg-display);
	font-size: 18px;
	margin-bottom: 4px;
}

/* 8m. Home and site-page pieces ------------------------------------------ */

/* Five service blocks across, per Jeff's ruling Q6. */
.mg-cards--five {
	gap: 20px;
}

.mg-check--tight li {
	padding: 4px 0;
	font-size: 15.5px;
}

.mg-check--tight li::before {
	width: 15px;
	height: 15px;
	margin-top: 4px;
}

/* The big rating line. Mike, 04:43: make the 4.9 bigger and keep it to a line. */
.mg-ratingline {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0 28px;
}

.mg-ratingline__score {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(44px, 6vw, 64px);
	line-height: 1;
	color: var(--mg-star);
}

.mg-ratingline__label {
	display: block;
	font-size: 16px;
	color: var(--mg-text-2);
	margin-top: 2px;
}

/* Review carousel. Three across on a wide screen, swipeable on a phone. */
.mg-carousel {
	position: relative;
}

.mg-carousel__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.mg-carousel__track > * {
	flex: 0 0 min(100%, 380px);
	scroll-snap-align: start;
}
/* `.mg-quote` picks up `flex: 1 1 712px` in the 1024 block. Equal specificity,
   declared later, so it beat the rule above and squeezed the cards. Restate it
   here at a higher specificity. */
.mg-carousel__track > .mg-quote {
	flex: 0 0 min(100%, 380px);
}

.mg-quote--card {
	border-left: 0;
	border-top: 3px solid var(--mg-teal-700);
	padding: 26px;
	gap: 14px;
}

.mg-quote--card .mg-quote__text {
	font-size: 16.5px;
	font-style: normal;
	color: var(--mg-text-2);
}

.mg-carousel__btns {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.mg-carousel__btn {
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--mg-teal-700);
	background: transparent;
	color: var(--mg-teal-700);
	font-size: 18px;
	cursor: pointer;
}

.mg-carousel__btn:hover {
	background: var(--mg-teal-700);
	color: var(--mg-white);
}

/* Crew photo row. Mike, 05:24: real people on the job, four different faces. */
.mg-crew {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 28px;
}

.mg-crew img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.mg-yard h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.mg-yard .mg-body + .mg-body {
	margin-top: 8px;
}

/* FAQ groups with an alternating photo, so the page is not one long column
   with dead space beside it (Mike, 10:35). */
.mg-faqgroup {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mg-faqgroup__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mg-faqgroup__body {
	flex: 1;
}

/* Long-form prose: articles and the legal pages. */
.mg-prose {
	max-width: 720px;
	margin-top: 24px;
}

.mg-prose > * + * {
	margin-top: 20px;
}

.mg-prose p {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--mg-text-2);
}

.mg-prose h2 {
	font-size: clamp(22px, 2.8vw, 28px);
	color: var(--mg-text);
	margin-top: 40px;
}

.mg-prose ul {
	margin-top: 16px;
}

/* 9. FORM ================================================================== */

.mg-form__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-top: 28px;
}

.mg-form__main {
	flex: 1;
	max-width: 680px;
}

.mg-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.mg-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mg-field > label {
	font-size: 14px;
	font-weight: 600;
	color: var(--mg-text);
}

.mg-field input[type="text"],
.mg-field input[type="tel"],
.mg-field input[type="email"],
.mg-field input[type="date"],
.mg-field input[type="number"],
.mg-field select,
.mg-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--mg-border);
	border-radius: 0;
	background: var(--mg-white);
	font-family: var(--mg-body);
	font-size: 16px;
	color: var(--mg-text);
}

.mg-field textarea {
	min-height: 96px;
	resize: vertical;
}

.mg-field input:focus,
.mg-field select:focus,
.mg-field textarea:focus {
	border-color: var(--mg-teal-700);
	outline: 2px solid var(--mg-teal-600);
	outline-offset: 1px;
}

/* An inline row keeps its label beside the control, so the block rule above
   must not apply to it. */
/* The whole row is the tap target: the label is tied to the box with `for`,
   so a tap anywhere along the line toggles it. */
.mg-checkrow {
	display: flex;
	/* `.mg-field` sets flex-direction: column and this never overrode it, so the
	   box stacked above its label and `align-items: center` centred them both. */
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.mg-checkrow input {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.mg-checkrow label {
	font-size: 15px;
	color: var(--mg-text-2);
	font-weight: 400;
}

/* Honeypot. Spam control without a nonce, because a cached page serves a
   stale nonce and silently kills the form. */
.mg-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mg-note {
	font-size: 15px;
	line-height: 1.55;
	color: var(--mg-text-2);
}

/* Status message. Uses the same top-rule language as the other blocks in the
   system rather than a side tab. */
.mg-formmsg {
	padding: 16px 18px;
	border-top: 3px solid var(--mg-teal-700);
	background: var(--mg-teal-50);
	font-size: 16px;
	margin-bottom: 20px;
}

.mg-formmsg--bad {
	border-top-color: var(--mg-red-600);
	background: #fdeceb;
}

/* Pool volume estimator --------------------------------------------------- */
.mg-calc {
	background: var(--mg-teal-50);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-calc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.mg-calc__out {
	border-top: 3px solid var(--mg-teal-700);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mg-calc__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 52px);
	line-height: 1;
	color: var(--mg-teal-700);
	opacity: 0.9;
}

/* 10. EMERGENCY BAND AND FOOTER ============================================ */

.mg-emergency {
	background: var(--mg-red-600);
	color: var(--mg-white);
	padding: 26px var(--mg-gutter);
}

.mg-emergency__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.mg-emergency h2 {
	font-size: clamp(21px, 2.6vw, 26px);
	color: var(--mg-white);
}

.mg-emergency p {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	max-width: 720px;
}

.mg-emergency .mg-btn {
	background: var(--mg-white);
	color: var(--mg-red-700);
	font-size: 18px;
}

.mg-footer {
	background: var(--mg-teal-900);
	color: var(--mg-on-dark-2);
	padding: clamp(40px, 5vw, 64px) var(--mg-gutter) 28px;
}

.mg-footer__in {
	max-width: var(--mg-max);
	margin-inline: auto;
}

.mg-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

.mg-footer__logo img {
	width: 190px;
	height: auto;
	margin-bottom: 16px;
}

.mg-footer__slogan {
	font-family: var(--mg-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--mg-sand-500);
	margin-bottom: 12px;
}

.mg-footer p {
	font-size: 15px;
	line-height: 1.6;
}

.mg-footer h2 {
	font-family: var(--mg-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.123em;
	text-transform: uppercase;
	color: var(--mg-sand-500);
	margin-bottom: 14px;
}

.mg-footer a {
	color: var(--mg-on-dark);
	text-decoration: none;
	font-size: 15px;
}

.mg-footer a:hover {
	text-decoration: underline;
}

/* Footer links are standalone navigation targets, so each one clears 44px
   without needing a taller footer than the design calls for. */
.mg-footer li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.mg-footer li {
	padding: 0;
}

.mg-footer__yard {
	margin-bottom: 16px;
}

.mg-footer__yard strong {
	color: var(--mg-on-dark);
	display: block;
	margin-bottom: 2px;
}

.mg-footer__legal {
	border-top: 1px solid var(--mg-border-dark);
	margin-top: 36px;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.6;
}

/* 11. RESPONSIVE =========================================================== */

/* Tablet and up. */
@media (min-width: 760px) {
	.mg-split {
		flex-direction: row;
		gap: 48px;
	}

	.mg-lists {
		flex-direction: row;
		gap: 56px;
	}

	.mg-lists > * {
		flex: 1;
	}

	.mg-stat {
		column-gap: 20px;
	}

	.mg-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.mg-tiles {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40px;
	}

	.mg-twoup {
		grid-template-columns: repeat(2, 1fr);
	}

	.mg-strip {
		grid-template-columns: repeat(3, 1fr);
	}

	.mg-calc__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mg-fields {
		grid-template-columns: repeat(2, 1fr);
	}

	.mg-field--full {
		grid-column: 1 / -1;
	}

	.mg-emergency__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.mg-cta__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.mg-ribbon__in {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.mg-footer__cols {
		grid-template-columns: 1.6fr 1fr 1.3fr 1fr;
		gap: 40px;
	}

	.mg-footer__legal {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

/* The footer email is an unbroken string and the narrow 760px column clipped it. */
.mg-footer a {
	overflow-wrap: anywhere;
}

/* Jeff 2026-08-27: three images sat too high in their frame, hiding the part
   that carries the subject. Pull the crop down the image. */
.mg-hero--low .mg-hero__media img,
.mg-photoband--low .mg-photoband__media img {
	object-position: center 78%;
}

/* Jeff 2026-08-27: the pool estimator ran two thirds copy to one third
   calculator. Even halves. */
.mg-calc .mg-split > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Desktop: the 1440 comp. */
@media (min-width: 1024px) {
	.mg-hero {
		min-height: 470px;
	}

	.mg-intro__grid {
		flex-direction: row;
		gap: 88px;
		align-items: flex-start;
	}

	.mg-intro__main {
		flex: 1 1 700px;
	}

	.mg-rail {
		flex: 0 0 312px;
		padding-left: 32px;
	}

	.mg-rail__item {
		padding: 26px 0;
	}

	.mg-process {
		flex-direction: row;
		gap: 64px;
		align-items: flex-start;
	}

	.mg-process__steps {
		flex: 1 1 635px;
	}

	.mg-process__photos {
		flex: 0 0 494px;
	}

	.mg-photoband {
		min-height: 440px;
	}

	.mg-why__in {
		flex-direction: row;
		gap: 88px;
		align-items: flex-start;
		justify-content: space-between;
	}

	.mg-why__lead {
		flex: 0 0 560px;
	}

	.mg-reviews__grid {
		flex-direction: row;
		align-items: flex-start;
	}

	.mg-quote {
		flex: 1 1 712px;
	}

	.mg-reviews__side {
		flex: 0 0 400px;
	}

	.mg-faq__grid {
		flex-direction: row;
		gap: 64px;
		align-items: flex-start;
	}

	.mg-callcard {
		flex: 0 0 444px;
	}

	.mg-form__grid {
		flex-direction: row;
		gap: 64px;
		align-items: flex-start;
	}

	.mg-form__side {
		flex: 0 0 384px;
	}

	.mg-stats {
		flex-direction: row;
		gap: 48px;
	}

	.mg-stats--rows {
		flex-direction: column;
		gap: 0;
	}

	.mg-stats--rows .mg-stat {
		padding: 20px 0;
	}

	.mg-statsplit {
		display: flex;
		gap: 64px;
		align-items: flex-start;
	}

	.mg-statsplit__left {
		flex: 0 0 433px;
	}

	.mg-statsplit__right {
		flex: 1 1 560px;
	}

	.mg-tiles {
		column-gap: 64px;
	}

	.mg-cards--five {
		grid-template-columns: repeat(5, 1fr);
	}

	.mg-crew {
		grid-template-columns: repeat(4, 1fr);
	}

	.mg-faqgroup {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.mg-faqgroup--flip {
		flex-direction: row-reverse;
	}

	.mg-faqgroup__media {
		flex: 0 0 360px;
		position: sticky;
		top: 24px;
	}
}

/* Anyone who prefers less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Print: drop the photography and the dark grounds. */
@media print {
	.mg-hero__media,
	.mg-photoband__media,
	.mg-nav,
	.mg-util {
		display: none;
	}

	.mg-band--dark,
	.mg-footer,
	.mg-emergency {
		background: #fff !important;
		color: #000 !important;
	}
}

/* The full nav needs more than 1024px: logo + seven items + the CTA button
   were cramped and could wrap between 1024 and about 1180. */
@media (min-width: 1180px) {
	.mg-nav__list {
		display: flex;
	}

	.mg-nav__toggle {
		display: none;
	}

	.mg-nav__drawer {
		display: none !important;
	}
}

/* Service area: text left, coverage map right, matching v2. */
.mg-areasplit {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mg-areasplit__map img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1024px) {
	.mg-areasplit {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.mg-areasplit__text {
		flex: 1 1 620px;
	}

	.mg-areasplit__map {
		flex: 0 0 560px;
	}
}

/* 12. LANDING PAGE / SEPTIC PUMPING =========================================

   Scoped to .mg-lp so nothing here can reach the ten service pages. Written
   mobile first like the rest of this file: a missing rule fails to the phone
   layout, never to a broken phone.

   Design: Figma iJuCrVtJkWfo216ZTbkRHT, Rev 2 of 2026-08-31.
   ========================================================================== */

/* The header is a logo and a phone number. No navigation, by design. */
.mg-lp-head {
	background: var(--mg-white);
	border-bottom: 1px solid var(--mg-border);
	padding: 16px var(--mg-gutter);
}

.mg-lp-head__in {
	max-width: var(--mg-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mg-lp-head__logo img {
	width: 168px;
	height: auto;
}

.mg-lp-head__right {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.mg-lp-head__callfull {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.mg-lp-head__hours {
	display: none;
	margin: 0;
	font-size: 15px;
	color: var(--mg-text-2);
}

/* HERO --------------------------------------------------------------------- */

.mg-lp-hero {
	position: relative;
	background: var(--mg-teal-900);
	padding: 48px var(--mg-gutter) 0;
	overflow: hidden;
}

.mg-lp-hero__media,
.mg-lp-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mg-lp-hero__media img {
	object-fit: cover;
}

/* On a phone the copy sits over the middle of the photo, so the scrim runs
   top to bottom. The 90deg version only makes sense once there is a form
   card holding the right hand side. */
.mg-lp-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 46, 56, 0.92) 0%, rgba(6, 46, 56, 0.88) 60%, rgba(6, 46, 56, 0.8) 100%);
}

.mg-lp-hero__in {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mg-lp-hero__cols {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.mg-lp-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.mg-lp-hero__h1 {
	margin: 0;
	max-width: 770px;
	font-size: clamp(32px, 6.2vw, 58px);
	line-height: 1.05;
	color: var(--mg-on-dark);
	text-wrap: balance;
}

.mg-lp-hero__sub {
	margin: 0;
	max-width: 620px;
	font-size: clamp(17px, 1.9vw, 19px);
	line-height: 1.58;
	color: var(--mg-on-dark-2);
	text-wrap: pretty;
}

/* The phone gets sentence one only. Deliberate, see copy.md. */
.mg-lp-hero__sub--wide {
	display: none;
}

/* The Google rating pill. Stars use --mg-star-text, not --mg-star: this pill
   is white, and #e5a62f on white is 2.14:1 and fails AA. */
.mg-lp-pill {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 13px 22px 13px 20px;
	background: var(--mg-white);
	border-radius: 999px;
	line-height: 1.2;
	white-space: nowrap;
}

.mg-lp-pill__stars {
	font-size: 22px;
	color: var(--mg-star-text);
}

.mg-lp-pill__num {
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 27px;
	color: var(--mg-text);
}

/* The phone pill is stars and the figure only. "on Google" returns as soon as
   there is room for it, which is what the comps show. */
.mg-lp-pill__src {
	display: none;
	font-size: 17px;
	color: var(--mg-text-2);
}

/* Phone only. On a phone the form card is a long way below the fold, so the
   hero carries a jump to it instead. Hidden once the card sits beside the
   copy. Its label says "Get on the schedule", not "Request a pump-out",
   because it scrolls rather than submits. */
.mg-lp-hero__jump {
	width: 100%;
}

.mg-lp-yards {
	width: 100%;
	margin-top: 16px;
	padding-top: 18px;
	border-top: 1px solid var(--mg-border-dark);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-lp-yard__label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.123em;
	color: var(--mg-sand-500);
}

.mg-lp-yard__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mg-on-dark-2);
}

/* TICK RAIL ---------------------------------------------------------------
   The page's signature motif: a ruler. Every fourth tick is full height.
   Decorative, and hidden from assistive technology in the markup. */

.mg-tickrail {
	width: 100%;
	padding-bottom: 8px;
}

.mg-tickrail__line {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--mg-border-dark);
}

.mg-tickrail__ticks {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: 14px;
}

.mg-tick {
	display: block;
	width: 1px;
	height: 6px;
	background: var(--mg-border-dark);
}

.mg-tick--major {
	height: 14px;
}

.mg-tickrail--light .mg-tickrail__line,
.mg-tickrail--light .mg-tick {
	background: var(--mg-border);
}

/* FORM CARD ---------------------------------------------------------------
   Rendered twice from one function, hero and final CTA. */

.mg-lp-form {
	background: var(--mg-white);
	border: 1px solid var(--mg-border);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	scroll-margin-top: 24px;
}

.mg-lp-form__badge {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.123em;
	color: var(--mg-teal-700);
}

.mg-lp-form__h {
	margin: 0;
	font-size: 27px;
	line-height: 1.15;
	color: var(--mg-text);
	text-wrap: balance;
}

.mg-lp-form__intro {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-text-2);
}

/* Error is never signalled by colour alone: it always carries words. */
.mg-lp-form__err {
	margin: 0;
	padding: 12px 14px;
	border-left: 4px solid var(--mg-red-600);
	background: #fdf2f1;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-red-700);
}

.mg-lp-form__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.mg-lp-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.mg-lp-field label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mg-text);
}

.mg-lp-field input,
.mg-lp-field textarea {
	width: 100%;
	background: var(--mg-white);
	border: 1px solid var(--mg-border);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--mg-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--mg-text);
}

.mg-lp-field input {
	height: 48px;
}

.mg-lp-field textarea {
	min-height: 88px;
	resize: vertical;
}

/* The placeholder carries real instruction here, so it meets the same 4.5:1
   bar as body text. #5f7880 is 4.68:1 on white. Not a light gray. */
.mg-lp-field input::placeholder,
.mg-lp-field textarea::placeholder {
	color: var(--mg-placeholder);
	opacity: 1;
}

.mg-lp-field input:focus-visible,
.mg-lp-field textarea:focus-visible {
	outline: 2px solid var(--mg-teal-700);
	outline-offset: 1px;
	border-color: var(--mg-teal-700);
}

.mg-lp-form__submit {
	width: 100%;
}

.mg-lp-form__micro {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--mg-text-2);
}

.mg-lp-form__rule {
	height: 1px;
	width: 100%;
	margin: 0;
	border: 0;
	background: var(--mg-border);
}

.mg-lp-form__scope {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mg-text-2);
}

/* PROOF BAR ---------------------------------------------------------------- */

.mg-lp-proof__row {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* On a phone each fact is a row: figure left, label right, hairline between.
   The three-across arrangement only appears once there is width for it. */
.mg-lp-fact {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
	border-top: 1px solid var(--mg-border);
}

.mg-lp-fact:last-child {
	border-bottom: 1px solid var(--mg-border);
}

.mg-lp-fact__fig {
	flex: 0 0 auto;
	min-width: 118px;
	margin: 0;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(32px, 4.4vw, 40px);
	line-height: 1.1;
	color: var(--mg-text);
}

/* Only the rating figure is gold, and on white it must be the accessible
   gold: the brand --mg-star is 2.14:1 here. */
.mg-lp-fact__fig--gold {
	color: var(--mg-star-text);
}

.mg-lp-fact__lab {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-text-2);
}

/* The 4px teal edge is an approved design rule for a pull quote here, and one
   of only two side borders the impeccable pass allows through. */
.mg-lp-early {
	margin: 40px 0 0;
	padding-left: 24px;
	border-left: 4px solid var(--mg-teal-700);
}

.mg-lp-early__q {
	margin: 0 0 12px;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.5;
	color: var(--mg-text);
	text-wrap: pretty;
}

.mg-lp-early__who {
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--mg-text-2);
}

/* INTERVAL TABLE ----------------------------------------------------------
   The page's central exhibit and its urgency mechanism. */

.mg-lp-int__barrier {
	margin: 16px 0 0;
	max-width: 660px;
	font-size: 17px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--mg-text);
}

.mg-lp-int__table {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 32px;
}

.mg-lp-int__cell {
	padding: 24px 0;
	border-top: 1px solid var(--mg-border);
}

.mg-lp-int__cell:last-child {
	border-bottom: 1px solid var(--mg-border);
}

.mg-lp-int__size {
	margin: 0;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 56px);
	line-height: 1.05;
	color: var(--mg-teal-800);
}

.mg-lp-int__unit {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--mg-text-2);
}

.mg-lp-int__rule {
	display: none;
	margin: 16px 0 10px;
	border: 0;
	height: 1px;
	background: var(--mg-border);
}

.mg-lp-int__every {
	margin: 10px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mg-text);
}

.mg-lp-int .mg-tickrail {
	display: none;
	margin-top: 24px;
}

.mg-lp-int__note {
	margin: 24px 0 0;
	max-width: 997px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-text-2);
	text-wrap: pretty;
}

/* CTA BANDS ---------------------------------------------------------------- */

.mg-lp-cta__in {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.mg-lp-cta__in--inline {
	margin-top: 48px;
}

.mg-lp-cta__h {
	margin: 0;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(22px, 2.8vw, 28px);
	line-height: 1.25;
	color: var(--mg-on-dark);
	text-wrap: balance;
}

.mg-lp-cta__h--dark {
	color: var(--mg-text);
}

.mg-lp-cta__sub {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--mg-on-dark-2);
}

.mg-lp-jump {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.mg-lp-jump__sub {
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-on-dark-2);
}

.mg-lp-cta__in--inline .mg-lp-jump__sub,
.mg-lp-get .mg-lp-jump__sub {
	color: var(--mg-text-2);
}

.mg-band--dark .mg-lp-jump__sub {
	color: var(--mg-on-dark-2);
}

/* A bare <a> inherits the site link colour, teal-700, which is 2.45:1 on
   teal-900 and fails AA. Any link that can land on a dark band has to restate
   its colour. This is the same failure mode that once put the white nav button
   on a white background: the generic rule quietly outranks the context. */
.mg-band--dark .mg-lp-jump__sub a,
.mg-band--dark .mg-lp-thanks__sub a,
.mg-band--dark .mg-lp-final__sub a {
	color: var(--mg-on-dark);
	text-decoration-color: rgba(234, 242, 244, 0.55);
}

/* FULL BLEED PHOTO BAND ---------------------------------------------------- */

.mg-lp-band img {
	width: 100%;
	height: clamp(220px, 30vw, 440px);
	object-fit: cover;
}

/* WHAT YOU GET ------------------------------------------------------------- */

.mg-lp-get__list {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 40px;
}

.mg-lp-get__item {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-lp-get__photo img {
	width: 100%;
	aspect-ratio: 560 / 360;
	object-fit: cover;
}

.mg-lp-get__h {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
	color: var(--mg-text);
	text-wrap: balance;
}

.mg-lp-get__b {
	margin: 0;
	max-width: 672px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-text-2);
	text-wrap: pretty;
}

/* STEPS -------------------------------------------------------------------- */

.mg-lp-steps__row {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

.mg-lp-step__n {
	margin: 0 0 12px;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(36px, 4.4vw, 44px);
	line-height: 1;
	color: var(--mg-sand-500);
}

.mg-lp-step__h {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.25;
	color: var(--mg-on-dark);
	text-wrap: balance;
}

.mg-lp-step__b {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mg-on-dark-2);
	text-wrap: pretty;
}

/* The thanks page repeats the steps on a light ground. */
.mg-lp-steps--light .mg-lp-step__n {
	color: var(--mg-sand-600);
}

.mg-lp-steps--light .mg-lp-step__h {
	color: var(--mg-text);
}

.mg-lp-steps--light .mg-lp-step__b {
	color: var(--mg-text-2);
}

/* EARLY ANSWERS, PHONE ONLY ------------------------------------------------ */

.mg-lp-early-faq {
	background: var(--mg-teal-50);
	display: block;
}

.mg-lp-early-faq__item + .mg-lp-early-faq__item {
	margin-top: 24px;
}

/* REVIEWS ------------------------------------------------------------------ */

.mg-lp-rev__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--mg-text);
}

.mg-lp-rev__stars {
	font-size: 20px;
	color: var(--mg-star-text);
}

.mg-lp-rev__rating--ondark {
	color: var(--mg-on-dark);
}

/* On teal-900 the brand gold is 6.75:1 and is the correct colour. */
.mg-lp-rev__stars--ondark {
	color: var(--mg-star);
}

.mg-lp-rev__crew {
	margin: 32px 0 0;
}

.mg-lp-rev__crew img {
	width: 100%;
	aspect-ratio: 1296 / 430;
	object-fit: cover;
}

.mg-lp-rev__cap {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-text-2);
}

.mg-lp-rev__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 48px;
}

.mg-lp-quote {
	margin: 0;
	padding-left: 24px;
	border-left: 4px solid var(--mg-teal-700);
}

.mg-lp-quote__q {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mg-text);
	text-wrap: pretty;
}

.mg-lp-quote__who {
	font-style: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--mg-text-2);
}

/* FAQ ---------------------------------------------------------------------- */

.mg-lp-faq__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

.mg-lp-faq__q {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.3;
	color: var(--mg-text);
	text-wrap: balance;
}

/* Answers are held to a readable measure, not the full 1296px container. */
.mg-lp-faq__a {
	margin: 0;
	max-width: 660px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--mg-text-2);
	text-wrap: pretty;
}

/* EMERGENCY RIBBON --------------------------------------------------------- */

.mg-lp-ribbon {
	background: var(--mg-sand-100);
	padding: 28px var(--mg-gutter);
}

.mg-lp-ribbon__in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.mg-lp-ribbon__t {
	margin: 0;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.3;
	color: var(--mg-text);
	text-wrap: balance;
}

/* FINAL CTA ---------------------------------------------------------------- */

.mg-lp-final__in {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mg-lp-final__sub {
	margin: 20px 0 0;
	max-width: 560px;
	font-size: clamp(17px, 1.9vw, 19px);
	line-height: 1.58;
	color: var(--mg-on-dark-2);
	text-wrap: pretty;
}

.mg-lp-final__proof {
	margin-top: 32px;
}

.mg-lp-final__rule {
	margin: 0 0 20px;
	border: 0;
	height: 1px;
	background: var(--mg-border-dark);
}

.mg-lp-final__facts {
	margin: 16px 0 0;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mg-on-dark-2);
}

.mg-lp-final__fig {
	margin: 32px 0 0;
}

.mg-lp-final__fig img {
	width: 100%;
	max-width: 470px;
	aspect-ratio: 470 / 588;
	object-fit: cover;
}

.mg-lp-final__cap {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mg-on-dark-2);
}

/* THANKS PAGE -------------------------------------------------------------- */

.mg-lp-thanks__h {
	margin: 0;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.1;
	color: var(--mg-on-dark);
	text-wrap: balance;
}

.mg-lp-thanks__sub {
	margin: 20px 0 0;
	max-width: 660px;
	font-size: clamp(17px, 1.9vw, 19px);
	line-height: 1.58;
	color: var(--mg-on-dark-2);
}

/* FOOTER ------------------------------------------------------------------
   White, and that is a hard requirement rather than a stylistic one: the
   Morgridge mark is gold with a black outline, so on teal-900 roughly half
   the logo disappears. See copy.md 10b. */

.mg-lp-foot {
	background: var(--mg-white);
	border-top: 1px solid var(--mg-border);
	padding: 48px var(--mg-gutter);
}

.mg-lp-foot__in {
	max-width: var(--mg-max);
	margin-inline: auto;
}

.mg-lp-foot__top {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-lp-foot__logo img {
	width: 224px;
	height: auto;
}

.mg-lp-foot__info p {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mg-text-2);
}

.mg-lp-foot__name {
	font-weight: 600;
	color: var(--mg-text) !important;
}

.mg-lp-foot__rule {
	margin: 32px 0 20px;
	border: 0;
	height: 1px;
	background: var(--mg-border);
}

.mg-lp-foot__links {
	margin: 0;
	display: flex;
	gap: 12px;
	font-size: 15px;
}

/* STICKY BAR, PHONE ONLY --------------------------------------------------
   How a phone first business keeps its callers on a form goal page without
   splitting attention in the hero. */

.mg-lp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	border-top: 1px solid var(--mg-border-dark);
}

.mg-lp-sticky a {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 10px 12px;
	font-family: var(--mg-body);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.mg-lp-sticky__call {
	background: var(--mg-teal-900);
	color: var(--mg-on-dark);
}

.mg-lp-sticky__cta {
	background: var(--mg-teal-700);
	color: var(--mg-white);
}

/* The bar overlaps the footer, so the page needs room underneath it. */
.mg-lp-foot {
	padding-bottom: 104px;
}

/* 12b. LANDING PAGE, TABLET AND UP ========================================= */

@media (min-width: 760px) {
	.mg-lp-head__hours {
		display: block;
	}

	.mg-lp-head__logo img {
		width: 200px;
	}

	.mg-lp-form {
		padding: 32px;
	}

	.mg-lp-proof__row {
		flex-direction: row;
		gap: 0;
	}

	/* Back to three stacked facts across, with the vertical dividers. */
	.mg-lp-fact {
		/* A percentage basis, not 0: with box-sizing:border-box a percentage
		   basis absorbs the padding below, so all three columns match. A zero
		   basis sizes the content box and leaves the first column 40px narrow. */
		display: block;
		flex: 1 1 33.3333%;
		min-width: 0;
		padding: 0 0 0 40px;
		border-top: 0;
		border-left: 1px solid var(--mg-border);
	}

	.mg-lp-fact:last-child {
		border-bottom: 0;
	}

	.mg-lp-fact:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.mg-lp-fact__fig {
		margin: 0 0 8px;
		min-width: 0;
	}

	/* The full number fits beside the logo from here up. */
	.mg-lp-head__callfull {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}

	.mg-lp-head__callshort {
		display: none;
	}

	.mg-lp-pill__src {
		display: inline;
	}

	.mg-lp-int__table {
		flex-direction: row;
	}

	.mg-lp-int__cell {
		/* Percentage basis for the same reason as .mg-lp-fact above. */
		flex: 1 1 33.3333%;
		min-width: 0;
		padding: 0 0 0 40px;
		border-top: 0;
		border-left: 1px solid var(--mg-border);
	}

	.mg-lp-int__cell:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.mg-lp-int__cell:last-child {
		border-bottom: 0;
	}

	.mg-lp-int__rule {
		display: block;
	}

	.mg-lp-int .mg-tickrail {
		display: block;
	}

	.mg-lp-steps__row {
		flex-direction: row;
		gap: 72px;
	}

	.mg-lp-step {
		flex: 1 1 0;
	}

	.mg-lp-rev__grid {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 88px 64px;
	}

	.mg-lp-quote {
		flex: 1 1 calc(50% - 32px);
	}

	/* Column flow, not row flow: the Figma reads down column one and then down
	   column two, and a flex-wrap grid would read across instead. Source order
	   is unchanged, so the copy.md sequence still holds for a screen reader. */
	.mg-lp-faq__grid {
		display: block;
		column-count: 2;
		column-gap: 88px;
	}

	.mg-lp-faq__item {
		break-inside: avoid;
		margin-bottom: 40px;
	}

	.mg-lp-faq__item:last-child {
		margin-bottom: 0;
	}

	.mg-lp-ribbon__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.mg-lp-foot__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.mg-lp-foot__info {
		text-align: right;
	}

	/* The sticky bar is a phone pattern. On a tablet and up the hero form is
	   already in view, so the bar is noise. */
	.mg-lp-sticky {
		display: none;
	}

	.mg-lp-foot {
		padding-bottom: 48px;
	}

	/* The early answers block is a phone only shortcut. On a wider screen the
	   full FAQ is one scroll away and repeating it reads as padding. */
	.mg-lp-early-faq {
		display: none;
	}
}

/* 12c. LANDING PAGE, DESKTOP =============================================== */

@media (min-width: 1024px) {
	.mg-lp-hero {
		padding-top: 92px;
	}

	.mg-lp-hero__in {
		gap: 56px;
	}

	/* Now that a form card holds the right hand side, the scrim runs left to
	   right so the photo stays visible behind and around it. */
	.mg-lp-hero__scrim {
		background: linear-gradient(90deg, rgba(6, 46, 56, 0.93) 0%, rgba(6, 46, 56, 0.85) 52%, rgba(6, 46, 56, 0.34) 72%, rgba(6, 46, 56, 0.08) 100%);
	}

	.mg-lp-hero__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 96px;
	}

	.mg-lp-hero__copy {
		flex: 1 1 0;
		min-width: 0;
	}

	.mg-lp-hero__sub--wide {
		display: block;
	}

	/* The form card is beside the copy now, so the jump would point at
	   something already on screen. */
	.mg-lp-hero__jump {
		display: none;
	}

	.mg-lp-hero__sub--narrow {
		display: none;
	}

	.mg-lp-yards {
		margin-top: 24px;
		padding-top: 19px;
		flex-direction: row;
		gap: 48px;
	}

	.mg-lp-yard {
		flex: 1 1 0;
		min-width: 0;
	}

	/* The form card is a fixed 440 and does not flex, so the copy column takes
	   the remainder. Restated at this specificity because .mg-lp-form is also
	   used inside the final CTA, where it is allowed to size differently. */
	.mg-lp-hero__cols > .mg-lp-form {
		flex: 0 0 440px;
		width: 440px;
	}

	.mg-lp-cta__in {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 72px;
	}

	.mg-lp-cta__copy {
		flex: 1 1 0;
	}

	.mg-lp-jump {
		flex: 0 0 auto;
		align-items: flex-start;
	}

	.mg-lp-get__list {
		gap: 84px;
	}

	.mg-lp-get__item {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	/* Alternating: even rows put the photo first, odd rows flip it. */
	.mg-lp-get__item--flip {
		flex-direction: row-reverse;
	}

	.mg-lp-get__photo {
		flex: 0 0 560px;
	}

	.mg-lp-get__text {
		flex: 1 1 0;
		min-width: 0;
	}

	.mg-lp-final__in {
		flex-direction: row;
		align-items: flex-start;
		gap: 96px;
	}

	.mg-lp-final__copy {
		flex: 1 1 0;
		min-width: 0;
	}

	.mg-lp-final__in > .mg-lp-form {
		flex: 0 0 440px;
		width: 440px;
	}
}