/*
 * Direction A — Plat, merged with the September 2026 review feedback.
 *
 * Tokens live on body.mls-dir-plat, never :root.
 * The page markup carries most styles inline. This file supplies the fonts,
 * the document color, hover states, the rise animation, and every rule that
 * changes with viewport width or motion preference: the header, the hero,
 * the credentials strip, the section label gutter, and the contact band with
 * its Fluent Forms form. Those parts are styled by
 * class here, not inline, because an inline style beats a media query.
 *
 * Updated 2026-10-05: Stamp palette, Besley / Petrona / IBM Plex Mono,
 * video hero, stacked mobile header, mobile credentials grid.
 */

@font-face {
	font-family: "Besley";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/besley-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Petrona";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/petrona-latin.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-normal-c36f509c0a8f.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-normal-a76f53ca6612.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-normal-ad4580d8cb4b.woff2") format("woff2");
}

body.mls-dir-plat {
	--mls-ink: #1e3a5f;
	--mls-accent: #7a2430;
	--mls-accent-text: #7a2430;
	--mls-cta: #cc3600;
	--mls-muted: #5f676b;
	--mls-hairline: #c9c3b8;
	--mls-tint: #f5f6f4;
	--mls-mono: "IBM Plex Mono", ui-monospace, monospace;
	/* One spacing scale for every section. The widget's inline styles read these. */
	--mls-sec-top: clamp(80px, 9vw, 128px);
	--mls-sec-bottom: clamp(60px, 7vw, 96px);
	--mls-rule-gap: clamp(30px, 3.4vw, 46px);
	--mls-head-gap: clamp(26px, 3.2vw, 40px);
	--mls-lede-gap: clamp(16px, 1.8vw, 22px);
	/* The one light blue, behind the hero text and the tinted sections: a hex, and its RGB parts for the fades. */
	--mls-hero: #eef2f6;
	--mls-hero-rgb: 238, 242, 246;
	background: #ffffff;
	color: #1e3a5f;
	font-family: Petrona, Georgia, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* WHY: the Elementor kit sets Satoshi and cyan on headings, which beat an inherited value. */
body.mls-dir-plat h1,
body.mls-dir-plat h2,
body.mls-dir-plat h3 {
	font-family: Besley, Georgia, serif;
	color: inherit;
}

body.mls-dir-plat a {
	color: #1e3a5f;
}

body.mls-dir-plat a:hover {
	color: #7a2430;
}

body.mls-dir-plat .mls-a-hover-ink:hover {
	color: #7a2430;
	border-bottom-color: #7a2430;
}

body.mls-dir-plat .mls-a-hover-fill:hover {
	background: #1e3a5f;
	color: #ffffff;
}

/* WHY: wax on seal blue is under 1.2:1, so links and the focus ring switch to white on the dark band. */
body.mls-dir-plat .mls-a-on-dark {
	--mls-accent: #ffffff;
}

body.mls-dir-plat .mls-a-on-dark a:hover {
	color: #ffffff;
	text-decoration: underline;
}

body.mls-dir-plat .elementor-widget-html,
body.mls-dir-plat .elementor-widget-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Header */

/*
 * The header shares the hero's surface at the top of the page: no bar of its own, a hairline
 * that fades at both ends, the hero running up behind it. Once the page scrolls it turns
 * solid so it stays readable. WHY solid is the default: the widget's small script adds
 * .mls-a-header-top while the page is at the top; without the script the header stays solid.
 */
body.mls-dir-plat .mls-a-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	transition: background 0.25s;
}

body.mls-dir-plat .mls-a-header.mls-a-header-top {
	background: linear-gradient(180deg, rgba(var(--mls-hero-rgb), 0.92) 0, rgba(var(--mls-hero-rgb), 0.55) 60%, rgba(var(--mls-hero-rgb), 0) 100%);
	backdrop-filter: none;
}

