/*
 * Legwork Base: design system.
 *
 * Mobile-first: base rules are for phones; min-width queries scale up.
 * Layer order is fixed here, so a child theme's `@layer brand { :root {…} }`
 * always beats the defaults in `tokens`, whatever order the files load in.
 * Rules: CLAUDE.md "Front-end rules" (hero never hidden, hover only on
 * hover-capable pointers, focus-visible always, reduced motion honoured).
 */
@layer reset, tokens, brand, base, layout, components, utilities;

/*
 * Font: no @font-face here. inc/assets.php generates the @font-face, the
 * --font-sans token and the preload from ONE setting (lw_font(), default
 * Manrope), so a child that picks another font leaves no trace of this one.
 */

/* ---------------------------------------------------------------- tokens */
@layer tokens {
	:root {
		/*
		 * Defaults = the Legwork house style (Luca, 2026-10-09). Tokens are named
		 * by ROLE (accent, ink, paper…), never by colour, so a child theme
		 * rebrands by overriding these in `@layer brand` with no leftovers.
		 * Every colour a component uses comes from here.
		 */
		--color-ink: #010203;
		--color-paper: #fefefa;
		--color-page: #f7f7f3;          /* muted text 4.96:1 */
		--color-panel: #f4f4f0;
		--color-accent: #0066e9;        /* 5.09:1 with paper */
		--color-accent-deep: #003a87;   /* gradient stop only; paper 10.6:1 */
		--color-accent-on-dark: #5c9dff; /* small text/links on dark; 7.64:1 on ink */
		--color-muted: #6b6b6b;         /* 5.27:1 on paper */
		--color-muted-on-dark: #9ca3af; /* 8.18:1 on ink */
		--color-line: #dcdcde;
		--color-field: #ededea;
		--color-field-border: #8a8a8a;  /* 3.41:1 against the page */
		--color-ink-raised: #10141c;    /* paper 18.2:1 */
		--color-error: #b42318;         /* 6.2:1 on --color-error-bg */
		--color-error-bg: #fef3f2;
		--color-focus: var(--color-accent);
		--color-focus-on-dark: var(--color-paper);
		--hairline-on-dark: 1px solid color-mix(in srgb, var(--color-accent-on-dark) 16%, transparent);
		--gradient-accent: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
		--border-gradient-card: linear-gradient(#fff 24%, color-mix(in srgb, var(--color-accent) 50%, transparent) 64%, rgb(255 255 255 / 0.83) 80%, transparent);
		--shadow-card: 0 4px 16px rgb(255 255 255 / 0.16), 0 12px 30px -2px rgb(0 0 0 / 0.06), 0 2px 6px -1px rgb(0 0 0 / 0.12);
		--shadow-inner-glow: inset 0 1px 1px rgb(199 211 234 / 0.05), inset 0 24px 48px rgb(199 211 234 / 0.05);
		--nav-bg: color-mix(in srgb, var(--color-ink) 90%, transparent);    /* solid fallback (no backdrop-filter, reduced transparency, open menu) */
		--nav-glass: color-mix(in srgb, color-mix(in srgb, var(--color-ink) 88%, var(--color-accent-deep)) 74%, transparent); /* smoked, accent-tinted glass; keeps white nav text >= 4.5:1 over the light page */
		--nav-rim: linear-gradient(135deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.06) 38%, rgb(255 255 255 / 0.04) 62%, color-mix(in srgb, var(--color-accent-on-dark) 45%, transparent));
		--glow-1: color-mix(in srgb, var(--color-accent) 42%, transparent);
		--glow-2: color-mix(in srgb, var(--color-accent-deep) 55%, transparent);
		--glow-3: color-mix(in srgb, var(--color-accent-on-dark) 16%, transparent);
		/* Desktop hero shader palette (hero-fx.js reads these). */
		--hero-fx-base: var(--color-ink);
		--hero-fx-1: var(--color-accent-deep);
		--hero-fx-2: var(--color-accent);
		--hero-fx-3: var(--color-accent-on-dark);

		--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* replaced by lw_font() */
		--weight-regular: 400;
		--weight-medium: 500;
		--weight-semibold: 600;
		--weight-bold: 700;

		--text-sm: 0.875rem;
		--text-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
		--text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
		--text-h3: clamp(1.25rem, 1.14rem + 0.48vw, 1.5rem);
		--text-h2: clamp(1.75rem, 1.48rem + 1.15vw, 2.5rem);
		--text-display: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
		--leading-tight: 1.06;
		--leading-heading: 1.15;
		--leading-body: 1.6;

		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.5rem;
		--space-6: 2rem;
		--space-7: 3rem;
		--space-8: 4rem;
		--space-9: 6rem;
		--section-pad-block: clamp(var(--space-7), 2rem + 4vw, var(--space-9));
		--gutter: max(1rem, env(safe-area-inset-left, 0px));
		--container: 74rem;
		--sheet-inset: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);
		/* Header floats inside the first sheet: same gap above the bar as the
		   sheet edge has around it; bar edges line up with .lw-container. */
		--header-gap: var(--space-4);
		--header-bar-h: 3.875rem;
		--header-top: calc(max(var(--sheet-inset), env(safe-area-inset-top, 0px)) + var(--header-gap));
		--header-clearance: calc(var(--header-top) + var(--header-bar-h) - var(--sheet-inset));

		--radius-sm: 8px;
		--radius-md: 16px;
		--radius-sheet: clamp(20px, 1rem + 2vw, 32px);
		--radius-pill: 999px;

		--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
		--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
		--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
		--dur-fast: 150ms;
		--dur-base: 250ms;
		--dur-slow: 400ms;
	}
}

