/* ==========================================================================
   Moving Mountains — base: tokens, reset, typography, links, buttons, lists,
   focus, motion primitives, utilities.
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   ========================================================================== */

:root {
	--mm-navy: var(--wp--preset--color--navy);
	--mm-navy-2: var(--wp--preset--color--navy-2);
	--mm-navy-3: var(--wp--preset--color--navy-3);
	--mm-orange: var(--wp--preset--color--orange);
	--mm-orange-dark: var(--wp--preset--color--orange-dark);
	--mm-blue: var(--wp--preset--color--blue);
	--mm-red: var(--wp--preset--color--red);
	--mm-tan: var(--wp--preset--color--tan);
	--mm-sand: var(--wp--preset--color--sand);
	--mm-ink: var(--wp--preset--color--ink);
	--mm-muted: var(--wp--preset--color--muted);
	--mm-line: var(--wp--preset--color--line);
	--mm-display: var(--wp--preset--font-family--display);
	--mm-cond: var(--wp--preset--font-family--condensed);
	--mm-body: var(--wp--preset--font-family--body);
	--mm-gutter: var(--wp--custom--gutter);
	--mm-section: var(--wp--custom--section);
	--mm-article: var(--wp--custom--article);
	--mm-wide: 1320px;
	--mm-max: 1600px;
	--mm-ease: var(--wp--custom--ease);
	--mm-ease-out: cubic-bezier(.22, 1, .36, 1);
	--mm-shadow: var(--wp--preset--shadow--float);
	--mm-angle: -29.4deg;
	/* icons as masks: colour them with background-color */
	--mm-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 5.5 19.5 12 13 18.5'/%3E%3C/svg%3E");
	--mm-i-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6.5 17.5 17 7M8.5 6.5H17.5V15.5'/%3E%3C/svg%3E");
	--mm-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2.5 9.4 6c.5.6.5 1.4 0 2L8 9.7a12.6 12.6 0 0 0 6.3 6.3l1.7-1.4c.6-.5 1.4-.5 2 0l3.5 2.8c.6.5.7 1.4.2 2l-1.6 2c-.6.7-1.5 1-2.4.8C10.3 20.5 3.5 13.7 2 6.3c-.2-.9.1-1.8.8-2.4l2-1.6c.6-.5 1.5-.4 1.8.2z'/%3E%3C/svg%3E");
	--mm-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 4.8 4.8L19.5 7'/%3E%3C/svg%3E");
	--mm-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
	--mm-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z'/%3E%3C/svg%3E");
	--mm-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5C4.5 15 12 22 12 22s7.5-7 7.5-12.5A7.5 7.5 0 0 0 12 2zm0 10.3a2.8 2.8 0 1 1 0-5.6 2.8 2.8 0 0 1 0 5.6z'/%3E%3C/svg%3E");
	--mm-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E");
	--mm-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
	--mm-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E");
	--mm-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: style; }