body.mls-dir-plat .mls-a-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(30, 58, 95, 0) 0, rgba(30, 58, 95, 0.26) 14%, rgba(30, 58, 95, 0.26) 86%, rgba(30, 58, 95, 0) 100%);
}

/*
 * Icons are from Lucide (ISC license; notice in LICENSE-lucide.txt beside this file), inlined
 * in the widget at a thinner stroke. The target sits on the header's hairline at the top of
 * the page, and at phone width it centers a fading divider between the logo and the links.
 */
body.mls-dir-plat .mls-a-header-mark {
	position: absolute;
	bottom: -11px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	color: #7a2430;
	line-height: 0;
	opacity: 0;
	transition: opacity 0.25s;
}

body.mls-dir-plat .mls-a-header-top .mls-a-header-mark {
	opacity: 1;
}

/*
 * WHY a gap in the line, not a filled box behind the mark: the header at the top of the page
 * is a fade over the hero, so no single color matches what is behind the mark.
 */
@media (min-width: 961px) {
	body.mls-dir-plat .mls-a-header.mls-a-header-top::after {
		background: linear-gradient(
			90deg,
			rgba(30, 58, 95, 0) 0,
			rgba(30, 58, 95, 0.26) 14%,
			rgba(30, 58, 95, 0.26) calc(50% - 21px),
			rgba(30, 58, 95, 0) calc(50% - 21px),
			rgba(30, 58, 95, 0) calc(50% + 21px),
			rgba(30, 58, 95, 0.26) calc(50% + 21px),
			rgba(30, 58, 95, 0.26) 86%,
			rgba(30, 58, 95, 0) 100%
		);
	}
}

body.mls-dir-plat .mls-a-rule {
	display: none;
}

body.mls-dir-plat .mls-a-header-in {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px clamp(22px, 5vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

body.mls-dir-plat .mls-a-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

body.mls-dir-plat .mls-a-logo-img {
	display: block;
	height: 58px;
	width: auto;
}

body.mls-dir-plat .mls-a-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.6vw, 32px);
	padding: 6px 0;
	font-family: var(--mls-mono);
	text-transform: uppercase;
}

body.mls-dir-plat .mls-a-navgroup {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 28px);
	padding: 10px 20px;
	border: 1px solid rgba(30, 58, 95, 0.28);
	background: rgba(255, 255, 255, 0.5);
}

body.mls-dir-plat .mls-a-nav-link {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: #1e3a5f;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

/* The phone number is a button: seal blue so it does not compete with the orange call to action. */
body.mls-dir-plat .mls-a-nav-tel {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: #1e3a5f;
	text-decoration: none;
	white-space: nowrap;
	padding: 11px 18px;
	transition: background 0.2s;
}

body.mls-dir-plat .mls-a-nav-tel:hover {
	color: #ffffff;
	background: #cc3600;
}

/* WHY: the logged-in admin bar covers a top:0 sticky bar. CONSTRAINT: admin-bar only. */
body.mls-dir-plat.admin-bar .mls-a-header {
	top: 32px;
}

/*
 * WHY: without this an anchor jump puts the section top under the sticky header, so the
 * text sits against it. CONSTRAINT: no extra offset for the admin bar; WordPress already
 * adds its height as scroll-padding on the page, and adding it here leaves a gap.
 */
body.mls-dir-plat section[id] {
	scroll-margin-top: 90px;
}

/* Hero: video on the right, a page-colored gradient behind the text. */

body.mls-dir-plat .mls-a-hero {
	position: relative;
	overflow: hidden;
	background: var(--mls-hero);
}

body.mls-dir-plat .mls-a-hero-video,
body.mls-dir-plat .mls-a-hero-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.mls-dir-plat .mls-a-hero-poster {
	display: none;
}

/*
 * The gradient stays solid to just past the text column, then fades into the video
 * along a diagonal edge. WHY skew, not an angled gradient: the solid stop has to track
 * the text column in px, and an angled gradient measures stops along a line whose
 * length changes with the hero's height. CONSTRAINT: the box runs 30% past the left
 * edge so the skew never uncovers the corner; 23.077% and 61.539% are that offset and
 * the hero's midpoint expressed in the wider box. The pivot sits at the foot of the lede,
 * the widest text, so the edge clears it and leans away above and below.
 */
body.mls-dir-plat .mls-a-hero-shade {
	position: absolute;
	inset: 0 0 0 -30%;
	transform-origin: 0 70%;
	transform: skewX(-20deg);
	background: linear-gradient(
		90deg,
		var(--mls-hero) 0,
		var(--mls-hero) max(calc(61.539% + 30px), calc(23.077% + 620px)),
		rgba(var(--mls-hero-rgb), 0.72) max(calc(61.539% + 30px + 9vw), calc(23.077% + 620px + 9vw)),
		rgba(var(--mls-hero-rgb), 0) max(calc(61.539% + 30px + 26vw), calc(23.077% + 620px + 26vw))
	);
}

/*
 * The foot of the hero fades to white, so it meets the page without a hard edge.
 * CONSTRAINT: the fade is solid white 6px before the edge and overhangs it by 1px. The hero's
 * height is fractional, and a fade ending exactly on the edge leaves a faint sub-pixel line.
 */
body.mls-dir-plat .mls-a-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 146px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 55%, #ffffff calc(100% - 7px));
	pointer-events: none;
}

