/* ==========================================================================
   Laraib Organic — pages.css
   Static content pages: generic page, About, Our Process, Quality &
   Certifications, Contact, FAQ and 404 — plus the shared long-form
   `.lo-prose` reading style every one of them uses.

   RULES OBEYED
   • Colours only from --lo-* tokens (tokens.css). No raw hex.
   • Rhythm from --lo-s1…--lo-s11 / --lo-section-y.
   • .lo-btn, .lo-badge, .lo-card, .lo-acc, .lo-notice, forms, .lo-media-frame
     and .lo-ornament all come from tokens.css / components.css — never
     redefined here, only composed.
   • Breakpoints: 1200 / 1024 / 860 / 620 / 430.

   ⚠ ONE DELIBERATE ODDITY
   `motion.css` (which loads AFTER this file) owns `.lo-split` as a *split-text*
   helper and sets `display:inline` on the <span> its JS injects into headings.
   Our image/text row shares the block name because `motion.js` already looks
   for `.lo-split__media` to give it a curtain reveal. The base rule below is
   therefore written as `.lo-split:not(span)` — specificity 0,1,1 beats
   motion's 0,1,0 without touching another agent's file, and never matches the
   injected span.
   ========================================================================== */


/* ==========================================================================
   1. Long-form prose — the shared reading style
   ========================================================================== */

.lo-prose {
	max-width: 72ch;
	color: var(--lo-text-soft);
	font-size: var(--lo-fs-md);
	line-height: 1.78;
}

.lo-prose--full { max-width: none; }
.lo-prose--center { margin-inline: auto; }

.lo-prose > *:first-child { margin-top: 0; }
.lo-prose > *:last-child { margin-bottom: 0; }

/* --- headings ----------------------------------------------------------- */
.lo-prose h2,
.lo-prose h3,
.lo-prose h4,
.lo-prose h5,
.lo-prose h6 {
	color: var(--lo-text);
	margin-top: var(--lo-s8);
	margin-bottom: var(--lo-s4);
	scroll-margin-top: calc(var(--lo-header-h) + 32px);
}

.lo-prose h2 {
	font-size: var(--lo-fs-2xl);
	line-height: 1.18;
	letter-spacing: -.018em;
	position: relative;
	padding-top: var(--lo-s5);
}
/* A hairline gold rule sets each major section apart without a heavy border. */
.lo-prose h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--lo-gold-500), var(--lo-gold-300));
}
.lo-prose > h2:first-child { padding-top: 0; }
.lo-prose > h2:first-child::before { display: none; }

.lo-prose h3 { font-size: var(--lo-fs-xl); margin-top: var(--lo-s7); }
.lo-prose h4 { font-size: var(--lo-fs-lg); margin-top: var(--lo-s6); }
.lo-prose h5,
.lo-prose h6 {
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-sm);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lo-green-800);
	margin-top: var(--lo-s6);
	margin-bottom: var(--lo-s3);
}

/* --- body copy ---------------------------------------------------------- */
.lo-prose p { margin-bottom: var(--lo-s5); }

.lo-prose > p.has-large-font-size,
.lo-prose > p:first-of-type.is-lede {
	font-size: var(--lo-fs-lg);
	line-height: 1.62;
	color: var(--lo-green-900);
	font-weight: 500;
}

.lo-prose strong, .lo-prose b { color: var(--lo-text); font-weight: 700; }
.lo-prose em, .lo-prose i { font-style: italic; }
.lo-prose small { font-size: var(--lo-fs-sm); color: var(--lo-muted); }
.lo-prose mark {
	background: var(--lo-gold-100);
	color: var(--lo-green-950);
	padding: 1px 5px;
	border-radius: 4px;
}
.lo-prose abbr[title] { text-decoration-color: var(--lo-gold-500); cursor: help; }

/* Links: motion.css animates the underline, so only colour + weight here. */
.lo-prose a:not(.lo-btn) {
	color: var(--lo-green-700);
	font-weight: 600;
}
.lo-prose a:not(.lo-btn):hover { color: var(--lo-gold-600); }

/* --- lists -------------------------------------------------------------- */
.lo-prose ul,
.lo-prose ol {
	margin: 0 0 var(--lo-s5);
	padding-left: 0;
	list-style: none;
}
.lo-prose li {
	position: relative;
	margin-bottom: var(--lo-s3);
	padding-left: 30px;
}
.lo-prose li:last-child { margin-bottom: 0; }

.lo-prose ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lo-gold-500);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lo-gold-500) 16%, transparent);
}

.lo-prose ol { counter-reset: lo-prose-ol; }
.lo-prose ol > li { counter-increment: lo-prose-ol; padding-left: 36px; }
.lo-prose ol > li::before {
	content: counter(lo-prose-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 700;
	color: var(--lo-green-700);
	line-height: 1.78;
}

.lo-prose li > ul,
.lo-prose li > ol { margin: var(--lo-s3) 0 0; }

/* --- quotes ------------------------------------------------------------- */
.lo-prose blockquote {
	position: relative;
	margin: var(--lo-s7) 0;
	padding: var(--lo-s6) var(--lo-s7);
	border: 0;
	border-left: 3px solid var(--lo-gold-500);
	border-radius: 0 var(--lo-r-lg) var(--lo-r-lg) 0;
	background: linear-gradient(120deg, var(--lo-green-50), var(--lo-cream));
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	font-style: italic;
	line-height: 1.55;
	color: var(--lo-green-900);
}
.lo-prose blockquote p { margin-bottom: var(--lo-s3); }
.lo-prose blockquote p:last-child { margin-bottom: 0; }
.lo-prose blockquote cite {
	display: block;
	margin-top: var(--lo-s4);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-sm);
	font-style: normal;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lo-gold-700);
}

/* --- media -------------------------------------------------------------- */
.lo-prose img,
.lo-prose video {
	border-radius: var(--lo-r-lg);
	box-shadow: var(--lo-shadow);
}

.lo-prose figure {
	margin: var(--lo-s7) 0;
}
.lo-prose figure img { width: 100%; }
.lo-prose figcaption,
.lo-prose .wp-caption-text {
	margin-top: var(--lo-s3);
	font-size: var(--lo-fs-sm);
	line-height: 1.6;
	color: var(--lo-muted);
	text-align: center;
	font-style: italic;
}