img, video, iframe, svg { max-width: 100%; }
img { display: block; height: auto; }
figure { margin: 0; }
.wp-block-image { line-height: 0; }
.wp-block-image img { height: auto; }
::selection { background: var(--mm-orange); color: #fff; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; margin-block: 0; }
p, li { overflow-wrap: break-word; text-wrap: pretty; }
p { margin-block: 0; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Brand emphasis inside display headings: italic (sheared) + orange. */
:is(h1, h2, .mm-display) :is(em, i) { font-style: oblique 10deg; }
:is(h1, h2) mark, .mm-accent { background: none; color: var(--mm-orange); }

/* Utility classes: a heading keeps its level, only its look changes. */
.mm-h-display { font-family: var(--mm-display) !important; font-weight: 400 !important; font-size: var(--wp--preset--font-size--heading-lg) !important; line-height: .92 !important; letter-spacing: .005em !important; text-transform: uppercase !important; }
.mm-h-card { font-family: var(--mm-cond) !important; font-weight: 700 !important; font-size: var(--wp--preset--font-size--heading-sm) !important; line-height: 1.15 !important; letter-spacing: .03em !important; text-transform: uppercase !important; }

.mm-display {
	font-family: var(--mm-display);
	font-size: var(--wp--preset--font-size--display);
	line-height: .86;
	text-transform: uppercase;
	letter-spacing: .005em;
	margin: 0;
}

/* Eyebrow / subheading: Roboto Condensed caps with brand tracking. */
.mm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-family: var(--mm-cond);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: currentColor;
}
.mm-eyebrow::before {
	/* the brand double slash */
	content: "";
	width: 1.1em;
	height: 1.35em;
	background: var(--mm-orange);
	-webkit-mask: url("../brand/elements/slashes.svg") center / contain no-repeat;
	mask: url("../brand/elements/slashes.svg") center / contain no-repeat;
	flex: none;
}

.mm-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a { text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color .25s var(--mm-ease), background-color .25s var(--mm-ease), border-color .25s var(--mm-ease); }
:where(p, li, td, dd) a { color: inherit; text-decoration-color: var(--mm-orange); text-decoration-thickness: 2px; }
:where(p, li, td, dd) a:hover { color: var(--mm-orange-dark); }
.has-navy-background-color :where(p, li) a:hover, .mm-dark :where(p, li) a:hover { color: var(--mm-tan); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--mm-orange);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Buttons (render filter adds .mm-btn to every core button link)
   Sharp rectangles, condensed caps, a skewed fill sweeps in on hover
   (the brand's 29° angle) and the arrow slides.
   -------------------------------------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.wp-block-button__link.mm-btn {
	--mm-btn-bg: var(--mm-orange);
	--mm-btn-fg: #fff;
	--mm-btn-sweep: var(--mm-navy);
	--mm-btn-sweep-fg: #fff;
	--mm-btn-line: var(--mm-btn-bg);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 56px;
	padding: 14px 26px;
	border: 1.5px solid var(--mm-btn-line);
	border-radius: 0;
	background: var(--mm-btn-bg);
	color: var(--mm-btn-fg);
	font-family: var(--mm-cond);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .45s var(--mm-ease), border-color .45s var(--mm-ease);
}
.wp-block-button__link.mm-btn::before {
	/* sweep */
	content: "";
	position: absolute;
	inset: -2px -30%;
	background: var(--mm-btn-sweep);
	transform: translateX(-102%) skewX(-29deg);
	transform-origin: left;
	transition: transform .55s var(--mm-ease);
	z-index: -1;
}
.wp-block-button__link.mm-btn::after {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--mm-i-arrow) center / contain no-repeat;
	mask: var(--mm-i-arrow) center / contain no-repeat;
	transition: transform .45s var(--mm-ease);
}
.wp-block-button__link.mm-btn:hover { color: var(--mm-btn-sweep-fg); border-color: var(--mm-btn-sweep); }
.wp-block-button__link.mm-btn:hover::before { transform: translateX(0) skewX(-29deg); }
.wp-block-button__link.mm-btn:hover::after { transform: translateX(4px); }
.wp-block-button__link.mm-btn:active { transform: translateY(1px); }

/* Outline (brand: "thin white or orange rectangles") */
.is-style-mm-outline .wp-block-button__link.mm-btn { --mm-btn-bg: transparent; --mm-btn-fg: currentColor; --mm-btn-line: currentColor; --mm-btn-sweep: var(--mm-orange); --mm-btn-sweep-fg: #fff; }
/* Light (on navy / photos) */
.is-style-mm-light .wp-block-button__link.mm-btn { --mm-btn-bg: #fff; --mm-btn-fg: var(--mm-navy); --mm-btn-sweep: var(--mm-orange); --mm-btn-sweep-fg: #fff; }
/* Navy */
.is-style-mm-navy .wp-block-button__link.mm-btn { --mm-btn-bg: var(--mm-navy); --mm-btn-fg: #fff; --mm-btn-sweep: var(--mm-orange); }
/* Phone buttons get a phone glyph instead of the arrow */
.wp-block-button__link.mm-btn[href^="tel:"]::after { -webkit-mask-image: var(--mm-i-phone); mask-image: var(--mm-i-phone); flex-basis: 17px; height: 17px; }
.wp-block-button__link.mm-btn[href^="tel:"]:hover::after { transform: rotate(-12deg) scale(1.08); }

/* Text link with arrow ("View Service", "READ MORE") */
.mm-link-arrow, .mm-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mm-cond);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: inherit;
}
.mm-link-arrow a::after {
	content: "";
	width: 34px;
	height: 14px;
	background: var(--mm-orange);
	-webkit-mask: var(--mm-i-arrow) right center / 18px 18px no-repeat, linear-gradient(#000 0 0) left center / calc(100% - 6px) 2px no-repeat;
	mask: var(--mm-i-arrow) right center / 18px 18px no-repeat, linear-gradient(#000 0 0) left center / calc(100% - 6px) 2px no-repeat;
	transition: width .4s var(--mm-ease);
}
.mm-link-arrow a:hover::after { width: 46px; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
.wp-block-list { padding-left: 1.25em; }
.wp-block-list li + li { margin-top: .5em; }
.wp-block-list li::marker { color: var(--mm-orange); }
ol.wp-block-list li::marker { font-family: var(--mm-cond); font-weight: 700; }
.is-style-mm-check, .mm-check { list-style: none; padding-left: 0; }
.is-style-mm-check li, .mm-check li { position: relative; padding-left: 34px; }
.is-style-mm-check li::before, .mm-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 20px;
	height: 20px;
	background: var(--mm-orange);
	-webkit-mask: var(--mm-i-check) center / contain no-repeat;
	mask: var(--mm-i-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Motion primitives (site.js adds the classes; nothing is hidden without JS)
   -------------------------------------------------------------------------- */
.js .mm-reveal { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .9s var(--mm-ease), transform .9s var(--mm-ease); transition-delay: var(--mm-delay, 0ms); }
.js .mm-reveal.is-in { opacity: 1; transform: none; }
.js .mm-reveal--left { transform: translate3d(-48px, 0, 0); }
.js .mm-reveal--scale { transform: scale(.94); }

/* Word-by-word headline reveal: each word rises out of its own clipped line. */
.mm-words .mm-w { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }
.mm-words .mm-w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform .9s var(--mm-ease); transition-delay: calc(var(--i, 0) * 55ms); }
.mm-words.is-in .mm-w > span { transform: none; }

/* Image mask reveal (wipe from the brand angle) */
.js .mm-wipe { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.2s var(--mm-ease); }
.js .mm-wipe.is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
	.js .mm-reveal, .js .mm-wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.mm-words .mm-w > span { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.mm-dark, .has-navy-background-color { color: rgb(255 255 255 / .82); }
:is(.mm-dark, .has-navy-background-color) :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.has-sand-background-color, .mm-sand { background: var(--mm-sand); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: #fff; color: var(--mm-navy); padding: 12px 18px; }