body.mls-dir-plat .mls-a-hero-in {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(72px, 10vw, 128px) clamp(22px, 5vw, 40px) clamp(64px, 9vw, 108px);
}

/* The credentials panel overlaps the foot of the hero by 52px, so the hero keeps that much extra room. */
body.mls-dir-plat .mls-a-hero-in {
	padding-bottom: calc(clamp(64px, 9vw, 108px) + 52px);
}

body.mls-dir-plat .mls-a-hero-copy {
	max-width: 570px;
}

/* The background page's plain hero. */
body.mls-dir-plat .mls-a-pagehero {
	background: linear-gradient(180deg, var(--mls-hero) 0, var(--mls-hero) calc(100% - 140px), #ffffff calc(100% - 6px));
	padding: clamp(52px, 8vw, 92px) 0 calc(clamp(52px, 8vw, 84px) + 52px);
}

/* WHY: the headline is 558px at full size, 12px inside the column; a wrap would orphan "PLS". */
body.mls-dir-plat .mls-a-hero-copy h1 {
	white-space: nowrap;
}

/* Credentials: a white panel that rises into the foot of the hero. */

body.mls-dir-plat .mls-a-credwrap {
	position: relative;
	z-index: 3;
	margin-top: -52px;
}

body.mls-dir-plat .mls-a-creds {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #c9c3b8;
	border-top: 2px solid #1e3a5f;
	box-shadow: 0 34px 70px -42px rgba(30, 58, 95, 0.55);
}

body.mls-dir-plat .mls-a-cred:first-child {
	border-left: 0;
}

body.mls-dir-plat .mls-a-cred {
	flex: 1 1 180px;
	border-left: 1px solid #c9c3b8;
	padding: 26px clamp(16px, 2vw, 26px) 30px;
}

body.mls-dir-plat .mls-a-cred-label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--mls-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5f676b;
}

body.mls-dir-plat .mls-a-cred-val {
	font-family: var(--mls-mono);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.42;
}

body.mls-dir-plat .mls-a-cred-sub {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: #5f676b;
}

body.mls-dir-plat .mls-a-cred-years-in {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.mls-dir-plat .mls-a-seal {
	flex-shrink: 0;
}

/*
 * Section: numbered label under the rule, then the heading and all section content at the
 * full width. There is no left gutter at any width; the indented layout was dropped.
 */

body.mls-dir-plat .mls-a-sec {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.5vw, 20px);
	padding-top: var(--mls-rule-gap);
}

/* The section rule fades out toward the right instead of running the full width. */
body.mls-dir-plat .mls-a-sec::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1.5px;
	background: linear-gradient(90deg, #1e3a5f 0, #1e3a5f 28%, rgba(30, 58, 95, 0) 100%);
}