.lo-prose .alignwide { max-width: min(1100px, 100vw - (var(--lo-gutter) * 2)); }
.lo-prose .alignfull img { border-radius: 0; }

/* --- tables ------------------------------------------------------------- */
.lo-prose table {
	width: 100%;
	margin: var(--lo-s6) 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r);
	overflow: hidden;
	font-size: var(--lo-fs-base);
	background: var(--lo-surface);
}
.lo-prose thead th {
	background: var(--lo-green-900);
	color: var(--lo-paper);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 0;
}
.lo-prose th,
.lo-prose td {
	padding: 13px 18px;
	border-bottom: 1px solid var(--lo-line-soft);
	vertical-align: top;
}
.lo-prose tbody tr:last-child th,
.lo-prose tbody tr:last-child td { border-bottom: 0; }
.lo-prose tbody tr:nth-child(even) { background: var(--lo-green-50); }

/* --- code --------------------------------------------------------------- */
.lo-prose code,
.lo-prose kbd {
	padding: 2px 7px;
	border-radius: var(--lo-r-sm);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-line-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	color: var(--lo-green-800);
}
.lo-prose pre {
	margin: var(--lo-s6) 0;
	padding: var(--lo-s5) var(--lo-s6);
	border-radius: var(--lo-r-lg);
	background: var(--lo-green-950);
	color: var(--lo-green-100);
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--lo-fs-sm);
	line-height: 1.7;
	box-shadow: var(--lo-shadow);
}
.lo-prose pre code {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: inherit;
}

.lo-prose hr {
	margin: var(--lo-s8) 0;
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--lo-line), transparent);
}

.lo-prose dl { margin: 0 0 var(--lo-s5); }
.lo-prose dt { font-weight: 700; color: var(--lo-text); margin-top: var(--lo-s4); }
.lo-prose dd { margin: var(--lo-s1) 0 0; padding-left: var(--lo-s5); }

/* Dark-section prose (used inside the CTA band) */
.lo-section--dark .lo-prose { color: color-mix(in srgb, var(--lo-paper) 78%, transparent); }
.lo-section--dark .lo-prose strong { color: var(--lo-paper); }
.lo-section--dark .lo-prose a:not(.lo-btn) { color: var(--lo-gold-300); }

@media (max-width: 620px) {
	.lo-prose { font-size: var(--lo-fs-base); }
	.lo-prose blockquote { padding: var(--lo-s5); }
	.lo-prose pre { padding: var(--lo-s4); }
	.lo-prose table { display: block; overflow-x: auto; }
}


/* ==========================================================================
   2. Page shell — generic page.php + shared page furniture
   ========================================================================== */

.lo-pagebody { position: relative; }

.lo-pagebody__layout {
	display: grid;
	gap: clamp(40px, 5vw, 88px);
	align-items: start;
}
.lo-pagebody__layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }

/* Without a sidebar the reading column would otherwise hug the left edge of a
   1320px container. Centre it so a standalone policy page still looks composed. */
.lo-pagebody__layout:not(.lo-pagebody__layout--sidebar) .lo-pagebody__main {
	max-width: 840px;
	margin-inline: auto;
	width: 100%;
}

.lo-pagebody__aside { position: sticky; top: calc(var(--lo-header-h) + 28px); }

.lo-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s2);
	margin-top: var(--lo-s7);
	padding-top: var(--lo-s5);
	border-top: 1px solid var(--lo-line);
	font-size: var(--lo-fs-sm);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lo-muted);
}
.lo-pagelinks a,
.lo-pagelinks > span:not(:first-child) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--lo-line);
	border-radius: var(--lo-r-pill);
	color: var(--lo-green-800);
}
.lo-pagelinks a:hover { background: var(--lo-green-900); border-color: var(--lo-green-900); color: var(--lo-paper); }

/* --- previous / next page navigation ----------------------------------- */
.lo-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lo-s5);
	margin-top: clamp(48px, 5vw, 80px);
	padding-top: var(--lo-s7);
	border-top: 1px solid var(--lo-line);
}

.lo-postnav__item {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	padding: var(--lo-s5);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	box-shadow: var(--lo-shadow-xs);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-postnav__item:hover { transform: translateY(-4px); box-shadow: var(--lo-shadow-lg); border-color: transparent; }
.lo-postnav__item--next { flex-direction: row-reverse; text-align: right; }

.lo-postnav__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lo-green-50);
	color: var(--lo-green-800);
	transition: background-color .28s var(--lo-ease), color .28s var(--lo-ease), transform .34s var(--lo-ease-out);
}
.lo-postnav__item:hover .lo-postnav__ico { background: var(--lo-gold-500); color: var(--lo-green-950); }
.lo-postnav__item--prev:hover .lo-postnav__ico { transform: translateX(-3px); }
.lo-postnav__item--next:hover .lo-postnav__ico { transform: translateX(3px); }

.lo-postnav__body { min-width: 0; }
.lo-postnav__kicker {
	display: block;
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
	margin-bottom: 4px;
}
.lo-postnav__title {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	line-height: 1.35;
	color: var(--lo-text);
}

@media (max-width: 1024px) {
	.lo-pagebody__layout--sidebar { grid-template-columns: minmax(0, 1fr); }
	.lo-pagebody__aside { position: static; }
}
@media (max-width: 620px) {
	.lo-postnav { grid-template-columns: minmax(0, 1fr); gap: var(--lo-s4); }
	.lo-postnav__item--next { flex-direction: row; text-align: left; }
}


/* ==========================================================================
   3. .lo-split — the image / text row (see note at top of file)
   ========================================================================== */

.lo-split:not(span) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 88px);
}

.lo-split--media-lg:not(span) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.lo-split + .lo-split { margin-top: clamp(56px, 7vw, 116px); }

.lo-split__media { position: relative; }
.lo-split--reverse .lo-split__media { order: 2; }

/* Layered depth: a soft offset frame behind the photo. */
.lo-split__media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border-radius: var(--lo-r-xl);
	border: 1px solid var(--lo-gold-300);
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}
.lo-split--reverse .lo-split__media::before { inset: 22px 22px -22px -22px; }
.lo-split__media > * { position: relative; z-index: 1; }