/* ----------------------------------------------------------------- reset */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
	:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
	:where(ol, ul)[class] { list-style: none; padding: 0; }
	:where(img, svg, video) { display: block; max-width: 100%; height: auto; }
	:where(input, button, textarea, select) { font: inherit; color: inherit; }
	:where(button) { cursor: pointer; }
	:where(a) { color: inherit; }
	:where(address) { font-style: normal; }
}

/* ------------------------------------------------------------------ base */
@layer base {
	html { scroll-padding-top: calc(var(--header-top) + var(--header-bar-h) + var(--space-4)); }
	@media (prefers-reduced-motion: no-preference) {
		html { scroll-behavior: smooth; }
	}
	body {
		background: var(--color-page);
		color: var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--text-base);
		font-weight: var(--weight-regular);
		line-height: var(--leading-body);
		-webkit-font-smoothing: antialiased;
	}
	h1, h2, h3 {
		font-weight: var(--weight-semibold);
		line-height: var(--leading-heading);
		letter-spacing: -0.015em;
		text-wrap: balance;
	}
	p { text-wrap: pretty; }
	a { text-underline-offset: 0.18em; }
	:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 3px;
		border-radius: 4px;
	}
	input, textarea, select { font-size: max(16px, 1rem); }
	button, .lw-btn, [role="button"] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
	.lw-container {
		width: min(100% - 2 * var(--gutter), var(--container));
		margin-inline: auto;
	}
	.lw-section { padding-block: var(--section-pad-block); }
	.lw-section + .lw-section { padding-top: 0; }
	.lw-sheet {
		margin-inline: var(--sheet-inset);
		border-radius: var(--radius-sheet);
		padding-block: var(--section-pad-block);
	}
	.lw-sheet--dark {
		background: var(--color-ink);
		color: var(--color-paper);
		--color-focus: var(--color-focus-on-dark);
	}
	.lw-sheet--dark a:not(.lw-btn) { color: var(--color-accent-on-dark); }

	/* Ambient glow on dark sheets: decorative layer behind the content,
	   visible from the first frame (never gates content). Drifts with
	   transform only; paused off-screen by site.js; still frame under
	   reduced motion (global rule). Glows sit right/bottom, away from the
	   heading; muted text stays >= 4.5:1 over the brightest point. */
	.lw-sheet--dark { position: relative; isolation: isolate; overflow: clip; }
	.lw-sheet--dark::before {
		content: ""; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
		background:
			radial-gradient(closest-side at 78% 28%, var(--glow-1), transparent),
			radial-gradient(closest-side at 30% 86%, var(--glow-2), transparent),
			radial-gradient(closest-side at 92% 80%, var(--glow-3), transparent);
		animation: lw-aurora 26s var(--ease-in-out) infinite alternate;
	}
	html.js .lw-sheet--dark:not(.is-inview)::before { animation-play-state: paused; }
	@keyframes lw-aurora {
		from { transform: translate3d(-5%, -4%, 0) rotate(0deg) scale(1); }
		to   { transform: translate3d(5%, 4%, 0) rotate(10deg) scale(1.08); }
	}
	.lw-stack > * + * { margin-top: var(--space-5); }
	.lw-prose { max-width: 68ch; }
	.lw-prose > * + * { margin-top: var(--space-4); }
	.lw-prose :where(ul, ol) { padding-left: 1.25em; }
}