/* A tinted section fades in from white and back out, with no edge lines. */
body.mls-dir-plat .mls-a-tintfade {
	background: linear-gradient(180deg, #ffffff 0, var(--mls-hero) 110px, var(--mls-hero) calc(100% - 110px), #ffffff 100%);
}

body.mls-dir-plat .mls-a-sec-num {
	font-family: var(--mls-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5f676b;
}

body.mls-dir-plat .mls-a-sec-body {
	min-width: 0;
}

/* On the blue-grey tint: orange falls to 4.4:1 there, so the label and its number go seal blue. */
body.mls-dir-plat .mls-a-sec-tint .mls-a-sec-num {
	color: #1e3a5f;
}

/*
 * Contact band: text and details on the left, the Fluent Forms form on a white panel.
 * WHY these selectors: the form markup is printed by Fluent Forms from a shortcode, so
 * it can only be styled from here, by its own class names, inside .mls-a-form.
 */

/* The band has a soft lighter area behind the form; the flat seal blue is the fallback. */
body.mls-dir-plat .mls-a-contactband {
	background: #1e3a5f;
	background: radial-gradient(ellipse 62% 78% at 74% 38%, #31598c 0, #25476f 38%, #1e3a5f 72%);
	color: #ffffff;
}

/* The band has no rule, so its heading sits where a section's heading would: top padding plus the rule gap. */
body.mls-dir-plat .mls-a-contactband {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--mls-sec-top) + var(--mls-rule-gap));
}

body.mls-dir-plat .mls-a-contactband > div,
body.mls-dir-plat .mls-a-contactband > footer {
	position: relative;
}

/* A large, faint instrument in the corner of the band. */
body.mls-dir-plat .mls-a-watermark {
	position: absolute;
	bottom: -30px;
	left: max(18px, calc(50% - 700px));
	color: #ffffff;
	line-height: 0;
	opacity: 0.07;
	pointer-events: none;
}

body.mls-dir-plat .mls-a-contactband .mls-a-form {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 90px -30px rgba(6, 16, 30, 0.7);
}

body.mls-dir-plat .mls-a-contactband footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28) 16%, rgba(255, 255, 255, 0.28) 84%, rgba(255, 255, 255, 0));
}

body.mls-dir-plat .mls-a-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(36px, 6.6vw, 96px);
	align-items: start;
}

body.mls-dir-plat .mls-a-form {
	--mls-accent: #1e3a5f;
	background: #ffffff;
	color: #2a3034;
	padding: clamp(22px, 2.6vw, 34px);
}