.lo-split__figure {
	border-radius: var(--lo-r-xl);
	box-shadow: var(--lo-shadow-lg);
}
.lo-split__figure img { width: 100%; }
.lo-split:hover .lo-split__figure img { transform: scale(1.045); }

/* Floating stat / caption chip on the photo */
.lo-split__chip {
	position: absolute;
	right: -14px;
	bottom: -22px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	max-width: 260px;
	padding: 14px 20px;
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-lg);
}
.lo-split--reverse .lo-split__chip { right: auto; left: -14px; }
.lo-split__chip svg { color: var(--lo-gold-600); }
.lo-split__chip strong {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	color: var(--lo-text);
	line-height: 1.2;
}
.lo-split__chip span {
	display: block;
	font-size: var(--lo-fs-xs);
	line-height: 1.45;
	color: var(--lo-muted);
}

.lo-split__body { min-width: 0; }
.lo-split__body .lo-head { margin-bottom: var(--lo-s5); }

/* Big step number for the process rows */
.lo-split__step {
	display: flex;
	align-items: baseline;
	gap: var(--lo-s4);
	margin-bottom: var(--lo-s4);
}
.lo-split__num {
	font-family: var(--lo-font-display);
	font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
	font-weight: 600;
	line-height: .86;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.4px var(--lo-gold-500);
	text-shadow: none;
}
.lo-split__steplabel {
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}

.lo-split__title {
	font-size: var(--lo-fs-2xl);
	margin-bottom: var(--lo-s4);
}
.lo-split__text {
	font-size: var(--lo-fs-md);
	line-height: 1.75;
	color: var(--lo-text-soft);
	margin-bottom: var(--lo-s5);
}

/* Spec list beside a step */
.lo-split__specs {
	margin: 0 0 var(--lo-s5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--lo-s3);
}
.lo-split__specs li {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--lo-s4);
	margin: 0;
	padding-bottom: var(--lo-s3);
	border-bottom: 1px dashed var(--lo-line);
	font-size: var(--lo-fs-base);
	line-height: 1.6;
}
.lo-split__specs li:last-child { border-bottom: 0; padding-bottom: 0; }
.lo-split__specs dt,
.lo-split__specs .lo-split__spec-k {
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lo-green-800);
	padding-top: 2px;
}
.lo-split__specs .lo-split__spec-v { color: var(--lo-text-soft); }

.lo-split__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s4);
}

@media (max-width: 860px) {
	.lo-split:not(span) { grid-template-columns: minmax(0, 1fr); gap: var(--lo-s7); }
	.lo-split--reverse .lo-split__media { order: 0; }
	.lo-split__media::before { display: none; }
	.lo-split__chip,
	.lo-split--reverse .lo-split__chip {
		position: static;
		max-width: none;
		margin-top: var(--lo-s4);
		box-shadow: var(--lo-shadow-sm);
	}
}
@media (max-width: 620px) {
	.lo-split__specs li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* ==========================================================================
   4. .lo-timeline — milestone rail
   ========================================================================== */

.lo-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/* The rail itself */
.lo-timeline::before {
	content: "";
	position: absolute;
	left: 118px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--lo-gold-500) 0%, transparent),
		var(--lo-gold-300) 12%,
		var(--lo-green-200) 88%,
		color-mix(in srgb, var(--lo-green-200) 0%, transparent));
}

.lo-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 100px 38px minmax(0, 1fr);
	align-items: start;
	gap: 0 var(--lo-s5);
	margin: 0;
	padding: 0 0 var(--lo-s8);
}
.lo-timeline__item:last-child { padding-bottom: 0; }

.lo-timeline__year {
	grid-column: 1;
	justify-self: end;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--lo-green-900);
	padding-top: 2px;
	white-space: nowrap;
}

.lo-timeline__dot {
	grid-column: 2;
	justify-self: center;
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--lo-surface);
	border: 1px solid var(--lo-line);
	color: var(--lo-green-700);
	box-shadow: var(--lo-shadow-xs);
	transition:
		background-color .3s var(--lo-ease),
		color .3s var(--lo-ease),
		border-color .3s var(--lo-ease),
		transform .4s var(--lo-ease-out),
		box-shadow .4s var(--lo-ease-out);
}
.lo-timeline__item:hover .lo-timeline__dot,
.lo-timeline__item.is-current .lo-timeline__dot {
	background: linear-gradient(135deg, var(--lo-gold-400), var(--lo-gold-600));
	border-color: transparent;
	color: var(--lo-green-950);
	transform: scale(1.12);
	box-shadow: var(--lo-shadow-gold);
}

.lo-timeline__body {
	grid-column: 3;
	padding: 0 0 0 0;
}
.lo-timeline__title {
	font-size: var(--lo-fs-lg);
	margin-bottom: var(--lo-s2);
	color: var(--lo-text);
}
.lo-timeline__text {
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.72;
	color: var(--lo-text-soft);
	max-width: 62ch;
}
.lo-timeline__tag {
	display: inline-flex;
	margin-top: var(--lo-s3);
}

@media (max-width: 860px) {
	.lo-timeline::before { left: 18px; }
	.lo-timeline__item {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 0 var(--lo-s4);
		padding-bottom: var(--lo-s7);
	}
	.lo-timeline__dot { grid-column: 1; grid-row: 1; }
	.lo-timeline__year {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		font-size: var(--lo-fs-lg);
		padding-top: 6px;
		margin-bottom: var(--lo-s2);
	}
	.lo-timeline__body { grid-column: 2; grid-row: 2; }
}


/* ==========================================================================
   5. .lo-valuegrid / .lo-value  (motion.js auto-staggers .lo-value)
   ========================================================================== */

.lo-valuegrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s5);
}

.lo-value {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.4vw, 38px);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
/* Gold wash that rises on hover — layered, not a flat colour flip. */
.lo-value::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 60%;
	z-index: -1;
	background: linear-gradient(to top, var(--lo-gold-100), transparent);
	opacity: 0;
	transform: translateY(28%);
	transition: opacity .45s var(--lo-ease), transform .55s var(--lo-ease-out);
}
.lo-value:hover {
	transform: translateY(-6px);
	box-shadow: var(--lo-shadow-lg);
	border-color: transparent;
}
.lo-value:hover::after { opacity: 1; transform: translateY(0); }