/* ------------------------------------------------------------ components */
@layer components {
	/* Skip link + visually hidden */
	.lw-skip {
		position: absolute; left: var(--space-4); top: -100px; z-index: 100;
		background: var(--color-ink); color: var(--color-paper);
		padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
	}
	.lw-skip:focus { top: var(--space-4); }

	/* Header: floating glass pill over the first sheet.
	   Fixed height + matching negative margin = it takes no space in the flow,
	   so the first sheet starts at the top and an open mobile menu overlays
	   the page instead of pushing it down. */
	.lw-header {
		position: sticky; top: var(--header-top); z-index: 50;
		height: var(--header-bar-h);
		margin-top: var(--header-top);
		margin-bottom: calc(-1 * (var(--header-top) + var(--header-bar-h)));
		padding-inline: var(--sheet-inset);
		pointer-events: none; /* the side gutters don't block the page */
	}
	.lw-header__bar {
		position: relative; pointer-events: auto;
		display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
		min-height: var(--header-bar-h);
		padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
		border-radius: max(12px, calc(var(--radius-sheet) - var(--header-gap))); /* concentric with the sheet */
		border: 1px solid rgb(255 255 255 / 0.08);
		background: var(--nav-bg); color: var(--color-paper);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 12px 32px -12px rgb(0 0 0 / 0.45);
		--color-focus: var(--color-focus-on-dark);
	}
	/* Glass: blur + saturate what's behind, a soft top sheen, a lit rim. */
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		.lw-header__bar {
			background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.01) 55%), var(--nav-glass);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			backdrop-filter: blur(20px) saturate(180%);
		}
	}
	.lw-header__bar::before {
		content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
		background: var(--nav-rim);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	}
	@media (prefers-reduced-transparency: reduce) {
		.lw-header__bar { background: var(--nav-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
	}
	.lw-brand { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
	.lw-brand__name { font-weight: var(--weight-bold); letter-spacing: -0.01em; }
	.lw-brand__logo { max-height: 2rem; width: auto; }

	.lw-nav-toggle {
		display: none; /* shown only when JS can drive it */
		align-items: center; justify-content: center;
		width: 44px; height: 44px; border-radius: 10px;
		background: transparent; border: var(--hairline-on-dark); color: var(--color-paper);
	}
	.lw-nav-toggle .lw-icon { width: 22px; height: 22px; }
	.lw-nav-toggle__close { display: none; }

	.lw-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
	.lw-nav__list a {
		display: inline-flex; align-items: center; min-height: 44px;
		padding-inline: var(--space-3); border-radius: 10px;
		color: var(--color-paper); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
	}
	.lw-nav__cta a { background: var(--gradient-accent); }

	/* Phones with JS: collapsible panel under the bar */
	@media (width < 56rem) {
		.lw-header__bar { flex-wrap: wrap; }
		html.js .lw-nav-toggle { display: inline-flex; }
		html.js .lw-nav { display: none; flex-basis: 100%; padding: var(--space-2) 0 var(--space-3); }
		html.js [data-open] .lw-nav { display: block; }
		html.js [data-open] .lw-header__bar { background: var(--nav-bg); }
		html.js [data-open] .lw-nav-toggle__open { display: none; }
		html.js [data-open] .lw-nav-toggle__close { display: block; }
		.lw-nav__list { flex-direction: column; }
		.lw-nav__list a { width: 100%; font-size: var(--text-base); }
	}

	/* Buttons: pill + icon tile */
	.lw-btn {
		display: inline-flex; align-items: center; gap: var(--space-3);
		min-height: 48px; padding: 6px 6px 6px var(--space-5);
		border-radius: var(--radius-pill); border: 1px solid transparent;
		font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; line-height: 1.2;
	}
	.lw-btn__tile {
		display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill);
		transition: transform var(--dur-fast) var(--ease-out);
	}
	.lw-btn__tile .lw-icon { width: 18px; height: 18px; }
	.lw-btn--primary { background: var(--gradient-accent); color: var(--color-paper); }

	/* Gradient buttons: a slow blue drift (transform on a 200%-wide layer,
	   stops repeat every 50% so the loop is seamless) and, on hover, a light
	   sweep. Stops never go lighter than --color-accent, so white text keeps
	   >= 5:1. The submit button of JFB forms gets the same surface. */
	:is(.lw-btn--primary, .lw-nav__cta a, .lw-form .jet-form-builder__action-button) {
		position: relative; isolation: isolate; overflow: hidden;
	}
	:is(.lw-btn--primary, .lw-form .jet-form-builder__action-button)::before {
		content: ""; position: absolute; inset: 0 auto 0 0; width: 200%; z-index: -1; pointer-events: none;
		background: linear-gradient(100deg, var(--color-accent-deep) 0%, var(--color-accent) 25%, var(--color-accent-deep) 50%, var(--color-accent) 75%, var(--color-accent-deep) 100%);
		animation: lw-drift 9s linear infinite;
	}
	:is(.lw-btn--primary, .lw-nav__cta a, .lw-form .jet-form-builder__action-button)::after {
		content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
		background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%);
		transform: translateX(-110%);
	}
	@keyframes lw-drift { to { transform: translateX(-50%); } }
	.lw-btn--primary .lw-btn__tile { background: var(--color-paper); color: var(--color-accent); }
	.lw-btn--secondary { border-color: currentColor; color: inherit; }
	.lw-btn--secondary .lw-btn__tile { background: var(--color-ink); color: var(--color-paper); }
	.lw-sheet--dark .lw-btn--secondary .lw-btn__tile { background: var(--color-paper); color: var(--color-ink); }
	.lw-btn:active .lw-btn__tile { transform: scale(0.94); }
	.lw-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

	/* Eyebrow pill */
	.lw-eyebrow {
		display: inline-flex; align-items: center; gap: var(--space-2);
		width: fit-content; justify-self: start;
		padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
		border: 1px solid var(--color-line); background: var(--color-paper);
		font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink);
	}
	.lw-eyebrow .lw-icon { width: 16px; height: 16px; color: var(--color-accent); }
	.lw-sheet--dark .lw-eyebrow { background: transparent; border: var(--hairline-on-dark); color: var(--color-paper); }
	.lw-sheet--dark .lw-eyebrow .lw-icon { color: var(--color-accent-on-dark); }

	/* Section head */
	.lw-section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); max-width: 46rem; }
	.lw-section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
	.lw-section-head--center .lw-eyebrow { justify-self: center; }
	.lw-section-head__title { font-size: var(--text-h2); }
	.lw-section-head__intro { font-size: var(--text-lg); color: var(--color-muted); }
	.lw-sheet--dark .lw-section-head__intro { color: var(--color-muted-on-dark); }

	/* Hero */
	.lw-hero { --pad: clamp(var(--space-8), 3rem + 6vw, 9rem); padding-block: var(--pad); }
	/* Inner stays container-wide so the text lines up with the header and the
	   sections below; the measure is capped per child instead. */
	.lw-hero__inner { display: grid; gap: var(--space-5); }
	.lw-hero__inner > * { max-width: 52rem; }
	/* Desktop shader canvas (hero-fx.js). Sits over the CSS glow, under the
	   content; fades itself in, never the hero. */
	.lw-hero__fx {
		position: absolute; inset: 0; z-index: -1; display: block;
		width: 100%; height: 100%; pointer-events: none;
		opacity: 0; transition: opacity 1600ms var(--ease-out);
	}
	.lw-hero__fx.is-ready { opacity: 1; }
	.lw-hero.has-fx::before { animation-play-state: paused; }

	/* First block on the page clears the floating header. */
	.lw-main > .lw-sheet:first-child {
		margin-top: var(--sheet-inset);
		padding-top: calc(var(--header-clearance) + var(--pad, var(--section-pad-block)) * 0.75);
	}
	.lw-main > :first-child:not(.lw-sheet) { padding-top: calc(var(--header-top) + var(--header-bar-h) + var(--section-pad-block)); }
	.lw-hero__title { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: -0.025em; }
	.lw-hero__lead { font-size: var(--text-lg); color: var(--color-muted-on-dark); max-width: 44rem; }
	.lw-hero__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--color-ink-raised); border: var(--hairline-on-dark); color: var(--color-accent-on-dark); }
	.lw-hero__icon .lw-icon { width: 28px; height: 28px; }

	/* Cards */
	.lw-card { position: relative; border-radius: var(--radius-md); padding: var(--space-5); }
	.lw-card--light {
		border: 1px solid transparent;
		background: linear-gradient(var(--color-paper), var(--color-paper)) padding-box, var(--border-gradient-card) border-box;
		box-shadow: var(--shadow-card);
	}
	.lw-card--dark {
		background: var(--color-ink-raised); color: var(--color-paper);
		border: var(--hairline-on-dark); box-shadow: var(--shadow-inner-glow);
	}

	/* Offering bento */
	.lw-offerings { display: grid; gap: var(--space-4); }
	.lw-offering { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); }
	.lw-offering__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
	.lw-offering__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--color-panel); color: var(--color-accent); }
	.lw-offering__icon .lw-icon { width: 26px; height: 26px; }
	.lw-offering__kind { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; }
	.lw-offering__title { font-size: var(--text-h3); }
	.lw-offering__title a { text-decoration: none; }
	.lw-offering__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
	.lw-offering__tagline { font-weight: var(--weight-semibold); }
	.lw-offering__summary { color: var(--color-muted); }
	.lw-offering__more { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-accent); font-size: var(--text-sm); }
	.lw-offering__more .lw-icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
	@media (width >= 48rem) {
		.lw-offerings { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
	}

	/* How it fits (loop) */
	.lw-loop { display: grid; gap: var(--space-4); counter-reset: loop; }
	.lw-loop__item { display: grid; gap: var(--space-3); align-content: start; }
	.lw-loop__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / 0.06); border: var(--hairline-on-dark); color: var(--color-accent-on-dark); }
	.lw-loop__icon .lw-icon { width: 24px; height: 24px; }
	.lw-loop__title { font-size: var(--text-lg); }
	.lw-loop__text { color: var(--color-muted-on-dark); }
	.lw-loop__closing { margin-top: var(--space-6); font-size: var(--text-lg); color: var(--color-muted-on-dark); }
	@media (width >= 40rem) { .lw-loop { grid-template-columns: repeat(2, 1fr); } }
	@media (width >= 64rem) { .lw-loop { grid-template-columns: repeat(4, 1fr); } }

	/* Clients */
	.lw-clients { display: grid; gap: var(--space-5); }
	.lw-client { padding: 0; overflow: hidden; display: grid; }
	.lw-client__media { aspect-ratio: 1.9; background: var(--color-panel); overflow: hidden; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
	.lw-client__media img { width: 100%; height: 100%; object-fit: cover; }
	.lw-client__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
	.lw-client__head { display: flex; align-items: center; gap: var(--space-3); }
	.lw-client__logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--color-paper); border: 1px solid var(--color-line); padding: 4px; }
	.lw-client__name { font-size: var(--text-h3); }
	.lw-client__summary { color: var(--color-muted); }
	.lw-client__uses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
	.lw-client__uses li { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); padding: 2px var(--space-3) 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-panel); }
	.lw-client__uses .lw-icon { width: 16px; height: 16px; color: var(--color-accent); }
	.lw-client__link { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-accent); }
	@media (width >= 48rem) { .lw-clients { grid-template-columns: repeat(2, 1fr); } }

	/* Steps */
	.lw-steps { display: grid; gap: var(--space-4); }
	.lw-steps__item { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
	.lw-sheet--dark .lw-steps__item { border-top: var(--hairline-on-dark); }
	.lw-steps__num { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-accent); letter-spacing: 0.08em; }
	.lw-sheet--dark .lw-steps__num { color: var(--color-accent-on-dark); }
	.lw-steps__title { font-size: var(--text-lg); }
	.lw-steps__text { color: var(--color-muted); }
	.lw-sheet--dark .lw-steps__text { color: var(--color-muted-on-dark); }
	@media (width >= 40rem) { .lw-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
	@media (width >= 64rem) { .lw-steps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }

	/* Features */
	.lw-features { display: grid; gap: var(--space-4); }
	.lw-features__item { display: grid; gap: var(--space-2); align-content: start; }
	.lw-features__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-panel); color: var(--color-accent); margin-bottom: var(--space-2); }
	.lw-features--dark .lw-features__icon { background: rgb(255 255 255 / 0.06); color: var(--color-accent-on-dark); }
	.lw-features__icon .lw-icon { width: 22px; height: 22px; }
	.lw-features__title { font-size: var(--text-lg); }
	.lw-features__text { color: var(--color-muted); }
	.lw-features--dark .lw-features__text { color: var(--color-muted-on-dark); }
	@media (width >= 40rem) { .lw-features { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-5); } }

	/* FAQ: native <details>, progressive height animation */
	.lw-faq { display: grid; gap: var(--space-3); max-width: 52rem; }
	.lw-faq__item { border-radius: var(--radius-md); background: var(--color-paper); border: 1px solid var(--color-line); }
	.lw-faq__q {
		display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
		padding: var(--space-4) var(--space-5); min-height: 56px;
		font-weight: var(--weight-semibold); cursor: pointer; list-style: none;
	}
	.lw-faq__q::-webkit-details-marker { display: none; }
	.lw-faq__icon { flex: none; width: 20px; height: 20px; color: var(--color-accent); }
	.lw-faq__item[open] .lw-faq__icon { transform: rotate(45deg); }
	.lw-faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-muted); }
	@media (prefers-reduced-motion: no-preference) {
		.lw-faq__icon { transition: transform var(--dur-base) var(--ease-out); }
		@supports (interpolate-size: allow-keywords) {
			.lw-faq { interpolate-size: allow-keywords; }
			.lw-faq__item::details-content { height: 0; overflow: clip; transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
			.lw-faq__item[open]::details-content { height: auto; }
		}
	}

	/* Forms (JetFormBuilder markup inside .lw-form) */
	.lw-form .jet-form-builder { display: grid; gap: var(--space-4); }
	.lw-form .jet-form-builder-row { display: grid; gap: var(--space-2); }
	.lw-form .jet-form-builder__label-text { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
	.lw-form .jet-form-builder__required { color: var(--color-accent); }
	.lw-form :is(input:not([type="hidden"]), textarea, select) {
		width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
		font-size: max(16px, 1rem); color: var(--color-ink);
		background: var(--color-field); border: 1px solid var(--color-field-border); border-radius: 12px;
	}
	.lw-form textarea { min-height: 9rem; resize: vertical; }
	.lw-form :is(input, textarea, select):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; background: var(--color-paper); }
	.lw-form .jet-form-builder__action-button {
		min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-pill);
		background: var(--gradient-accent); color: var(--color-paper); font-weight: var(--weight-semibold);
	}

	/* Contact layout */
	.lw-contact { display: grid; gap: var(--space-6); }
	.lw-contact__details { display: grid; gap: var(--space-4); align-content: start; }
	.lw-contact__details dt { font-size: var(--text-sm); color: var(--color-muted); }
	.lw-contact__details dd { font-weight: var(--weight-semibold); }
	.lw-contact__context { padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--color-panel); font-weight: var(--weight-medium); }
	@media (width >= 56rem) { .lw-contact { grid-template-columns: 3fr 2fr; gap: var(--space-8); } }

	/* Text block (two columns on wide screens) */
	.lw-split { display: grid; gap: var(--space-5); }
	.lw-split__title { font-size: var(--text-h2); }
	@media (width >= 56rem) { .lw-split { grid-template-columns: 2fr 3fr; gap: var(--space-8); align-items: start; } }

	/* Person (founder / team member): photo stacks above on phones */
	.lw-person { display: grid; gap: var(--space-6); align-items: start; }
	.lw-person__photo { margin: 0; max-width: 22rem; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--color-panel); }
	.lw-person__photo img { width: 100%; height: 100%; object-fit: cover; }
	.lw-person__name { font-size: var(--text-h3); }
	.lw-person__role { margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
	.lw-person__facts { display: grid; gap: var(--space-2); }
	.lw-person__facts li { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: var(--weight-medium); }
	.lw-person__facts .lw-icon { flex: none; width: 20px; height: 20px; margin-top: 0.2em; color: var(--color-accent); }
	@media (width >= 48rem) { .lw-person { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: var(--space-8); } }

	/* About: lead paragraph + two-column story */
	.lw-about__lead { font-size: var(--text-lg); color: var(--color-muted); }
	.lw-about__story { display: grid; gap: var(--space-7); }
	@media (width >= 56rem) { .lw-about__story { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

	/* CTA band */
	.lw-cta__inner { display: grid; gap: var(--space-4); justify-items: start; }
	.lw-cta__inner > * { max-width: 46rem; }
	.lw-cta__title { font-size: var(--text-h2); }
	.lw-cta__text { font-size: var(--text-lg); color: var(--color-muted-on-dark); }

	/* Footer */
	.lw-footer { padding-block: var(--space-8) var(--space-6); font-size: var(--text-sm); color: var(--color-muted); }
	.lw-footer__grid { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-line); }
	.lw-footer__name { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-ink); }
	.lw-footer__contact, .lw-footer__socials { display: grid; gap: var(--space-2); }
	.lw-footer__contact a, .lw-footer__socials a, .lw-footer__nav a { color: var(--color-ink); }
	.lw-footer__nav ul { display: grid; gap: var(--space-2); }
	.lw-footer__legal a { color: var(--color-ink); }
	.lw-footer__legal { padding-top: var(--space-5); }
	@media (width >= 48rem) { .lw-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

	/* Hover: pointer devices only */
	@media (hover: hover) and (pointer: fine) {
		.lw-nav__list a { transition: background-color var(--dur-fast) ease; }
		.lw-nav__list a:hover { background: rgb(255 255 255 / 0.08); }
		:is(.lw-btn--primary, .lw-nav__cta a, .lw-form .jet-form-builder__action-button)::after { transition: transform 700ms var(--ease-out); }
		:is(.lw-btn--primary, .lw-nav__cta a, .lw-form .jet-form-builder__action-button):hover::after { transform: translateX(110%); }
		.lw-btn:hover .lw-btn__tile { transform: translateX(3px); }
		.lw-offering, .lw-client { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
		.lw-offering:hover, .lw-client:hover { transform: translateY(-3px); }
		.lw-offering:hover .lw-offering__more .lw-icon { transform: translateX(3px); }
	}
}

/* ------------------------------------------------------------- utilities */
@layer utilities {
	.lw-visually-hidden {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.lw-muted { color: var(--color-muted); }
}

/*
 * Third-party overrides. Deliberately UNLAYERED: plugin CSS (e.g. JetFormBuilder)
 * is unlayered, and unlayered rules beat every @layer rule regardless of
 * specificity. Keep this block small and scoped.
 */
.lw-form .jet-form-builder-row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
.lw-form .jet-form-builder__label,
.lw-form .jet-form-builder__field-wrap { flex: none; width: 100%; max-width: 100%; }
/* JFB's own message is a green-bordered box; restyle it to the brand. */
.lw-form .jet-form-builder-message {
	padding: var(--space-4) var(--space-5); border-radius: 12px; border: 1px solid var(--color-line);
	background: var(--color-paper); color: var(--color-ink); font-weight: var(--weight-medium); text-align: start;
}
.lw-form .jet-form-builder-message--success {
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
	background: color-mix(in srgb, var(--color-accent) 6%, var(--color-paper));
}
.lw-form .jet-form-builder-message--error { border-color: var(--color-error); background: var(--color-error-bg); color: var(--color-error); }

/* Reduced motion: gentler, not necessarily none */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}