body.mls-dir-plat .mls-a-form .fluentform fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px 16px;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-group {
	grid-column: 1 / -1;
	margin: 0;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-group.mls-a-ff-half {
	grid-column: span 1;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-input--label {
	margin: 0 0 7px;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-input--label label {
	display: block;
	margin: 0;
	font-family: var(--mls-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #5f676b;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #c9c3b8;
	border-radius: 0;
	background-color: #ffffff;
	box-shadow: none;
	font-family: Petrona, Georgia, serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: #2a3034;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-form-control::placeholder {
	color: #6b7377;
	opacity: 1;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-form-control:focus {
	border-color: #1e3a5f;
	outline: 2px solid #1e3a5f;
	outline-offset: 1px;
}

body.mls-dir-plat .mls-a-form .fluentform select.ff-el-form-control {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e3a5f' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

body.mls-dir-plat .mls-a-form .fluentform textarea.ff-el-form-control {
	min-height: 112px;
	resize: vertical;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #7a2430;
}

body.mls-dir-plat .mls-a-form .fluentform .text-danger {
	margin-top: 6px;
	font-family: var(--mls-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: #7a2430;
}

body.mls-dir-plat .mls-a-form .fluentform .ff_submit_btn_wrapper {
	margin-top: 4px;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-btn-submit {
	padding: 14px 30px;
	border: 0;
	border-radius: 0;
	background-color: #cc3600;
	box-shadow: none;
	font-family: Petrona, Georgia, serif;
	font-size: 17px;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: #ffffff;
	opacity: 1;
	transition: background-color 0.2s;
}

body.mls-dir-plat .mls-a-form .fluentform .ff-btn-submit:hover,
body.mls-dir-plat .mls-a-form .fluentform .ff-btn-submit:focus {
	background-color: #1e3a5f;
	color: #ffffff;
	opacity: 1;
}

body.mls-dir-plat .mls-a-form .ff-message-success {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	font-family: Besley, Georgia, serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
	color: #1e3a5f;
}

body.mls-dir-plat .mls-a-form .ff-message-success p {
	margin: 0 0 10px;
}

body.mls-dir-plat .mls-a-form .ff-message-success p:last-child {
	margin: 0;
	font-family: Petrona, Georgia, serif;
	font-size: 18px;
	color: #2a3034;
}

/* Line of sight: an instrument sighting a flag, as a divider at the foot of a section. */

body.mls-dir-plat .mls-a-sight {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 760px;
	margin: clamp(56px, 7vw, 90px) auto clamp(14px, 3.2vw, 46px);
	padding: 0 24px;
	color: #1e3a5f;
}

body.mls-dir-plat .mls-a-sight-end {
	line-height: 0;
}

body.mls-dir-plat .mls-a-sight-line {
	flex: 1;
	height: 0;
	margin: 0 16px;
	border-top: 1.5px dashed #7a2430;
	opacity: 0.75;
}

/*
 * A round badge with the target, centered on the seam where the white section meets the
 * seal blue band. WHY it lives in the section above: the band clips its own overflow for the
 * watermark, so a badge inside it would lose its upper half.
 */
body.mls-dir-plat .mls-a-seamhost {
	position: relative;
}

body.mls-dir-plat .mls-a-seam {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	transform: translate(-50%, 50%);
	border: 1.5px solid #1e3a5f;
	border-radius: 50%;
	background: #ffffff;
	color: #7a2430;
	line-height: 0;
}

/* Sample-map callout. A placeholder until the PDF exists: dashed, no destination. */

body.mls-dir-plat .mls-a-sample {
	font-family: var(--mls-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7a2430;
	text-decoration: none;
	border-bottom: 1px dashed #7a2430;
	white-space: nowrap;
	cursor: default;
}

body.mls-dir-plat .mls-a-sample-note {
	margin-left: 8px;
	color: #5f676b;
}

@media (min-width: 961px) {
	/* The header sits over the hero, so the hero gives up the header's height at the top. */
	body.mls-dir-plat .mls-a-header {
		margin-bottom: -90px;
	}

	body.mls-dir-plat .mls-a-hero-in {
		padding-top: calc(clamp(72px, 10vw, 128px) + 90px);
	}

	body.mls-dir-plat .mls-a-pagehero {
		padding-top: calc(clamp(52px, 8vw, 92px) + 90px);
	}

	/*
	 * WHY: the video and the skewed shade are drawn as their own layers, and they overrun the
	 * hero's fractional bottom edge by a pixel, which shows as a hairline under the fade.
	 * Stopping both 6px short leaves only the hero's own background there, which the fade
	 * covers in white.
	 */
	body.mls-dir-plat .mls-a-hero-video,
	body.mls-dir-plat .mls-a-hero-poster {
		height: calc(100% - 6px);
	}

	body.mls-dir-plat .mls-a-hero-shade {
		bottom: 6px;
	}
}

@media (max-width: 960px) {
	/* No overlap here: the header sits above the hero on the hero's own page color. */
	body.mls-dir-plat .mls-a-header.mls-a-header-top {
		background: var(--mls-hero);
	}

	/* The hairline mark would hang over the video band here. */
	body.mls-dir-plat .mls-a-header-mark {
		display: none;
	}

	body.mls-dir-plat .mls-a-watermark svg {
		width: 320px;
		height: 320px;
	}

	body.mls-dir-plat .mls-a-seam {
		width: 46px;
		height: 46px;
	}

	/* Video band on top, text on solid page color below; the fade runs diagonally down the band. */
	body.mls-dir-plat .mls-a-hero-video,
	body.mls-dir-plat .mls-a-hero-poster,
	body.mls-dir-plat .mls-a-hero-shade {
		inset: 0 0 auto;
		height: clamp(210px, 54vw, 380px);
	}

	/* Solid by 68% so the band's lower-left corner is fully page color where the text begins. */
	body.mls-dir-plat .mls-a-hero-shade {
		transform: none;
		background: linear-gradient(170deg, rgba(var(--mls-hero-rgb), 0) 22%, var(--mls-hero) 68%);
	}

	body.mls-dir-plat .mls-a-hero-in {
		padding-top: calc(clamp(210px, 54vw, 380px) + 8px);
	}

	body.mls-dir-plat .mls-a-hero-copy {
		max-width: none;
	}

	body.mls-dir-plat .mls-a-hero-copy h1 {
		white-space: normal;
	}

	body.mls-dir-plat .mls-a-contact {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tablet, single-row header: the nav squeezes the logo's width while its height stays fixed. */
@media (min-width: 721px) and (max-width: 960px) {
	body.mls-dir-plat .mls-a-logo-img {
		object-fit: contain;
		object-position: left center;
	}

	/* Four nav links (Past Work, 2026-10-26): tighter spacing keeps the logo near its three-link size. */
	body.mls-dir-plat .mls-a-header-in {
		gap: 14px;
	}

	body.mls-dir-plat .mls-a-nav {
		gap: 12px;
	}

	body.mls-dir-plat .mls-a-navgroup {
		gap: 12px;
		padding: 10px 12px;
	}

	body.mls-dir-plat .mls-a-nav-link {
		letter-spacing: 0.06em;
	}

	body.mls-dir-plat .mls-a-nav-tel {
		font-size: 14px;
		padding: 11px 12px;
	}

	/* Credentials wrap three over two; the grid keeps a divider between the rows and the columns. */
	body.mls-dir-plat .mls-a-creds {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	body.mls-dir-plat .mls-a-cred {
		grid-column: span 2;
	}

	body.mls-dir-plat .mls-a-cred:nth-child(n+4) {
		grid-column: span 3;
		border-top: 1px solid #c9c3b8;
	}

	body.mls-dir-plat .mls-a-cred:nth-child(4) {
		border-left: 0;
	}
}

@media (max-width: 782px) {
	body.mls-dir-plat.admin-bar .mls-a-header {
		top: 46px;
	}
}

@media (max-width: 720px) {
	/* Stacked header: larger centered logo, links one per line. Not sticky, it would cover the screen. */
	body.mls-dir-plat .mls-a-header,
	body.mls-dir-plat.admin-bar .mls-a-header {
		position: static;
	}

	body.mls-dir-plat .mls-a-header-in {
		flex-direction: column;
		justify-content: center;
		gap: 14px;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	body.mls-dir-plat .mls-a-logo-img {
		height: 80px;
	}

	/* A fading line with the target at its center, between the logo and the links. */
	body.mls-dir-plat .mls-a-rule {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: min(100%, 290px);
		margin: 4px 0 0;
	}

	body.mls-dir-plat .mls-a-rule::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 1px;
		background: linear-gradient(
			90deg,
			rgba(30, 58, 95, 0) 0,
			rgba(30, 58, 95, 0.5) 26%,
			rgba(30, 58, 95, 0.5) calc(50% - 23px),
			rgba(30, 58, 95, 0) calc(50% - 23px),
			rgba(30, 58, 95, 0) calc(50% + 23px),
			rgba(30, 58, 95, 0.5) calc(50% + 23px),
			rgba(30, 58, 95, 0.5) 74%,
			rgba(30, 58, 95, 0) 100%
		);
	}

	body.mls-dir-plat .mls-a-rule-mark {
		position: relative;
		color: #7a2430;
		line-height: 0;
	}

	body.mls-dir-plat .mls-a-sight svg {
		width: 36px;
		height: 36px;
	}

	/* The stationing printed inside the profile drawing is too small to read here; the labels under it carry it. */
	body.mls-dir-plat .mls-a-prof-text {
		display: none;
	}

	/* The header is not sticky here, so a jump needs no offset. */
	body.mls-dir-plat section[id] {
		scroll-margin-top: 0;
	}

	body.mls-dir-plat .mls-a-nav {
		flex-direction: column;
		gap: 10px;
		padding: 0;
		text-align: center;
	}

	body.mls-dir-plat .mls-a-navgroup {
		flex-direction: column;
		gap: 10px;
		padding: 0;
		border: 0;
		background: none;
	}

	body.mls-dir-plat .mls-a-nav-link {
		font-size: 12.5px;
	}

	body.mls-dir-plat .mls-a-nav-tel {
		margin-top: 6px;
		font-size: 16px;
		padding: 12px 24px;
	}

	body.mls-dir-plat .mls-a-form .fluentform .ff-el-group.mls-a-ff-half {
		grid-column: 1 / -1;
	}

	/* Credentials: two tight columns, then the years as the centered closing row. */
	body.mls-dir-plat .mls-a-creds {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 0 16px;
	}

	body.mls-dir-plat .mls-a-cred {
		border-left: 0;
		border-bottom: 1px solid #c9c3b8;
		padding: 16px 12px 16px 0;
	}

	body.mls-dir-plat .mls-a-cred:nth-child(even) {
		border-left: 1px solid #c9c3b8;
		padding-left: 14px;
	}

	body.mls-dir-plat .mls-a-cred-label {
		margin-bottom: 6px;
		font-size: 10px;
	}

	body.mls-dir-plat .mls-a-cred-val {
		font-size: 15px;
	}

	body.mls-dir-plat .mls-a-cred-sub {
		font-size: 11.5px;
	}

	body.mls-dir-plat .mls-a-cred.mls-a-cred-years {
		grid-column: 1 / -1;
		border-left: 0;
		border-bottom: 0;
		padding: 22px 0 26px;
		text-align: center;
	}

	body.mls-dir-plat .mls-a-cred-years-in {
		justify-content: center;
		gap: 16px;
	}

	body.mls-dir-plat .mls-a-seal {
		width: 54px;
		height: 54px;
	}

	body.mls-dir-plat .mls-a-cred-years-val {
		font-family: Besley, Georgia, serif;
		font-size: 30px;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.1;
		color: #7a2430;
		text-align: left;
	}

	body.mls-dir-plat .mls-a-cred-years-val .mls-a-cred-sub {
		margin-top: 4px;
		font-family: var(--mls-mono);
		font-size: 12px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	/*
	 * Hero, phones: the copy leads and the video follows as a framed 16:9 picture above the
	 * credentials panel, aligned to the text gutter, with no fade over it (client review 2026-10-23).
	 * The frame sits 34px above the panel's 52px overlap; the copy's bottom padding reserves the
	 * frame's height, which padding percentages take from the hero's width.
	 */
	body.mls-dir-plat .mls-a-hero-video,
	body.mls-dir-plat .mls-a-hero-poster {
		/* A video keeps its intrinsic width between left and right offsets, so the width is explicit. */
		inset: auto auto calc(52px + 34px) clamp(22px, 5vw, 40px);
		width: calc(100% - 2 * clamp(22px, 5vw, 40px));
		height: auto;
		aspect-ratio: 16 / 9;
		z-index: 2;
		border: 1px solid #1e3a5f;
		box-shadow: 0 24px 44px -30px rgba(30, 58, 95, 0.65);
	}

	body.mls-dir-plat .mls-a-hero-shade {
		display: none;
	}

	body.mls-dir-plat .mls-a-hero-in {
		padding-top: 34px;
		padding-bottom: calc((100% - 2 * clamp(22px, 5vw, 40px)) * 9 / 16 + 52px + 34px + 34px);
	}

	/*
	 * Phone centering (operator's option A, 2026-10-23): the header was already centered, so the
	 * headlines below it follow — hero kicker, name and tagline, section labels and headings, the
	 * credential cells, the county list and its note, the map legend, the contact heading, the page
	 * hero and the footers. Paragraphs, service cards, the contact details and the form stay left.
	 * WHY !important on some rules: the widget sets those margins, flex alignments and flex bases
	 * inline, and only !important beats an inline style. Desktop is untouched.
	 */
	body.mls-dir-plat .mls-a-hero-copy {
		text-align: center;
	}

	body.mls-dir-plat .mls-a-hero-copy > span,
	body.mls-dir-plat .mls-a-hero-copy > div {
		justify-content: center;
	}

	/* The coordinate line's target icon is desktop only: on phones the two centered lines stand alone. */
	body.mls-dir-plat .mls-a-hero-copy > span:first-child > span:first-child:has(> svg) {
		display: none;
	}

	body.mls-dir-plat .mls-a-hero-copy > h1 > span {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.mls-dir-plat .mls-a-hero-copy > p {
		text-align: left;
	}

	body.mls-dir-plat .mls-a-cred {
		text-align: center;
	}

	body.mls-dir-plat .mls-a-sec-num {
		display: block;
		text-align: center;
	}

	body.mls-dir-plat .mls-a-sec-body > h2,
	body.mls-dir-plat .mls-a-contact h2 {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.mls-dir-plat #coverage .mls-a-sec-body > div > div:first-child {
		flex-basis: 100% !important;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	body.mls-dir-plat #coverage .mls-a-sec-body > div > div:first-child li {
		justify-content: center;
	}

	body.mls-dir-plat #coverage .mls-a-sec-body > div > div:first-child p {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.mls-dir-plat #coverage figcaption {
		justify-content: center;
	}

	/* The privacy page's hero (a single column). */
	body.mls-dir-plat .mls-a-pagehero > div:not(:has(> div)) {
		text-align: center;
	}

	body.mls-dir-plat .mls-a-pagehero > div:not(:has(> div)) > p {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/*
	 * The landing and contact drafts' heroes (2026-10-25), like the homepage hero: kicker, heading
	 * and the call row centered; the paragraph, the "have ready" list and the form stay left.
	 */
	body.mls-dir-plat .mls-a-pagehero > div:has(> div) > span,
	body.mls-dir-plat .mls-a-pagehero > div:has(> div) h1 {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.mls-dir-plat .mls-a-pagehero h1 ~ div:has(> a[href^="tel:"]) {
		justify-content: center;
		text-align: center;
	}

	body.mls-dir-plat footer:not(.mls-a-contactband) > div,
	body.mls-dir-plat footer.mls-a-contactband > div:last-child > div {
		justify-content: center !important;
		text-align: center;
	}

	body.mls-dir-plat footer:not(.mls-a-contactband) > div > *,
	body.mls-dir-plat footer.mls-a-contactband > div:last-child > div > * {
		flex-basis: 100%;
	}

	body.mls-dir-plat footer.mls-a-contactband > div:first-of-type {
		text-align: center;
	}

	/* Two-part labels ("Sta. 1+00 · Caltrans", "Miles Land Surveying, PLLC · Barak Miles, PLS") put
	 * each part on its own line, so every label lines up instead of wrapping at a different word. */
	body.mls-dir-plat .mls-a-split-sep {
		display: none;
	}

	body.mls-dir-plat .mls-a-split-part {
		display: block;
	}
}

/* WHY: a looping video is motion. The still poster replaces it when less motion is asked for. */
@media (prefers-reduced-motion: reduce) {
	body.mls-dir-plat .mls-a-hero-video {
		display: none;
	}

	body.mls-dir-plat .mls-a-hero-poster {
		display: block;
	}
}

@keyframes mls-plat-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}