.lo-value__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--lo-s5);
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
	color: var(--lo-green-700);
	transition: background-color .34s var(--lo-ease), color .34s var(--lo-ease), transform .45s var(--lo-ease-out);
}
.lo-value:hover .lo-value__ico {
	background: var(--lo-green-900);
	color: var(--lo-gold-400);
	transform: rotate(-6deg) scale(1.06);
}

.lo-value__num {
	position: absolute;
	top: 14px;
	right: 20px;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-2xl);
	font-weight: 700;
	line-height: 1;
	color: var(--lo-line);
	transition: color .34s var(--lo-ease);
}
.lo-value:hover .lo-value__num { color: var(--lo-gold-300); }

.lo-value__title {
	font-size: var(--lo-fs-lg);
	margin-bottom: var(--lo-s3);
	color: var(--lo-text);
}
.lo-value__text {
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-text-soft);
}

@media (max-width: 1024px) {
	.lo-valuegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.lo-valuegrid { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   6. .lo-gallery-strip — factory photo band
   ========================================================================== */

.lo-gallery-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s4);
}

.lo-gallery-strip__item {
	position: relative;
	display: block;
	border-radius: var(--lo-r-lg);
	overflow: hidden;
	box-shadow: var(--lo-shadow-sm);
	transition: transform var(--lo-dur) var(--lo-ease-out), box-shadow var(--lo-dur) var(--lo-ease-out);
}
.lo-gallery-strip__item:hover { transform: translateY(-6px); box-shadow: var(--lo-shadow-lg); }

.lo-gallery-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform .9s var(--lo-ease-out);
}
.lo-gallery-strip__item:hover img { transform: scale(1.07); }

/* Caption sits in a gradient veil that only fully arrives on hover. */
.lo-gallery-strip__cap {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--lo-s7) var(--lo-s4) var(--lo-s4);
	background: linear-gradient(to top,
		color-mix(in srgb, var(--lo-green-950) 88%, transparent),
		color-mix(in srgb, var(--lo-green-950) 34%, transparent) 55%,
		transparent);
	color: var(--lo-paper);
}
.lo-gallery-strip__cap strong {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	line-height: 1.25;
}
.lo-gallery-strip__cap span {
	display: block;
	margin-top: 3px;
	font-size: var(--lo-fs-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lo-gold-300);
	opacity: .9;
}

@media (max-width: 860px) {
	.lo-gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
	.lo-gallery-strip { grid-template-columns: minmax(0, 1fr); }
	.lo-gallery-strip__item img { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   7. .lo-ctaband — closing call-to-action band
   ========================================================================== */

.lo-ctaband {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--lo-green-950);
}

.lo-ctaband__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.lo-ctaband__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
}
.lo-ctaband__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 18% 20%, color-mix(in srgb, var(--lo-green-900) 82%, transparent), transparent 62%),
		linear-gradient(100deg,
			color-mix(in srgb, var(--lo-green-950) 94%, transparent) 12%,
			color-mix(in srgb, var(--lo-green-950) 66%, transparent) 62%,
			color-mix(in srgb, var(--lo-green-950) 88%, transparent));
}

.lo-ctaband__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	padding-block: clamp(48px, 5vw, 88px);
}

.lo-ctaband__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	margin-bottom: var(--lo-s3);
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lo-gold-400);
}
.lo-ctaband__title {
	font-size: var(--lo-fs-3xl);
	color: var(--lo-paper);
	margin-bottom: var(--lo-s4);
	max-width: 18ch;
}
.lo-ctaband__title .lo-accent { color: var(--lo-gold-400); }
.lo-ctaband__text {
	margin: 0;
	max-width: 56ch;
	font-size: var(--lo-fs-md);
	line-height: 1.72;
	color: color-mix(in srgb, var(--lo-paper) 74%, transparent);
}

.lo-ctaband__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lo-s5);
	padding: clamp(24px, 2.6vw, 38px);
	border-radius: var(--lo-r-xl);
	background: color-mix(in srgb, var(--lo-paper) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--lo-paper) 16%, transparent);
	backdrop-filter: blur(10px);
}
.lo-ctaband__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lo-s3);
}
.lo-ctaband__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--lo-s3);
	width: 100%;
}
.lo-ctaband__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s3);
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.55;
	color: color-mix(in srgb, var(--lo-paper) 78%, transparent);
}
.lo-ctaband__points svg { color: var(--lo-gold-400); margin-top: 2px; }

.lo-ctaband__sign {
	margin: 0;
	padding-top: var(--lo-s4);
	border-top: 1px solid color-mix(in srgb, var(--lo-paper) 14%, transparent);
	width: 100%;
	color: var(--lo-gold-300);
	font-size: var(--lo-fs-base);
}

/* The side panel used on its own (FAQ footer) needs a real background of its
   own, since there is no photographic band behind it. */
.lo-ctaband__side--solid {
	background: linear-gradient(140deg, var(--lo-green-900), var(--lo-green-950) 68%);
	border-color: color-mix(in srgb, var(--lo-gold-400) 26%, transparent);
	box-shadow: var(--lo-shadow-lg);
	margin-top: clamp(48px, 6vw, 88px);
}
.lo-ctaband__title--sm { font-size: var(--lo-fs-2xl); max-width: 22ch; }

@media (max-width: 860px) {
	.lo-ctaband__inner { grid-template-columns: minmax(0, 1fr); }
	.lo-ctaband__title { max-width: none; }
	.lo-ctaband__side { width: 100%; }
}


/* ==========================================================================
   8. .lo-contactcard — address / phone / email tiles
   ========================================================================== */

.lo-contactcards {
	display: grid;
	gap: var(--lo-s4);
}

.lo-contactcard {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s4);
	padding: clamp(20px, 2.2vw, 28px);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-contactcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--lo-shadow);
	border-color: var(--lo-green-200);
}

.lo-contactcard__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
	color: var(--lo-green-700);
	transition: background-color .3s var(--lo-ease), color .3s var(--lo-ease);
}
.lo-contactcard:hover .lo-contactcard__ico {
	background: var(--lo-green-900);
	color: var(--lo-gold-400);
	border-color: transparent;
}
.lo-contactcard--gold .lo-contactcard__ico {
	background: var(--lo-gold-100);
	border-color: var(--lo-gold-300);
	color: var(--lo-gold-700);
}

