/* ==========================================================================
   Base — reset, typography primitives, shared utilities.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--lmt-ground);
	color: var(--lmt-ink);
	font-family: var(--lmt-font-body);
	font-size: var(--lmt-size-base);
	line-height: var(--lmt-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* A display value on a component beats the hidden attribute's UA rule, which
   silently reveals anything JavaScript means to keep closed. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--lmt-red);
	outline-offset: 2px;
}

/* ---- Headings ---------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 400;
	text-wrap: balance;
}

.lmt-display-1,
.lmt-display-2,
.lmt-display-3 {
	font-family: var(--lmt-font-display);
	text-transform: uppercase;
	font-weight: 400;
}

/* Comp: 96px set at 0.92 leading with a hair of positive tracking. Ours was
   88px at 0.94 with negative tracking, which read tighter and smaller. */
.lmt-display-1 {
	font-size: var(--lmt-size-display-1);
	line-height: 0.92;
	letter-spacing: 0.005em;
}

/* Comp: 56px set solid, no tracking. */
.lmt-display-2 {
	font-size: var(--lmt-size-display-2);
	line-height: 1;
	letter-spacing: normal;
}
.lmt-display-3 {
	font-size: var(--lmt-size-display-3);
	line-height: var(--lmt-leading-snug);
	letter-spacing: var(--lmt-tracking-display);
}

/* Body-font headings, used for card titles */
.lmt-title {
	font-family: var(--lmt-font-body);
	font-size: var(--lmt-size-md);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.lmt-eyebrow {
	font-size: var(--lmt-size-eyebrow);
	font-weight: 700;
	letter-spacing: var(--lmt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lmt-red);
	margin: 0;
}

.lmt-eyebrow--muted { color: var(--lmt-ink-muted); }

p { margin: 0; }
p + p { margin-top: var(--lmt-space-4); }

.lmt-lede {
	font-size: var(--lmt-size-lg);
	color: var(--lmt-ink-muted);
	max-width: var(--lmt-measure);
}

/* ---- Long-form prose ---------------------------------------------------
   Comp article body: 18px/1.7 at 680px, 36px Anton headings, 24px paragraph
   rhythm opening out to 40px before the next heading.
   ---------------------------------------------------------------------- */

.lmt-prose {
	max-width: 42.5rem;
	font-size: 18px;
	line-height: 1.7;
	color: #222;
}

.lmt-prose > * { margin: 0 0 24px; }
.lmt-prose > *:last-child { margin-bottom: 0; }

.lmt-prose h2 {
	font-family: var(--lmt-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1;
	text-transform: uppercase;
	margin: 40px 0 20px;
}
.lmt-prose > h2:first-child { margin-top: 0; }

.lmt-prose h3 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 32px 0 12px;
}

.lmt-prose ul,
.lmt-prose ol { padding-left: 1.25rem; }
.lmt-prose li + li { margin-top: var(--lmt-space-2); }

.lmt-prose a { color: var(--lmt-red-dark); }

.lmt-prose img { margin-block: 32px; }

.lmt-prose blockquote {
	background: var(--lmt-grey-100);
	padding: 28px 32px;
	margin: 0 0 40px;
	font-size: 17px;
}
.lmt-prose blockquote p:last-child { margin-bottom: 0; }

.lmt-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lmt-prose th, .lmt-prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--lmt-rule-soft); }

/* ---- Layout primitives ------------------------------------------------- */

.lmt-shell {
	max-width: var(--lmt-max);
	margin-inline: auto;
	padding-inline: var(--lmt-gutter);
}

.lmt-section {
	padding-block: var(--lmt-section-y) var(--lmt-section-y-end);
}

/* Shell for a WooCommerce app delivered by shortcode (account, cart,
   checkout). Full width, and the app supplies its own vertical rhythm. */
.lmt-app { padding-block: 0 var(--lmt-section-y-end); }

/* ---- Section header (comp: heading left, support right) ---------------- */

.lmt-head { display: grid; gap: var(--lmt-space-5); margin-bottom: var(--lmt-space-7); }

@media (min-width: 900px) {
	.lmt-head--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: var(--lmt-space-8);
		align-items: end;
	}
}

.lmt-head__main { display: flex; flex-direction: column; gap: 14px; }
.lmt-head__main .lmt-display-2 { max-width: 20ch; }

.lmt-head__side { display: flex; flex-direction: column; gap: 14px; }
.lmt-head__side p { font-size: var(--lmt-size-base); line-height: 1.5; color: #555; }

.lmt-section--dark .lmt-head__side p { color: var(--lmt-grey-400); }

.lmt-arrow-link {
	font-size: var(--lmt-size-sm);
	font-weight: 700;
	text-decoration: none;
	align-self: start;
}
.lmt-arrow-link span { color: var(--lmt-red); }
.lmt-arrow-link:hover { color: var(--lmt-red); }

.lmt-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

.lmt-section--dark {
	background: var(--lmt-black);
	color: var(--lmt-white);
}
.lmt-section--dark .lmt-lede { color: var(--lmt-grey-400); }
.lmt-section--dark .lmt-eyebrow { color: var(--lmt-red); }

.lmt-section--alt { background: var(--lmt-ground-alt); }

.lmt-stack { display: flex; flex-direction: column; gap: var(--lmt-space-5); }
.lmt-stack--sm { gap: var(--lmt-space-3); }
.lmt-stack--lg { gap: var(--lmt-space-7); }

.lmt-grid {
	display: grid;
	gap: var(--lmt-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.lmt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* ---- Accessibility ----------------------------------------------------- */

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

.lmt-skip-link {
	position: absolute;
	top: -100%;
	left: var(--lmt-space-4);
	z-index: 100;
	background: var(--lmt-black);
	color: var(--lmt-white);
	padding: var(--lmt-space-3) var(--lmt-space-4);
	font-weight: 700;
}
.lmt-skip-link:focus { top: var(--lmt-space-3); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Motion on scroll.

   Sections settle into place as they come into view. Everything here hangs off
   .lmt-motion on <html>, which the script adds itself — so with no JavaScript,
   a failed script or reduced motion switched on, nothing is ever hidden. That
   ordering matters: a reveal that starts at opacity 0 and waits for a script is
   a blank page when the script does not arrive.
   ========================================================================== */

.lmt-motion [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.lmt-motion [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Children of a revealed group follow it in, a beat apart. Six steps is enough
 * for a row of cards; past that the last one waits too long to feel connected
 * to the first.
 */
.lmt-motion [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lmt-motion [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }

.lmt-motion [data-reveal-group].is-revealed > :nth-child(1) { transition-delay: 0ms; }
.lmt-motion [data-reveal-group].is-revealed > :nth-child(2) { transition-delay: 70ms; }
.lmt-motion [data-reveal-group].is-revealed > :nth-child(3) { transition-delay: 140ms; }
.lmt-motion [data-reveal-group].is-revealed > :nth-child(4) { transition-delay: 210ms; }
.lmt-motion [data-reveal-group].is-revealed > :nth-child(5) { transition-delay: 280ms; }
.lmt-motion [data-reveal-group].is-revealed > :nth-child(n + 6) { transition-delay: 350ms; }

/* The hero is above the fold: it comes in on load rather than on scroll, and
   without the offset, so the first thing anybody sees does not move. */
.lmt-motion .lmt-hero [data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.lmt-motion [data-reveal],
	.lmt-motion [data-reveal-group] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}