.lo-contactcard__body { flex: 1 1 auto; min-width: 0; }
.lo-contactcard__title {
	display: block;
	margin-bottom: 5px;
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}
.lo-contactcard__value {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	line-height: 1.45;
	color: var(--lo-text);
	word-break: break-word;
}
.lo-contactcard__value a { color: inherit; }
.lo-contactcard__value a:hover { color: var(--lo-gold-600); }
.lo-contactcard__note {
	display: block;
	margin-top: 6px;
	font-size: var(--lo-fs-sm);
	line-height: 1.55;
	color: var(--lo-muted);
}


/* ==========================================================================
   9. .lo-maplite — a drawn map placeholder (no external embed, ever)
   ========================================================================== */

.lo-maplite {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--lo-r-lg);
	border: 1px solid var(--lo-green-100);
	background:
		radial-gradient(140% 120% at 78% 12%, var(--lo-green-100), transparent 58%),
		linear-gradient(160deg, var(--lo-green-50), var(--lo-sand));
}

/* Faint street grid, drawn entirely with gradients. */
.lo-maplite::before {
	content: "";
	position: absolute;
	inset: -10%;
	z-index: -1;
	background-image:
		linear-gradient(var(--lo-line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--lo-line-soft) 1px, transparent 1px),
		linear-gradient(115deg, transparent 47.4%, var(--lo-line) 47.4% 48.2%, transparent 48.2%),
		linear-gradient(-58deg, transparent 62.4%, var(--lo-line) 62.4% 63.1%, transparent 63.1%);
	background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
	opacity: .85;
}

.lo-maplite__pin {
	position: absolute;
	top: 34%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--lo-green-900);
	color: var(--lo-gold-400);
	box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--lo-green-950) 65%, transparent);
}
/* Pulsing halo — pure CSS, respects the reduced-motion reset in tokens.css. */
.lo-maplite__pin::before,
.lo-maplite__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--lo-green-500);
	animation: lo-map-pulse 3.2s var(--lo-ease-out) infinite;
}
.lo-maplite__pin::after { animation-delay: 1.6s; }

@keyframes lo-map-pulse {
	0%   { transform: scale(1);   opacity: .75; }
	100% { transform: scale(2.5); opacity: 0; }
}

.lo-maplite__card {
	position: relative;
	z-index: 1;
	padding: var(--lo-s5);
	border-radius: var(--lo-r);
	background: color-mix(in srgb, var(--lo-paper) 92%, transparent);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-sm);
	backdrop-filter: blur(6px);
}
.lo-maplite__label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}
.lo-maplite__addr {
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.6;
	color: var(--lo-text);
	font-weight: 500;
}
.lo-maplite__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lo-s2) var(--lo-s4);
	margin-top: var(--lo-s3);
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}
.lo-maplite__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lo-maplite__meta svg { color: var(--lo-green-600); }


/* ==========================================================================
   10. .lo-spectable — the QC test table
   ========================================================================== */

.lo-spectable {
	width: 100%;
	overflow-x: auto;
	border-radius: var(--lo-r-lg);
	border: 1px solid var(--lo-line);
	background: var(--lo-surface);
	box-shadow: var(--lo-shadow-sm);
	-webkit-overflow-scrolling: touch;
}

.lo-spectable table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--lo-fs-base);
}

.lo-spectable thead th {
	position: sticky;
	top: 0;
	padding: 16px 22px;
	background: var(--lo-green-900);
	color: var(--lo-paper);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 0;
	white-space: nowrap;
}

.lo-spectable tbody tr {
	transition: background-color .24s var(--lo-ease);
}
.lo-spectable tbody tr:nth-child(even) { background: var(--lo-green-50); }
.lo-spectable tbody tr:hover { background: var(--lo-gold-100); }

.lo-spectable td,
.lo-spectable tbody th {
	padding: 15px 22px;
	border-bottom: 1px solid var(--lo-line-soft);
	vertical-align: top;
	line-height: 1.6;
	color: var(--lo-text-soft);
}
.lo-spectable tbody tr:last-child td,
.lo-spectable tbody tr:last-child th { border-bottom: 0; }

.lo-spectable tbody th {
	text-align: left;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	color: var(--lo-text);
	white-space: nowrap;
}
.lo-spectable__spec { font-variant-numeric: tabular-nums; color: var(--lo-green-800); font-weight: 600; }
.lo-spectable__why { max-width: 42ch; }

.lo-spectable__foot {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s3);
	margin-top: var(--lo-s4);
	font-size: var(--lo-fs-sm);
	line-height: 1.6;
	color: var(--lo-muted);
}
.lo-spectable__foot svg { color: var(--lo-gold-600); margin-top: 2px; flex: 0 0 auto; }


/* ==========================================================================
   11. About page
   ========================================================================== */

.lo-about__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s4);
	margin-top: clamp(40px, 4vw, 64px);
	padding-top: clamp(32px, 3.4vw, 48px);
	border-top: 1px solid var(--lo-line);
}
.lo-about__stat strong {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--lo-green-900);
	margin-bottom: 6px;
}
.lo-about__stat span {
	display: block;
	font-size: var(--lo-fs-sm);
	line-height: 1.5;
	color: var(--lo-muted);
}

/* --- founder quote ------------------------------------------------------ */
.lo-founder {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 84px);
}

.lo-founder__art { position: relative; }
.lo-founder__art::before {
	content: "";
	position: absolute;
	inset: -18px -18px 26px 26px;
	border-radius: var(--lo-r-xl);
	background: linear-gradient(150deg, var(--lo-gold-300), transparent 62%);
	opacity: .55;
	z-index: 0;
}
.lo-founder__figure {
	position: relative;
	z-index: 1;
	border-radius: var(--lo-r-xl);
	box-shadow: var(--lo-shadow-lg);
}
.lo-founder__figure img { width: 100%; }

.lo-founder__seal {
	position: absolute;
	z-index: 2;
	right: -18px;
	bottom: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--lo-green-950);
	color: var(--lo-gold-400);
	border: 1px solid var(--lo-gold-600);
	box-shadow: var(--lo-shadow-lg);
	text-align: center;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-sm);
	line-height: 1.25;
	padding: 8px;
}

/* The pull-quote is a real <blockquote>, so tokens.css has already given it a
   left rule, a mint background and generous padding. Undo all of it — this one
   is a full-bleed editorial quote, not an inline aside. */
.lo-founder__quote {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	color: inherit;
}
.lo-founder__mark {
	display: block;
	margin-bottom: var(--lo-s4);
	color: var(--lo-gold-400);
	opacity: .8;
}
.lo-founder__text {
	margin: 0 0 var(--lo-s6);
	font-family: var(--lo-font-display);
	font-size: clamp(1.25rem, .95rem + 1.1vw, 1.9rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.42;
	letter-spacing: -.015em;
	color: var(--lo-green-900);
}
.lo-section--dark .lo-founder__text { color: var(--lo-paper); }

.lo-founder__by {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	padding-top: var(--lo-s5);
	border-top: 1px solid var(--lo-line);
}
.lo-section--dark .lo-founder__by { border-top-color: color-mix(in srgb, var(--lo-paper) 16%, transparent); }
.lo-founder__name {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	font-weight: 600;
	color: var(--lo-text);
}
.lo-section--dark .lo-founder__name { color: var(--lo-paper); }
.lo-founder__role {
	display: block;
	margin-top: 2px;
	font-size: var(--lo-fs-sm);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}
.lo-section--dark .lo-founder__role { color: var(--lo-gold-400); }
.lo-founder__ur { margin-top: var(--lo-s4); color: var(--lo-green-700); }
.lo-section--dark .lo-founder__ur { color: var(--lo-gold-300); }

@media (max-width: 860px) {
	.lo-about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lo-s5); }
	.lo-founder { grid-template-columns: minmax(0, 1fr); gap: var(--lo-s7); }
	.lo-founder__art { max-width: 340px; }
	.lo-founder__art::before { display: none; }
}
@media (max-width: 430px) {
	.lo-founder__seal { width: 68px; height: 68px; right: -6px; font-size: var(--lo-fs-xs); }
}


/* ==========================================================================
   12. Process page
   ========================================================================== */

.lo-processpage__steps { display: grid; gap: 0; }

.lo-trace {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: center;
	gap: clamp(32px, 4vw, 72px);
	padding: clamp(30px, 3.6vw, 56px);
	border-radius: var(--lo-r-xl);
	background: linear-gradient(120deg, var(--lo-green-900), var(--lo-green-950) 62%);
	color: color-mix(in srgb, var(--lo-paper) 78%, transparent);
	box-shadow: var(--lo-shadow-lg);
	overflow: hidden;
	position: relative;
	isolation: isolate;
}
.lo-trace::before {
	content: "";
	position: absolute;
	inset: auto -80px -140px auto;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--lo-green-700), transparent 66%);
	opacity: .55;
	z-index: -1;
}
.lo-trace h2, .lo-trace h3 { color: var(--lo-paper); }
.lo-trace__title { font-size: var(--lo-fs-2xl); margin-bottom: var(--lo-s4); }
.lo-trace__text { margin: 0 0 var(--lo-s5); line-height: 1.75; max-width: 60ch; }

.lo-trace__code {
	display: grid;
	gap: var(--lo-s3);
	padding: var(--lo-s5);
	border-radius: var(--lo-r);
	background: color-mix(in srgb, var(--lo-paper) 8%, transparent);
	border: 1px dashed color-mix(in srgb, var(--lo-gold-400) 55%, transparent);
}
.lo-trace__code-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lo-s4);
	font-size: var(--lo-fs-sm);
}
.lo-trace__code dd { margin: 0; }
.lo-trace__code-row dt,
.lo-trace__code-k {
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lo-gold-300);
}
.lo-trace__code-v {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--lo-fs-base);
	color: var(--lo-paper);
	letter-spacing: .06em;
}

@media (max-width: 860px) {
	.lo-trace { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   13. Quality & certifications page
   ========================================================================== */

.lo-licence {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(30px, 4vw, 72px);
}

.lo-licence__plate {
	position: relative;
	padding: clamp(26px, 3vw, 40px);
	border-radius: var(--lo-r-xl);
	background: linear-gradient(150deg, var(--lo-green-900), var(--lo-green-950));
	color: var(--lo-paper);
	box-shadow: var(--lo-shadow-lg);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
/* Guilloché-style gold rings, drawn with repeating gradients. */
.lo-licence__plate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		repeating-radial-gradient(circle at 50% 42%,
			color-mix(in srgb, var(--lo-gold-500) 22%, transparent) 0 1px,
			transparent 1px 13px);
	opacity: .5;
}
.lo-licence__plate::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid color-mix(in srgb, var(--lo-gold-400) 45%, transparent);
	border-radius: var(--lo-r-lg);
	pointer-events: none;
}
.lo-licence__seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--lo-s4);
	border-radius: 50%;
	background: color-mix(in srgb, var(--lo-gold-500) 18%, transparent);
	border: 1px solid var(--lo-gold-500);
	color: var(--lo-gold-400);
}
.lo-licence__kicker {
	display: block;
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lo-gold-300);
	margin-bottom: var(--lo-s3);
}
.lo-licence__no {
	display: block;
	font-family: var(--lo-font-display);
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.15;
	color: var(--lo-paper);
	margin-bottom: var(--lo-s3);
}
.lo-licence__who {
	margin: 0;
	font-size: var(--lo-fs-sm);
	line-height: 1.6;
	color: color-mix(in srgb, var(--lo-paper) 70%, transparent);
}

.lo-licence__body { min-width: 0; }
.lo-licence__list {
	margin: var(--lo-s5) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--lo-s4);
}
.lo-licence__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--lo-s4);
	margin: 0;
	padding: var(--lo-s4) var(--lo-s5);
	border-radius: var(--lo-r);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	transition: border-color .28s var(--lo-ease), box-shadow .28s var(--lo-ease-out), transform .3s var(--lo-ease-out);
}
.lo-licence__list li:hover {
	border-color: var(--lo-green-200);
	box-shadow: var(--lo-shadow-sm);
	transform: translateX(4px);
}
.lo-licence__list svg { flex: 0 0 auto; color: var(--lo-green-600); margin-top: 3px; }
.lo-licence__list strong { display: block; color: var(--lo-text); margin-bottom: 2px; }
.lo-licence__list span { font-size: var(--lo-fs-base); line-height: 1.65; color: var(--lo-text-soft); }

@media (max-width: 860px) {
	.lo-licence { grid-template-columns: minmax(0, 1fr); }
}

/* --- certification cards ------------------------------------------------ */
.lo-certgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lo-s5);
}

.lo-cert {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 34px);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	overflow: hidden;
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-cert::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--lo-gold-500), var(--lo-green-500));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s var(--lo-ease-out);
}
.lo-cert:hover { transform: translateY(-6px); box-shadow: var(--lo-shadow-lg); border-color: transparent; }
.lo-cert:hover::before { transform: scaleX(1); }

.lo-cert__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--lo-s4);
	border-radius: var(--lo-r);
	background: var(--lo-gold-100);
	border: 1px solid var(--lo-gold-300);
	color: var(--lo-gold-700);
}
.lo-cert__title { font-size: var(--lo-fs-lg); margin-bottom: var(--lo-s2); }
.lo-cert__meta {
	display: block;
	margin-bottom: var(--lo-s3);
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lo-green-700);
}
.lo-cert__text {
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-text-soft);
}

@media (max-width: 1024px) { .lo-certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lo-certgrid { grid-template-columns: minmax(0, 1fr); } }

/* --- QC intro split ----------------------------------------------------- */
.lo-qc__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	align-items: end;
	gap: clamp(24px, 4vw, 72px);
	margin-bottom: var(--lo-s7);
}
.lo-qc__head .lo-head { margin-bottom: 0; }
.lo-qc__note {
	padding: var(--lo-s5);
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-green-900);
}
.lo-qc__note strong { display: block; margin-bottom: 4px; }

@media (max-width: 860px) {
	.lo-qc__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}


/* ==========================================================================
   14. Contact page
   ========================================================================== */

.lo-contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 4vw, 72px);
}

.lo-formcard {
	position: relative;
	padding: clamp(26px, 3.4vw, 52px);
	border-radius: var(--lo-r-xl);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow);
	overflow: hidden;
	isolation: isolate;
}
.lo-formcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--lo-green-600), var(--lo-gold-500) 70%, var(--lo-gold-300));
}
.lo-formcard__head { margin-bottom: var(--lo-s6); }
.lo-formcard__title { font-size: var(--lo-fs-2xl); margin-bottom: var(--lo-s3); }
.lo-formcard__text {
	margin: 0;
	font-size: var(--lo-fs-base);
	line-height: 1.7;
	color: var(--lo-text-soft);
	max-width: 54ch;
}

.lo-formcard__consent {
	margin-top: var(--lo-s5);
	padding: var(--lo-s4) var(--lo-s5);
	border-radius: var(--lo-r);
	background: var(--lo-green-50);
	border: 1px solid var(--lo-green-100);
}
.lo-formcard__consent .lo-checkbox { margin-bottom: 0; font-size: var(--lo-fs-sm); }
.lo-formcard__consent.has-error {
	background: var(--lo-ruby-soft);
	border-color: var(--lo-ruby);
}
.lo-formcard__consent.has-error .lo-checkbox input { border-color: var(--lo-ruby); }

/* Honeypot — off-screen for bots, invisible and unreachable for people. */
.lo-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lo-formcard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lo-s4);
	margin-top: var(--lo-s6);
	padding-top: var(--lo-s5);
	border-top: 1px solid var(--lo-line);
}
.lo-formcard__privacy {
	margin: 0;
	font-size: var(--lo-fs-sm);
	line-height: 1.55;
	color: var(--lo-muted);
	max-width: 34ch;
}

.lo-contactaside { display: grid; gap: var(--lo-s5); }
.lo-contactaside__socialrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lo-s4);
	padding: var(--lo-s5);
	border-radius: var(--lo-r-lg);
	background: var(--lo-sand);
	border: 1px solid var(--lo-line-soft);
}
.lo-contactaside__socialrow strong {
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lo-green-800);
}
.lo-contactaside__socialrow .lo-social a { background: var(--lo-surface); }

/* --- departments -------------------------------------------------------- */
.lo-deptgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s5);
}

.lo-dept {
	display: flex;
	flex-direction: column;
	gap: var(--lo-s3);
	padding: clamp(22px, 2.2vw, 30px);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-dept:hover { transform: translateY(-5px); box-shadow: var(--lo-shadow); border-color: var(--lo-green-200); }

.lo-dept__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--lo-r-sm);
	background: var(--lo-green-50);
	color: var(--lo-green-700);
	transition: background-color .3s var(--lo-ease), color .3s var(--lo-ease);
}
.lo-dept:hover .lo-dept__ico { background: var(--lo-gold-500); color: var(--lo-green-950); }
.lo-dept__title { font-size: var(--lo-fs-md); margin: 0; }
.lo-dept__text {
	margin: 0;
	font-size: var(--lo-fs-sm);
	line-height: 1.6;
	color: var(--lo-muted);
	flex: 1 1 auto;
}
.lo-dept__mail {
	font-size: var(--lo-fs-base);
	font-weight: 700;
	color: var(--lo-green-800);
	word-break: break-word;
}
.lo-dept__mail:hover { color: var(--lo-gold-600); }

@media (max-width: 1024px) {
	.lo-contactgrid { grid-template-columns: minmax(0, 1fr); }
	.lo-deptgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.lo-deptgrid { grid-template-columns: minmax(0, 1fr); }
	.lo-formcard__foot { justify-content: flex-start; }
}


/* ==========================================================================
   15. FAQ page
   ========================================================================== */

.lo-faqpage__grid {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 4vw, 76px);
}

/* --- sticky side nav ---------------------------------------------------- */
.lo-faqnav {
	position: sticky;
	top: calc(var(--lo-header-h) + 24px);
	padding: var(--lo-s5);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
}
.lo-faqnav__title {
	display: block;
	margin-bottom: var(--lo-s4);
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
}
.lo-faqnav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lo-faqnav__list li { margin: 0; }
.lo-faqnav__link {
	display: flex;
	align-items: center;
	gap: var(--lo-s3);
	padding: 11px 14px;
	border-radius: var(--lo-r-sm);
	font-size: var(--lo-fs-base);
	font-weight: 600;
	color: var(--lo-text-soft);
	transition: background-color .24s var(--lo-ease), color .24s var(--lo-ease), padding-left .24s var(--lo-ease-out);
}
.lo-faqnav__link svg { color: var(--lo-green-600); transition: color .24s var(--lo-ease); }
.lo-faqnav__link:hover {
	background: var(--lo-green-50);
	color: var(--lo-green-900);
	padding-left: 18px;
}
.lo-faqnav__link:hover svg { color: var(--lo-gold-600); }
.lo-faqnav__count {
	margin-left: auto;
	font-size: var(--lo-fs-xs);
	font-weight: 800;
	color: var(--lo-muted);
}

.lo-faqnav__help {
	margin-top: var(--lo-s5);
	padding-top: var(--lo-s5);
	border-top: 1px solid var(--lo-line);
	font-size: var(--lo-fs-sm);
	line-height: 1.6;
	color: var(--lo-muted);
}
.lo-faqnav__help .lo-btn { margin-top: var(--lo-s3); }

/* --- search bar (client-side filter is out of scope; this is the entry
       point into the site search, styled to match) ------------------------ */
.lo-faqsearch {
	position: relative;
	max-width: 620px;
	margin: 0 auto clamp(36px, 4vw, 60px);
}
.lo-faqsearch__inner {
	position: relative;
	display: flex;
	align-items: center;
}
.lo-faqsearch__ico {
	position: absolute;
	left: 20px;
	color: var(--lo-muted);
	pointer-events: none;
	z-index: 1;
}
.lo-faqsearch input[type="search"] {
	padding-left: 54px;
	padding-right: 130px;
	height: 58px;
	border-radius: var(--lo-r-pill);
	box-shadow: var(--lo-shadow-sm);
}
.lo-faqsearch .lo-btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	padding: 12px 24px;
}
.lo-faqsearch .lo-btn:hover { transform: translateY(-50%); box-shadow: var(--lo-shadow); }
.lo-faqsearch__hint {
	margin: var(--lo-s3) 0 0;
	text-align: center;
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}

/* --- category blocks ---------------------------------------------------- */
.lo-faqcat { scroll-margin-top: calc(var(--lo-header-h) + 28px); }
.lo-faqcat + .lo-faqcat { margin-top: clamp(48px, 5vw, 80px); }

.lo-faqcat__head {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	margin-bottom: var(--lo-s5);
	padding-bottom: var(--lo-s4);
	border-bottom: 1px solid var(--lo-line);
}
.lo-faqcat__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--lo-r);
	background: var(--lo-green-900);
	color: var(--lo-gold-400);
}
.lo-faqcat__title { margin: 0; font-size: var(--lo-fs-xl); }
.lo-faqcat__sub {
	display: block;
	margin-top: 2px;
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}

@media (max-width: 1024px) {
	.lo-faqpage__grid { grid-template-columns: minmax(0, 1fr); }
	.lo-faqnav { position: static; }
	.lo-faqnav__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(180px, 1fr);
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.lo-faqnav__list::-webkit-scrollbar { display: none; }
	.lo-faqnav__help { display: none; }
}
@media (max-width: 620px) {
	.lo-faqsearch input[type="search"] { padding-right: 20px; }
	.lo-faqsearch .lo-btn { position: static; transform: none; width: 100%; margin-top: var(--lo-s3); }
	.lo-faqsearch .lo-btn:hover { transform: translateY(-2px); }
}


/* ==========================================================================
   16. 404
   ========================================================================== */

.lo-404 {
	position: relative;
	text-align: center;
	overflow: hidden;
}

.lo-404__code {
	display: block;
	font-family: var(--lo-font-display);
	font-size: clamp(6rem, 3rem + 16vw, 15rem);
	font-weight: 700;
	line-height: .84;
	letter-spacing: -.05em;
	margin-bottom: var(--lo-s5);
	background: linear-gradient(160deg, var(--lo-green-900) 18%, var(--lo-gold-500) 62%, var(--lo-gold-300));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lo-404__title {
	font-size: var(--lo-fs-3xl);
	margin-bottom: var(--lo-s4);
}
.lo-404__text {
	max-width: 56ch;
	margin: 0 auto var(--lo-s7);
	font-size: var(--lo-fs-md);
	line-height: 1.75;
	color: var(--lo-text-soft);
}

.lo-404__search { max-width: 520px; margin: 0 auto clamp(40px, 4vw, 64px); }
.lo-404__search .lo-search-form input[type="search"] {
	height: 58px;
	border-radius: var(--lo-r-pill);
	padding-left: 24px;
	box-shadow: var(--lo-shadow-sm);
}

.lo-404__links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lo-s4);
	max-width: 940px;
	margin: 0 auto;
	text-align: left;
}

.lo-quicklink {
	display: flex;
	align-items: center;
	gap: var(--lo-s4);
	padding: var(--lo-s5);
	border-radius: var(--lo-r-lg);
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	box-shadow: var(--lo-shadow-xs);
	transition:
		transform var(--lo-dur) var(--lo-ease-out),
		box-shadow var(--lo-dur) var(--lo-ease-out),
		border-color var(--lo-dur) var(--lo-ease);
}
.lo-quicklink:hover { transform: translateY(-5px); box-shadow: var(--lo-shadow-lg); border-color: transparent; }

.lo-quicklink__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lo-green-50);
	color: var(--lo-green-700);
	transition: background-color .3s var(--lo-ease), color .3s var(--lo-ease);
}
.lo-quicklink:hover .lo-quicklink__ico { background: var(--lo-green-900); color: var(--lo-gold-400); }

.lo-quicklink__label {
	display: block;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-md);
	font-weight: 600;
	color: var(--lo-text);
	line-height: 1.3;
}
.lo-quicklink__note {
	display: block;
	margin-top: 2px;
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}

@media (max-width: 1024px) { .lo-404__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .lo-404__links { grid-template-columns: minmax(0, 1fr); } }


/* ==========================================================================
   17. Shared page furniture — the inline fact strip that closes a section
   ========================================================================== */

.lo-keyline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lo-s3) var(--lo-s6);
	margin-top: clamp(32px, 3.4vw, 52px);
	padding-top: var(--lo-s6);
	border-top: 1px solid var(--lo-line);
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
}
.lo-keyline span { display: inline-flex; align-items: center; gap: var(--lo-s2); }
.lo-keyline svg { color: var(--lo-gold-600); }