/* ============================================================================
   Life Link Research — Blog, Archive & Article
   FILE: /hello-elementor-child/assets/css/llr-blog.css

   USED BY
     archive.php     /blog/ + category / tag / author / date
     page-blog.php   the "LLR Blog" page template
     single.php      the article page

   HOW THIS SHEET IS ORGANISED — and why it changed

   Every component is declared ONCE. An earlier draft scoped each rule under
   its wrapper (.llr-blog .llr-card, then .llr-article .llr-card) which meant
   the card, grid, button and CTA blocks all existed twice — two places to
   edit, and a guarantee they would drift apart.

   That scoping was doing no work. Nothing else on this site is called
   .llr-anything, so the prefix ALONE already makes a collision with Hello
   Elementor, Elementor Pro or WooCommerce impossible. The wrapper added
   specificity nobody needed.

   So the order below is:
     1. TOKENS      the palette, declared on both wrappers
     2. PRIMITIVES  shared by every template — shell, card, button, CTA
     3. LISTING     archive.php + page-blog.php only
     4. ARTICLE     single.php only
     5. RESPONSIVE  all media queries, kept last so they always win

   NO !important IN A SINGLE RULE. Source order and the prefix are enough.

   PALETTE — from the live site
     #051E78  navy   surfaces, headings, primary button
     #C9A84C  gold   eyebrows, accents, secondary button
     #F5EDDA  cream  chips, icon wells, soft bands
   ========================================================================= */


/* ============================================================================
   1. TOKENS
   ========================================================================== */

.llr-blog,
.llr-article {
	/* Brand */
	--llr-navy:      #051E78;
	--llr-navy-deep: #03165B;
	--llr-navy-lift: #0A2A96;
	--llr-gold:      #C9A84C;
	--llr-gold-lift: #D9BC69;
	--llr-cream:     #F5EDDA;

	/* Neutrals */
	--llr-ink:   #0D1330;
	--llr-body:  #3D465E;
	--llr-mute:  #7A839B;
	--llr-line:  #E3E7F2;
	--llr-soft:  #F7F8FC;
	--llr-white: #FFFFFF;

	/* System */
	--llr-shell: 1200px;
	--llr-read:  720px;   /* prose measure — roughly 75 characters */
	--llr-toc:   240px;   /* contents rail */
	--llr-gap:   56px;    /* prose-to-rail gutter */
	/* The article container. prose + gutter + rail + the shell's own 24px
	   padding either side. Every article block uses this, so their left
	   edges are computed from one number and cannot drift apart. */
	--llr-group: calc(var(--llr-read) + var(--llr-gap) + var(--llr-toc) + 48px);
	--llr-r:     14px;
	--llr-r-sm:  10px;
	--llr-shadow:    0 1px 2px rgba(5, 30, 120, .05), 0 8px 24px rgba(5, 30, 120, .06);
	--llr-shadow-up: 0 4px 10px rgba(5, 30, 120, .08), 0 18px 44px rgba(5, 30, 120, .14);
	--llr-ease:  cubic-bezier(.22, .61, .36, 1);

	background: var(--llr-white);
	color: var(--llr-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.llr-blog *,
.llr-blog *::before,
.llr-blog *::after,
.llr-article *,
.llr-article *::before,
.llr-article *::after { box-sizing: border-box; }


/* ============================================================================
   2. PRIMITIVES — shared by every template
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.llr-shell {
	width: 100%;
	max-width: var(--llr-shell);
	margin-inline: auto;
	padding-inline: 24px;
}

.llr-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.llr-dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

/* --- breadcrumbs --------------------------------------------------------
   Base is tuned for the navy hero, where it is used unmodified by both
   listing templates. single.php adds --dark for the white page.
   ---------------------------------------------------------------------- */
.llr-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .62);
}
.llr-crumbs a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-crumbs a:hover { color: var(--llr-gold); }
.llr-crumbs__sep { color: rgba(255, 255, 255, .32); }

.llr-crumbs--dark { color: var(--llr-mute); }
.llr-crumbs--dark a { color: var(--llr-navy); }
.llr-crumbs--dark a:hover { color: var(--llr-gold); }
.llr-crumbs--dark .llr-crumbs__sep { color: var(--llr-line); }

/* --- chips --------------------------------------------------------------
   The category rail on listings, the tag row on articles. --sm is the
   compact variant; .is-on marks the active category.
   ---------------------------------------------------------------------- */
.llr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 8px 15px;
	border: 1px solid var(--llr-line);
	border-radius: 999px;
	background: var(--llr-cream);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--llr-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s var(--llr-ease), border-color .18s var(--llr-ease), color .18s var(--llr-ease);
}
.llr-chip:hover {
	border-color: var(--llr-gold);
	background: var(--llr-white);
	color: var(--llr-navy);
}

.llr-chip.is-on {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}

.llr-chip--sm { padding: 6px 13px; font-size: 12.5px; }

.llr-chip__n {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(5, 30, 120, .09);
	font-size: 11px;
	font-weight: 700;
	color: var(--llr-navy);
}
.llr-chip.is-on .llr-chip__n {
	background: rgba(255, 255, 255, .18);
	color: var(--llr-gold);
}

/* --- card grid ----------------------------------------------------------
   Declared once and used by the archive grid, the page template grid and
   the Related strip on articles.
   ---------------------------------------------------------------------- */
.llr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.llr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	box-shadow: var(--llr-shadow);
	transition: transform .28s var(--llr-ease), box-shadow .28s var(--llr-ease), border-color .28s var(--llr-ease);
}
.llr-card:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 168, 76, .55);
	box-shadow: var(--llr-shadow-up);
}

.llr-card[hidden] { display: none; }

/* Stretched link — the whole card is clickable, but the category link
   inside still works because it sits above this layer on z-index. */
.llr-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.llr-card__link:focus-visible {
	outline: 2px solid var(--llr-gold);
	outline-offset: -3px;
	border-radius: var(--llr-r);
}

.llr-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--llr-soft);
}
.llr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--llr-ease);
}
.llr-card:hover .llr-card__media img { transform: scale(1.045); }

.llr-card__ph {
	display: grid;
	place-items: center;
	height: 100%;
	background: var(--llr-cream);
	color: var(--llr-navy);
}
.llr-card__ph svg { width: 46px; height: 46px; }

.llr-flag {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--llr-gold);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-navy);
}

.llr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 22px;
}

.llr-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 11px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

.llr-card__cat {
	position: relative;
	z-index: 2;
	color: var(--llr-gold);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
a.llr-card__cat:hover { color: var(--llr-navy); }

.llr-card__title {
	margin: 0 0 10px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.01em;
	color: var(--llr-navy);
	transition: color .18s var(--llr-ease);
}
.llr-card:hover .llr-card__title { color: var(--llr-navy-lift); }

.llr-card__excerpt {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--llr-body);
}

.llr-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--llr-navy);
}
.llr-card__cta span { transition: transform .22s var(--llr-ease); }
.llr-card:hover .llr-card__cta { color: var(--llr-gold); }
.llr-card:hover .llr-card__cta span { transform: translateX(4px); }

/* Featured — spans the full row as a side-by-side. Listings only. */
.llr-card--lead {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
.llr-card--lead .llr-card__media {
	flex: 0 0 48%;
	aspect-ratio: auto;
	min-height: 320px;
}
.llr-card--lead .llr-card__body {
	justify-content: center;
	padding: 38px 40px;
}
.llr-card--lead .llr-card__title {
	font-size: clamp(22px, 2.3vw, 29px);
	line-height: 1.24;
	margin-bottom: 13px;
}
.llr-card--lead .llr-card__excerpt {
	font-size: 15px;
	max-width: 54ch;
	margin-bottom: 22px;
}

/* --- buttons ------------------------------------------------------------ */
.llr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid var(--llr-navy);
	border-radius: var(--llr-r-sm);
	background: var(--llr-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--llr-white);
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--llr-ease), color .2s var(--llr-ease), transform .2s var(--llr-ease);
}
.llr-btn:hover {
	background: var(--llr-navy-lift);
	color: var(--llr-white);
	transform: translateY(-2px);
}

.llr-btn--gold {
	border-color: var(--llr-gold);
	background: var(--llr-gold);
	color: var(--llr-navy);
}
.llr-btn--gold:hover {
	background: var(--llr-gold-lift);
	border-color: var(--llr-gold-lift);
	color: var(--llr-navy);
}

.llr-link {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--llr-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.llr-link:hover { color: var(--llr-gold); }

/* --- pagination --------------------------------------------------------- */
.llr-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 44px 0 12px;
}

.llr-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-white);
	font-size: 14px;
	font-weight: 600;
	color: var(--llr-navy);
	text-decoration: none;
	transition: background .18s var(--llr-ease), border-color .18s var(--llr-ease), color .18s var(--llr-ease);
}
.llr-pager .page-numbers:hover {
	background: var(--llr-cream);
	border-color: var(--llr-gold);
}
.llr-pager .page-numbers.current {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}
.llr-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--llr-mute);
}

/* Inline variant — multipage posts via <!--nextpage-->. */
.llr-pager--inline {
	justify-content: flex-start;
	align-items: center;
	margin: 34px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--llr-line);
}
.llr-pager__label {
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-mute);
}
.llr-pager--inline a,
.llr-pager--inline > span:not(.llr-pager__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--llr-line);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--llr-navy);
	text-decoration: none;
}
.llr-pager--inline > span:not(.llr-pager__label) {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}
.llr-pager--inline a:hover {
	background: var(--llr-cream);
	border-color: var(--llr-gold);
}

/* --- empty states ------------------------------------------------------- */
.llr-empty {
	padding: 34px 0;
	text-align: center;
	font-size: 15px;
	color: var(--llr-body);
}

.llr-empty--page {
	padding: 70px 24px;
	border: 1px dashed var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-soft);
}
.llr-empty--page h2 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--llr-navy);
}
.llr-empty--page p {
	margin: 0 auto 22px;
	max-width: 48ch;
}

/* --- CTA band ----------------------------------------------------------- */
.llr-cta {
	margin-top: 46px;
	padding: 62px 0 68px;
	background:
		radial-gradient(700px 320px at 50% 0%, rgba(201, 168, 76, .18), transparent 65%),
		var(--llr-navy);
	color: var(--llr-white);
	text-align: center;
}

.llr-cta__eyebrow {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-cta__title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.1vw, 34px);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--llr-white);
}

.llr-cta__sub {
	margin: 0 auto 26px;
	max-width: 60ch;
	font-size: 14.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .76);
}

.llr-article .llr-cta { margin-top: 62px; }


/* ============================================================================
   3. LISTING — archive.php + page-blog.php
   ========================================================================== */

/* --- hero band ---------------------------------------------------------- */
.llr-hero {
	position: relative;
	overflow: hidden;
	padding: 58px 0 62px;
	background:
		radial-gradient(900px 420px at 88% -10%, rgba(201, 168, 76, .20), transparent 60%),
		linear-gradient(158deg, var(--llr-navy) 0%, var(--llr-navy-deep) 100%);
	color: var(--llr-white);
}

/* Faint grid — depth without an image request. */
.llr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	        mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	pointer-events: none;
}

.llr-hero > .llr-shell { position: relative; z-index: 1; }

.llr-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-hero__title {
	margin: 0 0 14px;
	max-width: 18ch;
	font-size: clamp(30px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--llr-white);
}

.llr-hero__sub {
	margin: 0;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .78);
}

/* --- filter row --------------------------------------------------------- */
.llr-hero__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
}

.llr-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 340px;
	max-width: 420px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 999px;
	transition: border-color .2s var(--llr-ease), background .2s var(--llr-ease);
}
.llr-search:focus-within {
	background: rgba(255, 255, 255, .14);
	border-color: var(--llr-gold);
}

.llr-search__icon {
	width: 18px; height: 18px;
	margin-left: 16px;
	flex: none;
	color: rgba(255, 255, 255, .60);
}

.llr-search__input {
	flex: 1;
	min-width: 0;
	padding: 13px 14px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14.5px;
	color: var(--llr-white);
	outline: none;
	box-shadow: none;
}
.llr-search__input::placeholder { color: rgba(255, 255, 255, .52); }
.llr-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.llr-search__clear {
	margin-right: 10px;
	width: 26px; height: 26px;
	flex: none;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--llr-white);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s var(--llr-ease);
}
.llr-search__clear:hover { background: var(--llr-gold); color: var(--llr-navy); }

.llr-hero__count {
	margin: 0;
	font-size: 13px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .70);
}
.llr-hero__count strong { color: var(--llr-gold); font-weight: 700; }

/* --- category rail ------------------------------------------------------ */
.llr-chips {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--llr-line);
}

.llr-chips__rail {
	display: flex;
	gap: 9px;
	padding-block: 14px;
	overflow-x: auto;
	scrollbar-width: none;
}
.llr-chips__rail::-webkit-scrollbar { display: none; }

/* --- grid wrapper ------------------------------------------------------- */
.llr-body { padding: 46px 24px 20px; }

/* --- reveal on scroll ---------------------------------------------------
   The class is added by JS, never by PHP. If the script fails to load the
   cards were never given opacity:0, so they render normally rather than
   staying invisible.
   ---------------------------------------------------------------------- */
.llr-card.llr-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s var(--llr-ease), transform .55s var(--llr-ease);
}
.llr-card.llr-reveal.is-in {
	opacity: 1;
	transform: none;
}


/* ============================================================================
   4. ARTICLE — single.php

   NO HERO BAND, deliberately. The navy band on the index introduces a LIST.
   Here the reader has already chosen the article, so a full-bleed band would
   only push the first paragraph below the fold.
   ========================================================================== */

/* --- reading progress --------------------------------------------------- */
.llr-progress {
	position: sticky;
	top: 0;
	z-index: 6;
	height: 3px;
	background: var(--llr-line);
}
.llr-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--llr-navy), var(--llr-gold));
	transition: width .08s linear;
}

/* --- article containers --------------------------------------------------
   Every block below is a .llr-shell. Narrowing them all to --llr-group and
   letting the shell's own `margin-inline: auto` centre them means the whole
   page shares one left edge. The earlier version left the prose+rail group
   at 1016px inside a 1200px shell, so 136px of slack collected on the right
   and the head aligned to a different edge again.
   ---------------------------------------------------------------------- */
.llr-art__headinner,
.llr-art__hero,
.llr-art__wrap,
.llr-art__row,
.llr-adjacent,
.llr-related { max-width: var(--llr-group); }

/* The head, the hero figure and the note/tags/author rows reuse the SAME
   grid as the body, with their children pinned to column 1. That is what
   guarantees alignment with the prose — no calc(), nothing to keep in sync
   if the rail width ever changes. */
.llr-art__headinner,
.llr-art__hero,
.llr-art__row {
	display: grid;
	grid-template-columns: minmax(0, var(--llr-read)) var(--llr-toc);
	gap: var(--llr-gap);
}
.llr-art__headinner > *,
.llr-art__hero > *,
.llr-art__row > * { grid-column: 1; }

/* --- head --------------------------------------------------------------- */
.llr-art__head { padding: 40px 0 26px; }

.llr-art__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

.llr-art__cat {
	color: var(--llr-gold);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-art__cat:hover { color: var(--llr-navy); }

.llr-art__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.022em;
	color: var(--llr-navy);
}

.llr-art__lede {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--llr-gold);
	font-size: 17.5px;
	line-height: 1.66;
	color: var(--llr-ink);
}

.llr-art__revised {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--llr-mute);
}

.llr-art__hero { margin-bottom: 40px; }
.llr-art__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
}

/* --- prose + contents rail ---------------------------------------------- */
.llr-art__wrap {
	display: grid;
	grid-template-columns: minmax(0, var(--llr-read)) var(--llr-toc);
	gap: var(--llr-gap);
	align-items: start;
	padding-bottom: 20px;
}

.llr-toc {
	position: sticky;
	top: 28px;
	padding: 20px 18px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-soft);
}
.llr-toc[hidden] { display: none; }

.llr-toc__label {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-toc__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 62vh;
	overflow-y: auto;
}

.llr-toc__nav a {
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--llr-line);
	font-size: 13px;
	line-height: 1.45;
	color: var(--llr-body);
	text-decoration: none;
	transition: color .18s var(--llr-ease), border-color .18s var(--llr-ease);
}
.llr-toc__nav a:hover {
	color: var(--llr-navy);
	border-color: var(--llr-gold);
}
.llr-toc__nav a.is-current {
	color: var(--llr-navy);
	font-weight: 700;
	border-color: var(--llr-navy);
}

/* H3 entries indent under their H2. */
.llr-toc__sub {
	padding-left: 24px;
	font-size: 12.5px;
	color: var(--llr-mute);
}
.llr-toc__sub.is-current { color: var(--llr-navy); }

/* --- prose --------------------------------------------------------------
   Everything the editor produces lands here. Scoped to .llr-prose so these
   typography rules reach post content and nothing else — not the header,
   not the footer, not a Woo template. Headings carry scroll-margin so the
   sticky progress bar never covers one you have just jumped to.
   ---------------------------------------------------------------------- */
.llr-prose {
	max-width: var(--llr-read);
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--llr-body);
}

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

.llr-prose p { margin: 0 0 1.35em; }

.llr-prose h2,
.llr-prose h3,
.llr-prose h4 {
	color: var(--llr-navy);
	letter-spacing: -.015em;
	scroll-margin-top: 90px;
}

.llr-prose h2 {
	margin: 2.1em 0 .6em;
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 800;
	line-height: 1.26;
}

/* Gold rule above each H2 — a section break without a heavy divider. */
.llr-prose h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--llr-gold);
}

.llr-prose h3 {
	margin: 1.8em 0 .5em;
	font-size: clamp(17px, 1.9vw, 20px);
	font-weight: 700;
	line-height: 1.34;
}

.llr-prose h4 {
	margin: 1.6em 0 .45em;
	font-size: 16px;
	font-weight: 700;
}

.llr-prose a {
	color: var(--llr-navy);
	text-decoration: underline;
	text-decoration-color: rgba(201, 168, 76, .55);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .18s var(--llr-ease), text-decoration-color .18s var(--llr-ease);
}
.llr-prose a:hover {
	color: var(--llr-gold);
	text-decoration-color: var(--llr-gold);
}

.llr-prose strong { color: var(--llr-ink); font-weight: 700; }

.llr-prose ul,
.llr-prose ol {
	margin: 0 0 1.35em;
	padding-left: 22px;
}
.llr-prose li { margin-bottom: .5em; }
.llr-prose li::marker { color: var(--llr-gold); }

.llr-prose blockquote {
	margin: 1.8em 0;
	padding: 20px 24px;
	border: 0;
	border-left: 3px solid var(--llr-gold);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-cream);
	font-size: 16px;
	color: var(--llr-ink);
}
.llr-prose blockquote p:last-child { margin-bottom: 0; }

.llr-prose img { max-width: 100%; height: auto; border-radius: var(--llr-r-sm); }
.llr-prose figure { margin: 1.8em 0; }
.llr-prose figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--llr-mute);
	text-align: center;
}

.llr-prose hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--llr-line);
}

/* Tables — COA figures, comparison grids. */
.llr-prose table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 14.5px;
}
.llr-prose th,
.llr-prose td {
	padding: 11px 14px;
	border: 1px solid var(--llr-line);
	text-align: left;
	vertical-align: top;
}
.llr-prose th {
	background: var(--llr-navy);
	font-weight: 700;
	color: var(--llr-white);
}
.llr-prose tbody tr:nth-child(even) td { background: var(--llr-soft); }

/* Code — sequences, method parameters. */
.llr-prose code {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--llr-cream);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	color: var(--llr-navy-deep);
}
.llr-prose pre {
	margin: 1.8em 0;
	padding: 18px 20px;
	overflow-x: auto;
	border-radius: var(--llr-r-sm);
	background: var(--llr-navy-deep);
	font-size: 13.5px;
	line-height: 1.6;
}
.llr-prose pre code {
	padding: 0;
	background: none;
	color: #DDE4FF;
}

/* --- compliance note ---------------------------------------------------- */
.llr-note {
	margin: 40px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--llr-line);
	border-left: 3px solid var(--llr-navy);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-soft);
}
.llr-note p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--llr-body);
}
.llr-note strong { color: var(--llr-navy); }

/* --- tags --------------------------------------------------------------- */
.llr-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.llr-tags__label {
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

/* --- author ------------------------------------------------------------- */
.llr-author {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	box-shadow: var(--llr-shadow);
}

.llr-author__pic { flex: none; }

.llr-author__img {
	width: 64px; height: 64px;
	border-radius: 50%;
	border: 2px solid var(--llr-cream);
}

.llr-author__label {
	margin: 0 0 3px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-author__name {
	margin: 0 0 7px;
	font-size: 16px;
	font-weight: 700;
	color: var(--llr-navy);
}

.llr-author__bio {
	margin: 0 0 11px;
	font-size: 14px;
	line-height: 1.65;
}

.llr-author__link {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-author__link:hover { color: var(--llr-gold); }

/* --- prev / next -------------------------------------------------------- */
.llr-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
}

.llr-adjacent__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-white);
	text-decoration: none;
	transition: border-color .2s var(--llr-ease), background .2s var(--llr-ease), transform .2s var(--llr-ease);
}
.llr-adjacent__item:hover {
	border-color: var(--llr-gold);
	background: var(--llr-soft);
	transform: translateY(-2px);
}

/* A lone "Next" sits in column 2, so the pair never looks misaligned. */
.llr-adjacent__item--next {
	grid-column: 2;
	text-align: right;
}

.llr-adjacent__dir {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-adjacent__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.42;
	color: var(--llr-navy);
}

/* --- related ------------------------------------------------------------
   Cards come straight from the .llr-card block above — only the wrapper
   and heading are declared here.
   ---------------------------------------------------------------------- */
.llr-related { margin-top: 58px; }

.llr-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--llr-line);
}

.llr-related__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--llr-navy);
}

.llr-related__all {
	flex: none;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-related__all:hover { color: var(--llr-gold); }


/* ============================================================================
   5. RESPONSIVE — last, so these always win on source order
   ========================================================================== */

@media (max-width: 1060px) {
	/* Contents rail moves above the prose and stops sticking — a sticky box
	   in normal flow would follow the reader down a narrow screen. The head
	   and row grids collapse with it so the single column still lines up. */
	.llr-art__wrap,
	.llr-art__headinner,
	.llr-art__hero,
	.llr-art__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.llr-toc {
		position: static;
		order: -1;
		max-width: var(--llr-read);
	}
	.llr-toc__nav { max-height: none; }
}

@media (max-width: 1024px) {
	.llr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.llr-card--lead .llr-card__body { padding: 30px; }
	.llr-card--lead .llr-card__media { min-height: 280px; }
}

@media (max-width: 760px) {
	.llr-shell { padding-inline: 20px; }

	/* listing */
	.llr-hero { padding: 40px 0 44px; }
	.llr-hero__tools { gap: 12px; }
	.llr-search { max-width: none; flex-basis: 100%; }
	.llr-body { padding: 32px 20px 16px; }

	.llr-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Featured collapses to a normal stacked card. */
	.llr-card--lead { flex-direction: column; }
	.llr-card--lead .llr-card__media {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.llr-card--lead .llr-card__body { padding: 20px 20px 22px; }
	.llr-card--lead .llr-card__excerpt { font-size: 14px; }

	/* article */
	.llr-art__head { padding: 28px 0 20px; }
	.llr-art__hero { margin-bottom: 28px; }
	.llr-art__lede { font-size: 16px; padding-left: 14px; }
	.llr-prose { font-size: 16px; }

	.llr-author { flex-direction: column; gap: 14px; }

	.llr-adjacent { grid-template-columns: minmax(0, 1fr); }
	.llr-adjacent__item--next {
		grid-column: 1;
		text-align: left;
	}

	/* shared */
	.llr-cta { padding: 48px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.llr-blog *,
	.llr-article * {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
	.llr-card.llr-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.llr-hero,
	.llr-chips,
	.llr-progress,
	.llr-toc,
	.llr-adjacent,
	.llr-related,
	.llr-cta,
	.llr-pager { display: none; }

	.llr-prose { max-width: none; }
	.llr-card {
		box-shadow: none;
		break-inside: avoid;
	}
}



/* ============================================================================
   Life Link Research — Blog, Archive & Article
   FILE: /hello-elementor-child/assets/css/llr-blog.css

   USED BY
     archive.php     /blog/ + category / tag / author / date
     page-blog.php   the "LLR Blog" page template
     single.php      the article page

   HOW THIS SHEET IS ORGANISED — and why it changed

   Every component is declared ONCE. An earlier draft scoped each rule under
   its wrapper (.llr-blog .llr-card, then .llr-article .llr-card) which meant
   the card, grid, button and CTA blocks all existed twice — two places to
   edit, and a guarantee they would drift apart.

   That scoping was doing no work. Nothing else on this site is called
   .llr-anything, so the prefix ALONE already makes a collision with Hello
   Elementor, Elementor Pro or WooCommerce impossible. The wrapper added
   specificity nobody needed.

   So the order below is:
     1. TOKENS      the palette, declared on both wrappers
     2. PRIMITIVES  shared by every template — shell, card, button, CTA
     3. LISTING     archive.php + page-blog.php only
     4. ARTICLE     single.php only
     5. RESPONSIVE  all media queries, kept last so they always win

   NO !important IN A SINGLE RULE. Source order and the prefix are enough.

   PALETTE — from the live site
     #051E78  navy   surfaces, headings, primary button
     #C9A84C  gold   eyebrows, accents, secondary button
     #F5EDDA  cream  chips, icon wells, soft bands
   ========================================================================= */


/* ============================================================================
   1. TOKENS
   ========================================================================== */

.llr-blog,
.llr-article {
	/* Brand */
	--llr-navy:      #051E78;
	--llr-navy-deep: #03165B;
	--llr-navy-lift: #0A2A96;
	--llr-gold:      #C9A84C;
	--llr-gold-lift: #D9BC69;
	--llr-cream:     #F5EDDA;

	/* Neutrals */
	--llr-ink:   #0D1330;
	--llr-body:  #3D465E;
	--llr-mute:  #7A839B;
	--llr-line:  #E3E7F2;
	--llr-soft:  #F7F8FC;
	--llr-white: #FFFFFF;

	/* System */
	--llr-shell: 1200px;
	--llr-read:  720px;   /* prose measure — roughly 75 characters */
	--llr-toc:   240px;   /* contents rail */
	--llr-gap:   56px;    /* prose-to-rail gutter */
	/* The article container. prose + gutter + rail + the shell's own 24px
	   padding either side. Every article block uses this, so their left
	   edges are computed from one number and cannot drift apart. */
	--llr-group: calc(var(--llr-read) + var(--llr-gap) + var(--llr-toc) + 48px);
	--llr-r:     14px;
	--llr-r-sm:  10px;
	--llr-shadow:    0 1px 2px rgba(5, 30, 120, .05), 0 8px 24px rgba(5, 30, 120, .06);
	--llr-shadow-up: 0 4px 10px rgba(5, 30, 120, .08), 0 18px 44px rgba(5, 30, 120, .14);
	--llr-ease:  cubic-bezier(.22, .61, .36, 1);

	background: var(--llr-white);
	color: var(--llr-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.llr-blog *,
.llr-blog *::before,
.llr-blog *::after,
.llr-article *,
.llr-article *::before,
.llr-article *::after { box-sizing: border-box; }


/* ============================================================================
   2. PRIMITIVES — shared by every template
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.llr-shell {
	width: 100%;
	max-width: var(--llr-shell);
	margin-inline: auto;
	padding-inline: 24px;
}

.llr-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.llr-dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

/* --- breadcrumbs --------------------------------------------------------
   Base is tuned for the navy hero, where it is used unmodified by both
   listing templates. single.php adds --dark for the white page.
   ---------------------------------------------------------------------- */
.llr-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 12.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .62);
}
.llr-crumbs a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-crumbs a:hover { color: var(--llr-gold); }
.llr-crumbs__sep { color: rgba(255, 255, 255, .32); }

.llr-crumbs--dark { color: var(--llr-mute); }
.llr-crumbs--dark a { color: var(--llr-navy); }
.llr-crumbs--dark a:hover { color: var(--llr-gold); }
.llr-crumbs--dark .llr-crumbs__sep { color: var(--llr-line); }

/* --- chips --------------------------------------------------------------
   The category rail on listings, the tag row on articles. --sm is the
   compact variant; .is-on marks the active category.
   ---------------------------------------------------------------------- */
.llr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 8px 15px;
	border: 1px solid var(--llr-line);
	border-radius: 999px;
	background: var(--llr-cream);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--llr-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s var(--llr-ease), border-color .18s var(--llr-ease), color .18s var(--llr-ease);
}
.llr-chip:hover {
	border-color: var(--llr-gold);
	background: var(--llr-white);
	color: var(--llr-navy);
}

.llr-chip.is-on {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}

.llr-chip--sm { padding: 6px 13px; font-size: 12.5px; }

.llr-chip__n {
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(5, 30, 120, .09);
	font-size: 11px;
	font-weight: 700;
	color: var(--llr-navy);
}
.llr-chip.is-on .llr-chip__n {
	background: rgba(255, 255, 255, .18);
	color: var(--llr-gold);
}

/* --- card grid ----------------------------------------------------------
   Declared once and used by the archive grid, the page template grid and
   the Related strip on articles.
   ---------------------------------------------------------------------- */
.llr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.llr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	box-shadow: var(--llr-shadow);
	transition: transform .28s var(--llr-ease), box-shadow .28s var(--llr-ease), border-color .28s var(--llr-ease);
}
.llr-card:hover {
	transform: translateY(-4px);
	border-color: rgba(201, 168, 76, .55);
	box-shadow: var(--llr-shadow-up);
}

.llr-card[hidden] { display: none; }

/* Stretched link — the whole card is clickable, but the category link
   inside still works because it sits above this layer on z-index. */
.llr-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.llr-card__link:focus-visible {
	outline: 2px solid var(--llr-gold);
	outline-offset: -3px;
	border-radius: var(--llr-r);
}

.llr-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--llr-soft);
}
.llr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--llr-ease);
}
.llr-card:hover .llr-card__media img { transform: scale(1.045); }

.llr-card__ph {
	display: grid;
	place-items: center;
	height: 100%;
	background: var(--llr-cream);
	color: var(--llr-navy);
}
.llr-card__ph svg { width: 46px; height: 46px; }

.llr-flag {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--llr-gold);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-navy);
}

.llr-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 22px;
}

.llr-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 11px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

.llr-card__cat {
	position: relative;
	z-index: 2;
	color: var(--llr-gold);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
a.llr-card__cat:hover { color: var(--llr-navy); }

.llr-card__title {
	margin: 0 0 10px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.01em;
	color: var(--llr-navy);
	transition: color .18s var(--llr-ease);
}
.llr-card:hover .llr-card__title { color: var(--llr-navy-lift); }

.llr-card__excerpt {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.68;
	color: var(--llr-body);
}

.llr-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--llr-navy);
}
.llr-card__cta span { transition: transform .22s var(--llr-ease); }
.llr-card:hover .llr-card__cta { color: var(--llr-gold); }
.llr-card:hover .llr-card__cta span { transform: translateX(4px); }

/* Featured — spans the full row as a side-by-side. Listings only. */
.llr-card--lead {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
.llr-card--lead .llr-card__media {
	flex: 0 0 48%;
	aspect-ratio: auto;
	min-height: 320px;
}
.llr-card--lead .llr-card__body {
	justify-content: center;
	padding: 38px 40px;
}
.llr-card--lead .llr-card__title {
	font-size: clamp(22px, 2.3vw, 29px);
	line-height: 1.24;
	margin-bottom: 13px;
}
.llr-card--lead .llr-card__excerpt {
	font-size: 15px;
	max-width: 54ch;
	margin-bottom: 22px;
}

/* --- buttons ------------------------------------------------------------ */
.llr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid var(--llr-navy);
	border-radius: var(--llr-r-sm);
	background: var(--llr-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--llr-white);
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--llr-ease), color .2s var(--llr-ease), transform .2s var(--llr-ease);
}
.llr-btn:hover {
	background: var(--llr-navy-lift);
	color: var(--llr-white);
	transform: translateY(-2px);
}

.llr-btn--gold {
	border-color: var(--llr-gold);
	background: var(--llr-gold);
	color: var(--llr-navy);
}
.llr-btn--gold:hover {
	background: var(--llr-gold-lift);
	border-color: var(--llr-gold-lift);
	color: var(--llr-navy);
}

.llr-link {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--llr-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.llr-link:hover { color: var(--llr-gold); }

/* --- pagination --------------------------------------------------------- */
.llr-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 44px 0 12px;
}

.llr-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-white);
	font-size: 14px;
	font-weight: 600;
	color: var(--llr-navy);
	text-decoration: none;
	transition: background .18s var(--llr-ease), border-color .18s var(--llr-ease), color .18s var(--llr-ease);
}
.llr-pager .page-numbers:hover {
	background: var(--llr-cream);
	border-color: var(--llr-gold);
}
.llr-pager .page-numbers.current {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}
.llr-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--llr-mute);
}

/* Inline variant — multipage posts via <!--nextpage-->. */
.llr-pager--inline {
	justify-content: flex-start;
	align-items: center;
	margin: 34px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--llr-line);
}
.llr-pager__label {
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-mute);
}
.llr-pager--inline a,
.llr-pager--inline > span:not(.llr-pager__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--llr-line);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--llr-navy);
	text-decoration: none;
}
.llr-pager--inline > span:not(.llr-pager__label) {
	background: var(--llr-navy);
	border-color: var(--llr-navy);
	color: var(--llr-white);
}
.llr-pager--inline a:hover {
	background: var(--llr-cream);
	border-color: var(--llr-gold);
}

/* --- empty states ------------------------------------------------------- */
.llr-empty {
	padding: 34px 0;
	text-align: center;
	font-size: 15px;
	color: var(--llr-body);
}

.llr-empty--page {
	padding: 70px 24px;
	border: 1px dashed var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-soft);
}
.llr-empty--page h2 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--llr-navy);
}
.llr-empty--page p {
	margin: 0 auto 22px;
	max-width: 48ch;
}

/* --- CTA band ----------------------------------------------------------- */
.llr-cta {
	margin-top: 46px;
	padding: 62px 0 68px;
	background:
		radial-gradient(700px 320px at 50% 0%, rgba(201, 168, 76, .18), transparent 65%),
		var(--llr-navy);
	color: var(--llr-white);
	text-align: center;
}

.llr-cta__eyebrow {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-cta__title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.1vw, 34px);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--llr-white);
}

.llr-cta__sub {
	margin: 0 auto 26px;
	max-width: 60ch;
	font-size: 14.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .76);
}

.llr-article .llr-cta { margin-top: 62px; }


/* ============================================================================
   3. LISTING — archive.php + page-blog.php
   ========================================================================== */

/* --- hero band ---------------------------------------------------------- */
.llr-hero {
	position: relative;
	overflow: hidden;
	padding: 58px 0 62px;
	background:
		radial-gradient(900px 420px at 88% -10%, rgba(201, 168, 76, .20), transparent 60%),
		linear-gradient(158deg, var(--llr-navy) 0%, var(--llr-navy-deep) 100%);
	color: var(--llr-white);
}

/* Faint grid — depth without an image request. */
.llr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	        mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	pointer-events: none;
}

.llr-hero > .llr-shell { position: relative; z-index: 1; }

.llr-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-hero__title {
	margin: 0 0 14px;
	max-width: 18ch;
	font-size: clamp(30px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--llr-white);
}

.llr-hero__sub {
	margin: 0;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .78);
}

/* --- filter row --------------------------------------------------------- */
.llr-hero__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
}

.llr-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 340px;
	max-width: 420px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 999px;
	transition: border-color .2s var(--llr-ease), background .2s var(--llr-ease);
}
.llr-search:focus-within {
	background: rgba(255, 255, 255, .14);
	border-color: var(--llr-gold);
}

.llr-search__icon {
	width: 18px; height: 18px;
	margin-left: 16px;
	flex: none;
	color: rgba(255, 255, 255, .60);
}

.llr-search__input {
	flex: 1;
	min-width: 0;
	padding: 13px 14px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14.5px;
	color: var(--llr-white);
	outline: none;
	box-shadow: none;
}
.llr-search__input::placeholder { color: rgba(255, 255, 255, .52); }
.llr-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.llr-search__clear {
	margin-right: 10px;
	width: 26px; height: 26px;
	flex: none;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--llr-white);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s var(--llr-ease);
}
.llr-search__clear:hover { background: var(--llr-gold); color: var(--llr-navy); }

.llr-hero__count {
	margin: 0;
	font-size: 13px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .70);
}
.llr-hero__count strong { color: var(--llr-gold); font-weight: 700; }

/* --- category rail ------------------------------------------------------ */
.llr-chips {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--llr-line);
}

.llr-chips__rail {
	display: flex;
	gap: 9px;
	padding-block: 14px;
	overflow-x: auto;
	scrollbar-width: none;
}
.llr-chips__rail::-webkit-scrollbar { display: none; }

/* --- grid wrapper ------------------------------------------------------- */
.llr-body { padding: 46px 24px 20px; }

/* --- reveal on scroll ---------------------------------------------------
   The class is added by JS, never by PHP. If the script fails to load the
   cards were never given opacity:0, so they render normally rather than
   staying invisible.
   ---------------------------------------------------------------------- */
.llr-card.llr-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s var(--llr-ease), transform .55s var(--llr-ease);
}
.llr-card.llr-reveal.is-in {
	opacity: 1;
	transform: none;
}


/* ============================================================================
   4. ARTICLE — single.php

   NO HERO BAND, deliberately. The navy band on the index introduces a LIST.
   Here the reader has already chosen the article, so a full-bleed band would
   only push the first paragraph below the fold.
   ========================================================================== */

/* --- reading progress --------------------------------------------------- */
.llr-progress {
	position: sticky;
	top: 0;
	z-index: 6;
	height: 3px;
	background: var(--llr-line);
}
.llr-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--llr-navy), var(--llr-gold));
	transition: width .08s linear;
}

/* --- article containers --------------------------------------------------
   Every block below is a .llr-shell. Narrowing them all to --llr-group and
   letting the shell's own `margin-inline: auto` centre them means the whole
   page shares one left edge. The earlier version left the prose+rail group
   at 1016px inside a 1200px shell, so 136px of slack collected on the right
   and the head aligned to a different edge again.
   ---------------------------------------------------------------------- */
.llr-art__headinner,
.llr-art__hero,
.llr-art__wrap,
.llr-art__row,
.llr-adjacent,
.llr-related { max-width: var(--llr-group); }

/* The head, the hero figure and the note/tags/author rows reuse the SAME
   grid as the body, with their children pinned to column 1. That is what
   guarantees alignment with the prose — no calc(), nothing to keep in sync
   if the rail width ever changes. */
.llr-art__headinner,
.llr-art__hero,
.llr-art__row {
	display: grid;
	grid-template-columns: minmax(0, var(--llr-read)) var(--llr-toc);
	gap: var(--llr-gap);
}
.llr-art__headinner > *,
.llr-art__hero > *,
.llr-art__row > * { grid-column: 1; }

/* --- head --------------------------------------------------------------- */
.llr-art__head { padding: 40px 0 26px; }

.llr-art__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

.llr-art__cat {
	color: var(--llr-gold);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-art__cat:hover { color: var(--llr-navy); }

.llr-art__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.022em;
	color: var(--llr-navy);
}

.llr-art__lede {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--llr-gold);
	font-size: 17.5px;
	line-height: 1.66;
	color: var(--llr-ink);
}

.llr-art__revised {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--llr-mute);
}

.llr-art__hero { margin-bottom: 40px; }
.llr-art__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
}

/* --- prose + contents rail ---------------------------------------------- */
.llr-art__wrap {
	display: grid;
	grid-template-columns: minmax(0, var(--llr-read)) var(--llr-toc);
	gap: var(--llr-gap);
	align-items: start;
	padding-bottom: 20px;
}

.llr-toc {
	position: sticky;
	top: 28px;
	padding: 20px 18px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-soft);
}
.llr-toc[hidden] { display: none; }

.llr-toc__label {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-toc__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 62vh;
	overflow-y: auto;
}

.llr-toc__nav a {
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--llr-line);
	font-size: 13px;
	line-height: 1.45;
	color: var(--llr-body);
	text-decoration: none;
	transition: color .18s var(--llr-ease), border-color .18s var(--llr-ease);
}
.llr-toc__nav a:hover {
	color: var(--llr-navy);
	border-color: var(--llr-gold);
}
.llr-toc__nav a.is-current {
	color: var(--llr-navy);
	font-weight: 700;
	border-color: var(--llr-navy);
}

/* H3 entries indent under their H2. */
.llr-toc__sub {
	padding-left: 24px;
	font-size: 12.5px;
	color: var(--llr-mute);
}
.llr-toc__sub.is-current { color: var(--llr-navy); }

/* --- prose --------------------------------------------------------------
   Everything the editor produces lands here. Scoped to .llr-prose so these
   typography rules reach post content and nothing else — not the header,
   not the footer, not a Woo template. Headings carry scroll-margin so the
   sticky progress bar never covers one you have just jumped to.
   ---------------------------------------------------------------------- */
.llr-prose {
	max-width: var(--llr-read);
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--llr-body);
}

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

.llr-prose p { margin: 0 0 1.35em; }

.llr-prose h2,
.llr-prose h3,
.llr-prose h4 {
	color: var(--llr-navy);
	letter-spacing: -.015em;
	scroll-margin-top: 90px;
}

.llr-prose h2 {
	margin: 2.1em 0 .6em;
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 800;
	line-height: 1.26;
}

/* Gold rule above each H2 — a section break without a heavy divider. */
.llr-prose h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--llr-gold);
}

.llr-prose h3 {
	margin: 1.8em 0 .5em;
	font-size: clamp(17px, 1.9vw, 20px);
	font-weight: 700;
	line-height: 1.34;
}

.llr-prose h4 {
	margin: 1.6em 0 .45em;
	font-size: 16px;
	font-weight: 700;
}

.llr-prose a {
	color: var(--llr-navy);
	text-decoration: underline;
	text-decoration-color: rgba(201, 168, 76, .55);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .18s var(--llr-ease), text-decoration-color .18s var(--llr-ease);
}
.llr-prose a:hover {
	color: var(--llr-gold);
	text-decoration-color: var(--llr-gold);
}

.llr-prose strong { color: var(--llr-ink); font-weight: 700; }

.llr-prose ul,
.llr-prose ol {
	margin: 0 0 1.35em;
	padding-left: 22px;
}
.llr-prose li { margin-bottom: .5em; }
.llr-prose li::marker { color: var(--llr-gold); }

.llr-prose blockquote {
	margin: 1.8em 0;
	padding: 20px 24px;
	border: 0;
	border-left: 3px solid var(--llr-gold);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-cream);
	font-size: 16px;
	color: var(--llr-ink);
}
.llr-prose blockquote p:last-child { margin-bottom: 0; }

.llr-prose img { max-width: 100%; height: auto; border-radius: var(--llr-r-sm); }
.llr-prose figure { margin: 1.8em 0; }
.llr-prose figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--llr-mute);
	text-align: center;
}

.llr-prose hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--llr-line);
}

/* Tables — COA figures, comparison grids. */
.llr-prose table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 14.5px;
}
.llr-prose th,
.llr-prose td {
	padding: 11px 14px;
	border: 1px solid var(--llr-line);
	text-align: left;
	vertical-align: top;
}
.llr-prose th {
	background: var(--llr-navy);
	font-weight: 700;
	color: var(--llr-white);
}
.llr-prose tbody tr:nth-child(even) td { background: var(--llr-soft); }

/* Code — sequences, method parameters. */
.llr-prose code {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--llr-cream);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	color: var(--llr-navy-deep);
}
.llr-prose pre {
	margin: 1.8em 0;
	padding: 18px 20px;
	overflow-x: auto;
	border-radius: var(--llr-r-sm);
	background: var(--llr-navy-deep);
	font-size: 13.5px;
	line-height: 1.6;
}
.llr-prose pre code {
	padding: 0;
	background: none;
	color: #DDE4FF;
}

/* --- compliance note ---------------------------------------------------- */
.llr-note {
	margin: 40px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--llr-line);
	border-left: 3px solid var(--llr-navy);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-soft);
}
.llr-note p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--llr-body);
}
.llr-note strong { color: var(--llr-navy); }

/* --- tags --------------------------------------------------------------- */
.llr-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.llr-tags__label {
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

/* --- author ------------------------------------------------------------- */
.llr-author {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	box-shadow: var(--llr-shadow);
}

.llr-author__pic { flex: none; }

.llr-author__img {
	width: 64px; height: 64px;
	border-radius: 50%;
	border: 2px solid var(--llr-cream);
}

.llr-author__label {
	margin: 0 0 3px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-author__name {
	margin: 0 0 7px;
	font-size: 16px;
	font-weight: 700;
	color: var(--llr-navy);
}

.llr-author__bio {
	margin: 0 0 11px;
	font-size: 14px;
	line-height: 1.65;
}

.llr-author__link {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-author__link:hover { color: var(--llr-gold); }

/* --- prev / next -------------------------------------------------------- */
.llr-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
}

.llr-adjacent__item {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r-sm);
	background: var(--llr-white);
	text-decoration: none;
	transition: border-color .2s var(--llr-ease), background .2s var(--llr-ease), transform .2s var(--llr-ease);
}
.llr-adjacent__item:hover {
	border-color: var(--llr-gold);
	background: var(--llr-soft);
	transform: translateY(-2px);
}

/* A lone "Next" sits in column 2, so the pair never looks misaligned. */
.llr-adjacent__item--next {
	grid-column: 2;
	text-align: right;
}

.llr-adjacent__dir {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-adjacent__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.42;
	color: var(--llr-navy);
}

/* --- related ------------------------------------------------------------
   Cards come straight from the .llr-card block above — only the wrapper
   and heading are declared here.
   ---------------------------------------------------------------------- */
.llr-related { margin-top: 58px; }

.llr-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--llr-line);
}

.llr-related__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--llr-navy);
}

.llr-related__all {
	flex: none;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-related__all:hover { color: var(--llr-gold); }


/* ============================================================================
   5. RESPONSIVE — last, so these always win on source order
   ========================================================================== */

@media (max-width: 1060px) {
	/* Contents rail moves above the prose and stops sticking — a sticky box
	   in normal flow would follow the reader down a narrow screen. The head
	   and row grids collapse with it so the single column still lines up. */
	.llr-art__wrap,
	.llr-art__headinner,
	.llr-art__hero,
	.llr-art__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.llr-toc {
		position: static;
		order: -1;
		max-width: var(--llr-read);
	}
	.llr-toc__nav { max-height: none; }
}

@media (max-width: 1024px) {
	.llr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.llr-card--lead .llr-card__body { padding: 30px; }
	.llr-card--lead .llr-card__media { min-height: 280px; }
}

@media (max-width: 760px) {
	.llr-shell { padding-inline: 20px; }

	/* listing */
	.llr-hero { padding: 40px 0 44px; }
	.llr-hero__tools { gap: 12px; }
	.llr-search { max-width: none; flex-basis: 100%; }
	.llr-body { padding: 32px 20px 16px; }

	.llr-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Featured collapses to a normal stacked card. */
	.llr-card--lead { flex-direction: column; }
	.llr-card--lead .llr-card__media {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.llr-card--lead .llr-card__body { padding: 20px 20px 22px; }
	.llr-card--lead .llr-card__excerpt { font-size: 14px; }

	/* article */
	.llr-art__head { padding: 28px 0 20px; }
	.llr-art__hero { margin-bottom: 28px; }
	.llr-art__lede { font-size: 16px; padding-left: 14px; }
	.llr-prose { font-size: 16px; }

	.llr-author { flex-direction: column; gap: 14px; }

	.llr-adjacent { grid-template-columns: minmax(0, 1fr); }
	.llr-adjacent__item--next {
		grid-column: 1;
		text-align: left;
	}

	/* shared */
	.llr-cta { padding: 48px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.llr-blog *,
	.llr-article * {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
	.llr-card.llr-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.llr-hero,
	.llr-chips,
	.llr-progress,
	.llr-toc,
	.llr-adjacent,
	.llr-related,
	.llr-cta,
	.llr-pager { display: none; }

	.llr-prose { max-width: none; }
	.llr-card {
		box-shadow: none;
		break-inside: avoid;
	}
}
/* ============================================================================
   ABOUT PAGE — Life Link Research
   Used by: page-about.php  (Template Name: LLR About)

   REPLACES the previous "ABOUT PAGE" block at the bottom of
   assets/css/llr-blog.css. Delete everything from the old
   "ABOUT PAGE — Life Link Research" comment to the end of the file, then
   paste this in its place.

   Why the bottom and not the middle: the media queries in section 5 of that
   sheet must stay last so they keep winning on source order. This block
   carries its own queries at the end, so appending it is safe.

   Tokens are redeclared on .llr-about because the palette is declared on
   .llr-blog and .llr-article, and this page shares a wrapper with neither.
   The shared primitives (.llr-shell, .llr-crumbs, .llr-btn, .llr-cta) are
   flat selectors in that sheet, so they apply here with no extra work.

   NO !important, and no JavaScript. Entrance motion uses scroll-driven
   animation where the browser supports it; everywhere else the content
   simply renders in place.
   ========================================================================= */

.llr-about {
	/* Brand */
	--llr-navy:      #051E78;
	--llr-navy-deep: #03165B;
	--llr-navy-ink:  #020F42;
	--llr-navy-lift: #0A2A96;
	--llr-gold:      #C9A84C;
	--llr-gold-lift: #D9BC69;
	--llr-cream:     #F5EDDA;

	/* Neutrals */
	--llr-ink:   #0D1330;
	--llr-body:  #3D465E;
	--llr-mute:  #7A839B;
	--llr-line:  #E3E7F2;
	--llr-soft:  #F7F8FC;
	--llr-white: #FFFFFF;

	/* System */
	--llr-shell: 1200px;
	--llr-r:     14px;
	--llr-r-sm:  10px;
	--llr-shadow:    0 1px 2px rgba(5, 30, 120, .05), 0 8px 24px rgba(5, 30, 120, .06);
	--llr-shadow-up: 0 4px 10px rgba(5, 30, 120, .08), 0 18px 44px rgba(5, 30, 120, .14);
	--llr-shadow-lg: 0 24px 70px rgba(2, 15, 66, .38);
	--llr-ease:  cubic-bezier(.22, .61, .36, 1);

	background: var(--llr-white);
	color: var(--llr-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* the creed card and the hero art both bleed slightly */
}

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

.llr-about p { margin: 0 0 1.2em; }
.llr-about p:last-child { margin-bottom: 0; }

.llr-about a { color: var(--llr-navy); }

/* ============================================================
   SHARED TYPE
   ============================================================ */
.llr-ab__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

/* Short gold rule before every kicker. It marks the start of a section the
   same way throughout, so the eye can find section boundaries at a glance. */
.llr-ab__kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	opacity: .85;
}

.llr-ab__h2 {
	margin: 0 0 18px;
	max-width: 22ch;
	font-size: clamp(23px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--llr-navy);
}

.llr-ab__lead {
	max-width: 64ch;
	font-size: 16.5px;
	line-height: 1.72;
}

.llr-ab__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
	transition: color .18s var(--llr-ease);
}
.llr-ab__link span { transition: transform .22s var(--llr-ease); }
.llr-ab__link:hover { color: var(--llr-gold); }
.llr-ab__link:hover span { transform: translateX(4px); }

/* Section rhythm. One value, so the page cannot develop uneven gaps. */
.llr-ab__sec { padding-block: 78px; }

/* Two white sections in a row do not need a full stop between them — the
   heading already does that work. Only the band edges get the full gap. */
.llr-ab__sec + .llr-ab__sec { padding-top: 16px; }
.llr-ab__sec--tight,
.llr-ab__sec + .llr-ab__sec--tight { padding-top: 0; }

/* Two-part section header: title left, standfirst right, baselines aligned. */
.llr-ab__sechead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: 20px 56px;
	align-items: end;
	margin-bottom: 4px;
}
.llr-ab__sechead .llr-ab__h2 { margin-bottom: 0; }
.llr-ab__sechead .llr-ab__lead { padding-bottom: 4px; }

/* ============================================================
   HERO — photographic band
   ============================================================ */
.llr-ab__hero {
	position: relative;
	isolation: isolate;
	padding: 54px 0 0;
	background: var(--llr-navy-deep);
	color: var(--llr-white);
}

/* Layer 0 — the artwork. Set as a Featured Image on the page; the URL is
   printed inline by the template so this rule never has to know it. */
.llr-ab__herobg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden; /* the hero itself must NOT clip — the stat strip hangs out of it */
}

/* The art sits on a child so it can be scaled without escaping the band.
   background-image is inherited from the inline style on the parent, which
   is the only place the URL appears. */
.llr-ab__herobg::before {
	content: "";
	position: absolute;
	inset: -3%;
	background-image: inherit;
	background-position: 72% 28%;
	background-size: cover;
	background-repeat: no-repeat;
	transform-origin: 70% 30%;
	animation: llr-ab-zoom 26s var(--llr-ease) both;
}

/* Layer 1 — the scrim. Heavier on the left, where the headline sits, and
   lifting toward the right so the photograph is still legible as an image. */
.llr-ab__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(93deg,
			rgba(2, 15, 66, .96) 0%,
			rgba(3, 22, 91, .90) 34%,
			rgba(5, 30, 120, .70) 64%,
			rgba(5, 30, 120, .52) 100%),
		radial-gradient(880px 400px at 86% -12%, rgba(201, 168, 76, .26), transparent 62%);
	pointer-events: none;
}

/* Layer 2 — the faint measuring grid, masked so it fades out mid-band. */
.llr-ab__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(72% 100% at 18% 0%, #000, transparent 76%);
	        mask-image: radial-gradient(72% 100% at 18% 0%, #000, transparent 76%);
	pointer-events: none;
}

.llr-ab__hero > .llr-shell { position: relative; z-index: 3; }

.llr-ab__hero .llr-crumbs { color: rgba(255, 255, 255, .58); }
.llr-ab__hero .llr-crumbs a { color: rgba(255, 255, 255, .82); }
.llr-ab__hero .llr-crumbs a:hover { color: var(--llr-gold); }

.llr-ab__herogrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 56px;
	align-items: center;
	padding-top: 14px;
}

.llr-ab__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}
.llr-ab__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
}

.llr-ab__title {
	margin: 0 0 18px;
	max-width: 17ch;
	font-size: clamp(31px, 4.6vw, 52px);
	font-weight: 800;
	line-height: 1.09;
	letter-spacing: -.026em;
	color: var(--llr-white);
	text-wrap: balance;
}

.llr-ab__sub {
	max-width: 58ch;
	font-size: 15.5px;
	line-height: 1.76;
	color: rgba(255, 255, 255, .80);
}

.llr-ab__heroactions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

/* --- specimen record ----------------------------------------------------
   The artifact a researcher actually reads before ordering, shown as glass
   over the photograph. It is the page's anchor image, so nothing else in
   the hero competes with it.
   --------------------------------------------------------------------- */
.llr-ab__record {
	position: relative;
	padding: 22px 24px 20px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-top: 3px solid var(--llr-gold);
	border-radius: var(--llr-r);
	background: rgba(2, 15, 66, .62);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	        backdrop-filter: blur(12px) saturate(130%);
	box-shadow: var(--llr-shadow-lg);
}

.llr-ab__recordhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.llr-ab__recordtag {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

/* Stamp, not a badge — set slightly off square so it reads as applied. */
.llr-ab__recordseal {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(201, 168, 76, .70);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--llr-gold-lift);
	transform: rotate(-7deg);
}

.llr-ab__recordrows { margin: 0; }

.llr-ab__recordrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .15);
}

.llr-ab__recordrow dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.llr-ab__recordrow dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: right;
	color: var(--llr-white);
}

.llr-ab__recordfoot {
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .52);
}

/* --- stat strip ---------------------------------------------------------
   Sits half out of the hero so it reads as a bridge between the band and
   the white page, rather than a fifth paragraph.
   ---------------------------------------------------------------------- */
.llr-ab__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: 52px;
	margin-bottom: -40px;
	overflow: hidden;
	border-radius: var(--llr-r);
	background: var(--llr-line);
	box-shadow: var(--llr-shadow-up);
}

.llr-ab__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 24px 22px 22px;
	background: var(--llr-white);
}

/* Gold tick above each figure — the same mark as the kicker rule, reused. */
.llr-ab__stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22px;
	width: 26px;
	height: 3px;
	background: var(--llr-gold);
}

.llr-ab__statnum {
	font-size: clamp(21px, 2.4vw, 28px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--llr-navy);
	font-variant-numeric: tabular-nums;
}

.llr-ab__statlbl {
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--llr-mute);
}

/* First section after the hero clears the overhanging strip. */
.llr-ab__hero + .llr-ab__sec { padding-top: 102px; }

/* ============================================================
   SPLIT — copy + aside
   ============================================================ */
.llr-ab__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 56px;
	align-items: start;
}

.llr-ab__splitmain { max-width: 62ch; }

.llr-ab__aside {
	position: relative;
	padding: 26px 24px;
	border: 1px solid var(--llr-line);
	border-top: 3px solid var(--llr-gold);
	border-radius: var(--llr-r);
	background:
		linear-gradient(180deg, var(--llr-cream) 0%, var(--llr-soft) 64%);
}

.llr-ab__asidelbl {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8A6F1E; /* gold, darkened for contrast on cream */
}

.llr-ab__ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.llr-ab__ticks li {
	position: relative;
	padding: 11px 0 11px 30px;
	border-top: 1px solid rgba(5, 30, 120, .09);
	font-size: 14px;
	line-height: 1.55;
	color: var(--llr-ink);
}
.llr-ab__ticks li:first-child { border-top: 0; padding-top: 0; }
.llr-ab__ticks li:first-child::before { top: 4px; }
.llr-ab__ticks li:last-child { padding-bottom: 0; }

/* Checkmark drawn in CSS — no icon font, no extra request. */
.llr-ab__ticks li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 15px;
	width: 6px;
	height: 11px;
	border: solid var(--llr-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ============================================================
   BANDS
   ============================================================ */
.llr-ab__band {
	position: relative;
	padding-block: 76px;
	background:
		radial-gradient(760px 340px at 12% 0%, rgba(201, 168, 76, .12), transparent 62%),
		linear-gradient(158deg, var(--llr-navy) 0%, var(--llr-navy-deep) 100%);
	color: rgba(255, 255, 255, .80);
}
.llr-ab__band .llr-ab__h2 { color: var(--llr-white); max-width: 26ch; }

/* Room underneath for the creed card to overlap. */
.llr-ab__band--why { padding-bottom: 132px; }

.llr-ab__band--soft {
	background: var(--llr-cream);
	color: var(--llr-body);
}
.llr-ab__band--soft .llr-ab__h2 { color: var(--llr-navy); }
.llr-ab__band--soft .llr-ab__kicker { color: #8A6F1E; }

.llr-ab__two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px;
	margin-top: 8px;
	font-size: 15.5px;
	line-height: 1.75;
}

/* ============================================================
   THE STANDARD — signature block

   One card, lifted over the band above it, holding the sentence the whole
   company runs on. The four clauses are picked out in gold inside the
   sentence and then restated underneath in the same order, so the reader
   moves from principle to obligations without the sentence being chopped up.
   ============================================================ */
.llr-ab__creedsec {
	position: relative;
	z-index: 2;
	margin-top: -86px;
	padding-bottom: 0;
}

.llr-ab__creed {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 44px 48px 40px;
	border: 1px solid rgba(201, 168, 76, .38);
	border-radius: var(--llr-r);
	background:
		radial-gradient(640px 280px at 88% 0%, rgba(201, 168, 76, .16), transparent 64%),
		linear-gradient(152deg, var(--llr-navy-ink) 0%, var(--llr-navy-deep) 100%);
	box-shadow: var(--llr-shadow-lg);
	/* Cut corner — a document laid on the desk, not a web panel. */
	clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

/* The fold that the cut corner implies. */
.llr-ab__creed::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 34px;
	background: linear-gradient(225deg,
		rgba(201, 168, 76, .90) 0 2px,
		rgba(2, 15, 66, .92) 2px);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.llr-ab__creedlbl {
	margin: 0 0 22px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--llr-gold);
}

.llr-ab__creedquote {
	position: relative;
	margin: 0;
	padding: 0;
	max-width: 900px;
	border: 0;
	font-size: clamp(20px, 2.7vw, 33px);
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: -.018em;
	color: rgba(255, 255, 255, .90);
	text-wrap: pretty;
}

.llr-ab__creedmark {
	position: absolute;
	top: -.34em;
	left: -.30em;
	font-size: 3.2em;
	line-height: 1;
	font-weight: 800;
	color: var(--llr-gold);
	opacity: .18;
	pointer-events: none;
}

/* The four operative clauses, in the sentence itself. */
.llr-ab__creedquote em {
	font-style: normal;
	color: var(--llr-white);
	background-image: linear-gradient(var(--llr-gold), var(--llr-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	padding-bottom: .06em;
}

.llr-ab__creedcap {
	margin: 24px 0 0;
	font-size: 13.5px;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .58);
}

.llr-ab__creedparts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 38px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	list-style: none;
	counter-reset: none;
}

.llr-ab__creedpart {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 0 24px;
	border-left: 1px solid rgba(255, 255, 255, .12);
}
.llr-ab__creedpart:first-child { padding-left: 0; border-left: 0; }
.llr-ab__creedpart:last-child { padding-right: 0; }

.llr-ab__creedno {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--llr-gold);
	font-variant-numeric: tabular-nums;
}

.llr-ab__creedhead {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--llr-white);
}

.llr-ab__creedbody {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .64);
}

/* ============================================================
   SIX TESTS
   ============================================================ */
.llr-ab__tests {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.llr-ab__test {
	position: relative;
	overflow: hidden;
	display: flex;
	gap: 16px;
	padding: 24px 22px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	box-shadow: var(--llr-shadow);
	transition: box-shadow .26s var(--llr-ease), border-color .26s var(--llr-ease);
}

/* Gold rule that draws itself across the top on hover. Feedback without a
   lift, so the entrance animation and the hover state cannot fight over
   the same transform. */
.llr-ab__test::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--llr-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s var(--llr-ease);
}
.llr-ab__test:hover {
	border-color: rgba(201, 168, 76, .55);
	box-shadow: var(--llr-shadow-up);
}
.llr-ab__test:hover::before { transform: scaleX(1); }

.llr-ab__testno {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--llr-r-sm);
	background: var(--llr-cream);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--llr-navy);
	font-variant-numeric: tabular-nums;
	transition: background .26s var(--llr-ease), color .26s var(--llr-ease);
}
.llr-ab__test:hover .llr-ab__testno {
	background: var(--llr-navy);
	color: var(--llr-white);
}

.llr-ab__testbody { min-width: 0; }

.llr-ab__testname {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

/* Method set as a chip: it is an instrument name, not a subtitle. */
.llr-ab__testmethod {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.25;
	background: rgba(201, 168, 76, .16);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8A6F1E;
}

.llr-ab__testdesc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--llr-body);
}

/* ============================================================
   CALLOUT
   ============================================================ */
.llr-ab__callout {
	margin-top: 34px;
	padding: 26px 28px;
	max-width: 78ch;
	border: 1px solid var(--llr-line);
	border-left: 3px solid var(--llr-navy);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-soft);
	font-size: 14.5px;
	line-height: 1.72;
}
.llr-ab__callout strong { color: var(--llr-navy); }

.llr-ab__callout--flag {
	border-left-color: var(--llr-gold);
	background: var(--llr-cream);
}

.llr-ab__linkrow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-bottom: 0;
}

/* ============================================================
   PROCESS

   The numbering here is load-bearing: this is a real sequence and the
   order is the information. Hence the connector between cards.
   ============================================================ */
.llr-ab__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 24px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.llr-ab__step {
	position: relative;
	padding: 24px 22px 26px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
}

/* Short gold rule at the top-left corner. */
.llr-ab__step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 46px;
	height: 3px;
	border-radius: var(--llr-r) 0 0 0;
	background: var(--llr-gold);
}

/* Dashed connector across the gutter, drawn only between cards that sit
   side by side. Suppressed at the end of each row so no line ever points
   into empty space. */
.llr-ab__step::after {
	content: "";
	position: absolute;
	top: 40px;
	right: -24px;
	width: 24px;
	border-top: 1px dashed rgba(5, 30, 120, .28);
}
.llr-ab__step:nth-child(3n)::after,
.llr-ab__step:last-child::after { content: none; }

.llr-ab__stepno {
	display: block;
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--llr-navy);
	opacity: .26;
	font-variant-numeric: tabular-nums;
}

.llr-ab__stephead {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-ab__steptext {
	margin: 0;
	font-size: 14px;
	line-height: 1.66;
	color: var(--llr-body);
}

/* ============================================================
   SHIPPING FEATURES
   ============================================================ */
.llr-ab__feats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 36px;
}

.llr-ab__feat {
	padding-top: 22px;
	border-top: 2px solid var(--llr-cream);
	font-size: 14.5px;
	line-height: 1.68;
}

.llr-ab__featicon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: var(--llr-r-sm);
	background: var(--llr-cream);
	color: var(--llr-navy);
}
.llr-ab__featicon svg { width: 21px; height: 21px; }

.llr-ab__featname {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

/* ============================================================
   RESEARCH USE ONLY
   ============================================================ */
.llr-ab__ruo {
	position: relative;
	overflow: hidden;
	padding: 32px 34px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-soft);
	font-size: 14.5px;
	line-height: 1.72;
}

/* Hazard rule along the top — the one place on the page that borrows a
   lab-signage device, because this is the one legally binding block. */
.llr-ab__ruo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(
		135deg,
		var(--llr-gold) 0 10px,
		var(--llr-navy) 10px 20px
	);
	opacity: .85;
}

.llr-ab__ruolbl {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-navy);
}

/* ============================================================
   CTA
   ============================================================ */
.llr-ab__cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Same artwork as the hero, far back — the page closes where it opened. */
.llr-ab__ctabg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-position: center 34%;
	background-size: cover;
	opacity: .20;
	filter: saturate(.7);
}

.llr-ab__cta .llr-cta__inner { position: relative; z-index: 1; }

.llr-ab__ctarow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 0;
}

/* Ghost variant for the secondary action, so the two buttons do not
   compete. Only exists on this page, hence the .llr-about scope. */
.llr-about .llr-btn--ghost {
	border-color: rgba(255, 255, 255, .40);
	background: rgba(255, 255, 255, .06);
	color: var(--llr-white);
}
.llr-about .llr-btn--ghost:hover {
	border-color: var(--llr-white);
	background: rgba(255, 255, 255, .14);
	color: var(--llr-white);
}

/* ============================================================
   MOTION

   Scroll-driven, so there is no observer script to load and nothing to
   go wrong if JavaScript fails. Browsers without animation-timeline skip
   the whole block and render the content in place.
   ============================================================ */
@keyframes llr-ab-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

@keyframes llr-ab-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.llr-ab__test,
		.llr-ab__step,
		.llr-ab__feat,
		.llr-ab__creedpart {
			animation: llr-ab-rise linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 72%;
		}
	}
}

/* ============================================================
   ABOUT RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
	.llr-ab__herogrid {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 40px;
	}
	.llr-ab__creed { padding: 38px 34px 34px; }
	.llr-ab__creedparts { gap: 24px 0; }
}

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

	.llr-ab__herogrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
	.llr-ab__title { max-width: 20ch; }
	.llr-ab__record { max-width: 460px; }

	.llr-ab__sechead { grid-template-columns: minmax(0, 1fr); gap: 14px; }

	.llr-ab__tests,
	.llr-ab__steps,
	.llr-ab__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Connector follows the new row width. */
	.llr-ab__step:nth-child(3n)::after { content: ""; }
	.llr-ab__step:nth-child(2n)::after,
	.llr-ab__step:last-child::after { content: none; }

	.llr-ab__creedparts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.llr-ab__creedpart:nth-child(odd) { padding-left: 0; border-left: 0; }
	.llr-ab__creedpart:nth-child(n+3) {
		padding-top: 22px;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.llr-ab__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.llr-ab__aside { max-width: 62ch; }
}

@media (max-width: 760px) {
	.llr-ab__hero { padding-top: 36px; }
	.llr-ab__herobg { background-position: 62% 30%; }
	.llr-ab__sec { padding-block: 54px; }
	.llr-ab__sec + .llr-ab__sec { padding-top: 8px; }
	.llr-ab__sec--tight,
	.llr-ab__sec + .llr-ab__sec--tight { padding-top: 0; }
	.llr-ab__hero + .llr-ab__sec { padding-top: 82px; }
	.llr-ab__band { padding-block: 54px; }
	.llr-ab__band--why { padding-bottom: 108px; }

	.llr-ab__heroactions { flex-direction: column; align-items: stretch; }
	.llr-ab__heroactions .llr-btn { justify-content: center; text-align: center; }

	.llr-ab__record { padding: 20px 20px 18px; }
	.llr-ab__recordrow { gap: 12px; }

	.llr-ab__stats {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 36px;
		margin-bottom: -32px;
	}
	.llr-ab__stat {
		flex-direction: row;
		align-items: baseline;
		gap: 14px;
		padding: 18px 18px;
	}
	.llr-ab__stat::before { left: 18px; }
	.llr-ab__statnum { min-width: 96px; }

	.llr-ab__two { grid-template-columns: minmax(0, 1fr); gap: 0; }

	.llr-ab__creedsec { margin-top: -70px; }
	.llr-ab__creed { padding: 30px 22px 28px; }
	.llr-ab__creedmark { display: none; }
	.llr-ab__creedparts {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 28px;
		padding-top: 22px;
	}
	.llr-ab__creedpart {
		padding: 18px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.llr-ab__creedpart:first-child { padding-top: 0; border-top: 0; }
	.llr-ab__creedpart:nth-child(n+3) { padding-top: 18px; }

	.llr-ab__tests,
	.llr-ab__steps,
	.llr-ab__feats { grid-template-columns: minmax(0, 1fr); }

	.llr-ab__steps { gap: 20px; }
	/* Written at nth-child specificity so it outranks the two-column rule
	   above, which is more specific than a bare ::after would be. */
	.llr-ab__step::after,
	.llr-ab__step:nth-child(2n)::after,
	.llr-ab__step:nth-child(3n)::after { content: none; }

	.llr-ab__callout { padding: 20px 20px; }
	.llr-ab__ruo { padding: 26px 22px; }
	.llr-ab__ctarow { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.llr-about * {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
	.llr-ab__herobg::before { animation: none; transform: none; }
	.llr-ab__test,
	.llr-ab__step,
	.llr-ab__feat,
	.llr-ab__creedpart { animation: none; opacity: 1; transform: none; }
}

@media print {
	.llr-about .llr-cta { display: none; }
	.llr-ab__herobg,
	.llr-ab__ctabg { display: none; }
	.llr-ab__test,
	.llr-ab__step,
	.llr-ab__creed { break-inside: avoid; box-shadow: none; }
	.llr-ab__creed { clip-path: none; }
}


/* ============================================================================
   QUALITY & TESTING — Life Link Research
   Used by: page-quality-testing.php  (Template Name: LLR Quality & Testing)

   PASTE AT THE VERY BOTTOM of assets/css/llr-blog.css, after the About block.
   This block carries its own media queries at the end, so appending is safe.

   Tokens are redeclared on .llr-quality for the same reason they are on
   .llr-about: the palette is declared per wrapper, and this page shares a
   wrapper with none of the others. The shared primitives (.llr-shell,
   .llr-crumbs, .llr-btn, .llr-cta, .llr-sr) are flat selectors in that
   sheet, so they apply here with no extra work.

   This is a reference document, not a marketing page. Everything below is
   set for scanning and re-reading: a fixed measure, tables that hold their
   shape, and one accent colour used only where a value needs to be found
   again quickly.

   NO !important.
   ========================================================================= */

.llr-quality {
	/* Brand */
	--llr-navy:      #051E78;
	--llr-navy-deep: #03165B;
	--llr-navy-ink:  #020F42;
	--llr-navy-lift: #0A2A96;
	--llr-gold:      #C9A84C;
	--llr-gold-ink:  #8A6F1E;   /* gold darkened until it passes on white */
	--llr-gold-lift: #D9BC69;
	--llr-cream:     #F5EDDA;

	/* Neutrals */
	--llr-ink:   #0D1330;
	--llr-body:  #3D465E;
	--llr-mute:  #7A839B;
	--llr-line:  #E3E7F2;
	--llr-soft:  #F7F8FC;
	--llr-white: #FFFFFF;

	/* System */
	--llr-shell: 1200px;
	--llr-rail:  248px;
	--llr-r:     14px;
	--llr-r-sm:  10px;
	--llr-shadow:    0 1px 2px rgba(5, 30, 120, .05), 0 8px 24px rgba(5, 30, 120, .06);
	--llr-shadow-up: 0 4px 10px rgba(5, 30, 120, .08), 0 18px 44px rgba(5, 30, 120, .14);
	--llr-ease:  cubic-bezier(.22, .61, .36, 1);
	--llr-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	background: var(--llr-white);
	color: var(--llr-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

.llr-quality p { margin: 0 0 1.15em; }
.llr-quality p:last-child { margin-bottom: 0; }

.llr-quality a { color: var(--llr-navy); }
.llr-quality a:hover { color: var(--llr-gold-ink); }

/* Anchor targets are focused by the script; never draw a focus ring on a
   whole section, only on things the reader can actually operate. */
.llr-quality section:focus,
.llr-quality section:focus-visible { outline: none; }

/* ============================================================
   HERO — compact. This is a document, so the title band earns
   about a third of the space the About hero takes.
   ============================================================ */
.llr-q__hero {
	position: relative;
	overflow: hidden;
	padding: 52px 0 46px;
	background:
		radial-gradient(820px 380px at 88% -20%, rgba(201, 168, 76, .20), transparent 60%),
		linear-gradient(158deg, var(--llr-navy) 0%, var(--llr-navy-deep) 100%);
	color: rgba(255, 255, 255, .80);
}

.llr-q__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	        mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 78%);
	pointer-events: none;
}

.llr-q__hero > .llr-shell { position: relative; z-index: 1; }

.llr-q__hero .llr-crumbs { color: rgba(255, 255, 255, .55); }
.llr-q__hero .llr-crumbs a { color: rgba(255, 255, 255, .82); }
.llr-q__hero .llr-crumbs a:hover { color: var(--llr-gold); }

.llr-q__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-gold);
}
.llr-q__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
}

.llr-q__title {
	margin: 0 0 16px;
	max-width: 24ch;
	font-size: clamp(28px, 3.9vw, 44px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--llr-white);
	text-wrap: balance;
}

.llr-q__lede {
	max-width: 72ch;
	font-size: 15.5px;
	line-height: 1.76;
	color: rgba(255, 255, 255, .80);
}

.llr-q__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	font-family: var(--llr-mono);
	font-size: 11.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .52);
}
.llr-q__metasep { color: rgba(201, 168, 76, .8); }

/* The panel, named once at the top so the reader knows what is coming. */
.llr-q__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.llr-q__chips li {
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .88);
}

/* ============================================================
   LAYOUT — contents rail + document
   ============================================================ */
.llr-q__layout {
	display: grid;
	grid-template-columns: var(--llr-rail) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	padding-top: 56px;
	padding-bottom: 72px;
}

.llr-q__rail { position: relative; }

.llr-q__railinner {
	position: sticky;
	top: 104px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding-right: 6px;
}

.llr-q__raillbl {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--llr-mute);
}

.llr-q__toc {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--llr-line);
}

.llr-q__toc a {
	display: block;
	padding: 8px 0 8px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--llr-mute);
	text-decoration: none;
	transition: color .18s var(--llr-ease), border-color .18s var(--llr-ease);
}
.llr-q__toc a:hover { color: var(--llr-navy); }
.llr-q__toc a.is-active {
	border-left-color: var(--llr-gold);
	font-weight: 700;
	color: var(--llr-navy);
}

.llr-q__railcta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--llr-navy);
	text-decoration: none;
}
.llr-q__railcta span { transition: transform .22s var(--llr-ease); }
.llr-q__railcta:hover span { transform: translateX(4px); }

/* --- the document ------------------------------------------------------
   The column is wider than the reading measure on purpose. Prose is held
   to ~72 characters, but the two tables and the workflow get the full
   column, because a table squeezed to a paragraph's width is the thing
   that makes reference pages unreadable.
   --------------------------------------------------------------------- */
.llr-q__doc { max-width: none; }

.llr-q__standfirst,
.llr-q__sec > p,
.llr-q__test p,
.llr-q__pull,
.llr-q__flowbody,
.llr-q__qabody,
.llr-q__figure figcaption { max-width: 72ch; }

.llr-q__standfirst {
	margin: 0 0 8px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--llr-line);
	font-size: 17px;
	line-height: 1.68;
	color: var(--llr-ink);
}

.llr-q__sec { padding-top: 46px; }

.llr-q__h2 {
	margin: 0 0 16px;
	font-size: clamp(22px, 2.6vw, 29px);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--llr-navy);
	scroll-margin-top: 100px;
}

.llr-q__h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--llr-navy);
	scroll-margin-top: 100px;
}

.llr-q__sec { scroll-margin-top: 100px; }

/* ============================================================
   TABLES

   Wrapped in a scroller rather than collapsed into stacked cards: the
   whole value of these two tables is reading ACROSS a row, and a stacked
   card destroys that comparison on exactly the devices where it is most
   needed.
   ============================================================ */
.llr-q__tablewrap {
	margin: 26px 0 24px;
	overflow-x: auto;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	box-shadow: var(--llr-shadow);
	-webkit-overflow-scrolling: touch;

	/* Scroll shadows. The two white panels are attached to the content and
	   slide away with it; the two grey ones are attached to the frame and
	   stay put. The result is a shadow on whichever edge still has table
	   behind it, and none once you reach the end — the only honest way to
	   signal a sideways scroll without a script. */
	background-color: var(--llr-white);
	background-image:
		linear-gradient(90deg, var(--llr-white), rgba(255, 255, 255, 0)),
		linear-gradient(90deg, rgba(255, 255, 255, 0), var(--llr-white)),
		radial-gradient(farthest-side at 0 50%, rgba(5, 30, 120, .13), rgba(5, 30, 120, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(5, 30, 120, .13), rgba(5, 30, 120, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-size: 36px 100%, 36px 100%, 16px 100%, 16px 100%;
	background-repeat: no-repeat;
	background-attachment: local, local, scroll, scroll;
}
.llr-q__tablewrap:focus-visible {
	outline: 2px solid var(--llr-gold);
	outline-offset: 2px;
}

.llr-q__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
}

.llr-q__table thead th {
	padding: 13px 18px;
	border-bottom: 1px solid var(--llr-line);
	background: var(--llr-soft);
	font-family: var(--llr-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--llr-mute);
}

.llr-q__table tbody th,
.llr-q__table tbody td {
	padding: 15px 18px;
	border-bottom: 1px solid var(--llr-line);
	text-align: left;
	vertical-align: top;
}
.llr-q__table tbody tr:last-child th,
.llr-q__table tbody tr:last-child td { border-bottom: 0; }

.llr-q__table tbody th {
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
	white-space: nowrap;
}

.llr-q__mono {
	font-family: var(--llr-mono);
	font-size: 12.5px;
	color: var(--llr-body);
}

/* The standard is the column a returning reader scans for. */
.llr-q__std {
	color: var(--llr-gold-ink);
	font-weight: 600;
	white-space: nowrap;
}

/* --- comparison --------------------------------------------------------- */
/* Seven columns in one column width: the padding comes down and the long
   header labels are allowed to wrap, so the whole grid fits without a
   sideways scroll on desktop. */
.llr-q__table--compare thead th,
.llr-q__table--compare tbody th,
.llr-q__table--compare tbody td { padding-inline: 12px; }
.llr-q__table--compare thead th {
	white-space: normal;
	font-size: 10px;
	letter-spacing: .08em;
}
.llr-q__table--compare tbody th { white-space: normal; font-size: 13.5px; }
.llr-q__table--compare tbody td { text-align: center; vertical-align: middle; }
.llr-q__table--compare thead th:not(:first-child) { text-align: center; }

/* .llr-sr is position:absolute with no offsets, so without a positioned
   cell its containing block is the viewport: the screen-reader labels
   escape the table's scroll container and drag the whole document
   sideways on narrow screens. Positioning the cell keeps them home. */
.llr-q__yes,
.llr-q__no { position: relative; }

.llr-q__yes [aria-hidden],
.llr-q__no [aria-hidden] {
	display: inline-block;
	vertical-align: middle;
}

/* Checkmark and dash drawn in CSS — no icon font, no extra request. */
.llr-q__yes [aria-hidden] {
	width: 7px;
	height: 12px;
	border: solid var(--llr-navy);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.llr-q__no [aria-hidden] {
	width: 12px;
	height: 2px;
	background: var(--llr-line);
}

.llr-q__maybe {
	font-size: 12.5px;
	color: var(--llr-mute);
}

.llr-q__usrow th,
.llr-q__usrow td { background: var(--llr-cream); }
.llr-q__usrow th {
	position: relative;
	color: var(--llr-navy);
}
.llr-q__usrow th::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--llr-gold);
}
.llr-q__usrow .llr-q__yes [aria-hidden] { border-color: var(--llr-gold-ink); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.llr-q__pull {
	margin: 28px 0;
	padding: 22px 26px;
	border: 0;
	border-left: 3px solid var(--llr-gold);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-soft);
	font-size: 17px;
	line-height: 1.55;
	font-weight: 600;
	letter-spacing: -.012em;
	color: var(--llr-navy);
}

/* ============================================================
   THE SIX TESTS
   ============================================================ */
.llr-q__test {
	margin-top: 26px;
	padding: 24px 26px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	transition: border-color .24s var(--llr-ease), box-shadow .24s var(--llr-ease);
}
.llr-q__test:hover {
	border-color: rgba(201, 168, 76, .5);
	box-shadow: var(--llr-shadow);
}

.llr-q__testhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 12px;
}

.llr-q__testno {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--llr-r-sm);
	background: var(--llr-cream);
	font-family: var(--llr-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--llr-navy);
}

.llr-q__badge {
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(5, 30, 120, .07);
	font-family: var(--llr-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--llr-navy);
}

.llr-q__test p {
	margin: 0;
	font-size: 15px;
	line-height: 1.72;
}

/* ============================================================
   WORKFLOW
   ============================================================ */
.llr-q__figure {
	margin: 28px 0;
	padding: 0;
}
.llr-q__figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-navy-deep);
	box-shadow: var(--llr-shadow);
}
.llr-q__figure figcaption {
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--llr-mute);
}

.llr-q__flow {
	margin: 28px 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.llr-q__flowstep {
	position: relative;
	display: flex;
	gap: 18px;
	padding-bottom: 22px;
}
.llr-q__flowstep:last-child { padding-bottom: 0; }

/* The rail connecting the steps. It stops at the last number rather than
   running past it, because the sequence genuinely ends there. */
.llr-q__flowstep::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 36px;
	bottom: -2px;
	width: 1px;
	background: var(--llr-line);
}
.llr-q__flowstep:last-child::before { content: none; }

.llr-q__flowno {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	flex: none;
	width: 35px;
	height: 35px;
	border: 1px solid var(--llr-line);
	border-radius: 50%;
	background: var(--llr-white);
	font-family: var(--llr-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--llr-navy);
}

.llr-q__flowhead {
	margin: 6px 0 3px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-q__flowbody {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.66;
}

/* ============================================================
   FAILURE FLAG
   ============================================================ */
.llr-q__flag {
	padding: 24px 26px;
	border: 1px solid rgba(201, 168, 76, .45);
	border-left: 3px solid var(--llr-gold);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-cream);
	font-size: 15px;
	line-height: 1.72;
	color: var(--llr-ink);
}
.llr-q__flag strong { color: var(--llr-navy); }

/* ============================================================
   RESEARCH USE ONLY
   ============================================================ */
.llr-q__ruo {
	position: relative;
	overflow: hidden;
	margin-top: 22px;
	padding: 28px 30px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-soft);
	font-size: 14.5px;
	line-height: 1.72;
}

/* Hazard rule — the same device used on the About page, for the same
   reason: this is the one legally binding block on the page. */
.llr-q__ruo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(
		135deg,
		var(--llr-gold) 0 10px,
		var(--llr-navy) 10px 20px
	);
	opacity: .85;
}

.llr-q__ruolbl {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-navy);
}

/* ============================================================
   FAQ
   ============================================================ */
.llr-q__faq {
	margin-top: 24px;
	border-top: 1px solid var(--llr-line);
}

.llr-q__qa { border-bottom: 1px solid var(--llr-line); }

.llr-q__qa summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 2px;
	list-style: none;
	cursor: pointer;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
	transition: color .18s var(--llr-ease);
}
.llr-q__qa summary::-webkit-details-marker { display: none; }
.llr-q__qa summary:hover { color: var(--llr-navy-lift); }
.llr-q__qa summary:focus-visible {
	outline: 2px solid var(--llr-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Plus that becomes a minus. Two bars, one of which rotates away. */
.llr-q__qaicon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}
.llr-q__qaicon::before,
.llr-q__qaicon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--llr-gold-ink);
	transition: transform .24s var(--llr-ease);
}
.llr-q__qaicon::after { transform: rotate(90deg); }
.llr-q__qa[open] .llr-q__qaicon::after { transform: rotate(0deg); }

.llr-q__qabody {
	padding: 0 2px 20px;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.72;
}

/* ============================================================
   CTA

   .llr-cta__sub centres itself with margin-inline:auto in the shared
   sheet, but the scoped `p` reset above resets all four margins and out-
   ranks it. Restoring the centring here rather than weakening the reset.
   ============================================================ */
.llr-about .llr-cta__sub,
.llr-quality .llr-cta__sub { margin-inline: auto; }

.llr-q__ctarow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 0;
}

.llr-q__ctalink {
	margin: 20px 0 0;
	font-size: 13px;
	letter-spacing: .03em;
}
.llr-q__ctalink a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	padding-bottom: 2px;
}
.llr-q__ctalink a:hover { color: var(--llr-gold); border-bottom-color: var(--llr-gold); }

.llr-quality .llr-btn--ghost {
	border-color: rgba(255, 255, 255, .40);
	background: rgba(255, 255, 255, .06);
	color: var(--llr-white);
}
.llr-quality .llr-btn--ghost:hover {
	border-color: var(--llr-white);
	background: rgba(255, 255, 255, .14);
	color: var(--llr-white);
}

/* ============================================================
   QUALITY RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
	.llr-q__layout {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 44px;
	}
}

/* Below this the rail becomes a plain contents box at the top of the
   document. A sticky rail on a narrow screen is a scroll trap, not a
   navigation aid. */
@media (max-width: 900px) {
	.llr-q__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-top: 40px;
	}

	.llr-q__rail { order: -1; margin-bottom: 34px; }
	.llr-q__railinner {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 20px 22px;
		border: 1px solid var(--llr-line);
		border-top: 3px solid var(--llr-gold);
		border-radius: var(--llr-r);
		background: var(--llr-soft);
	}
	.llr-q__toc {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-left: 0;
	}
	.llr-q__toc a {
		margin-left: 0;
		padding: 7px 0;
		border-left: 0;
	}
	.llr-q__toc a.is-active { border-left: 0; }

	.llr-q__doc { max-width: none; }
}

@media (max-width: 760px) {
	.llr-q__hero { padding: 38px 0 36px; }
	.llr-q__title { max-width: none; }
	.llr-q__chips { gap: 6px; }
	.llr-q__chips li { padding: 5px 11px; font-size: 11.5px; }

	.llr-q__layout { padding-bottom: 52px; }
	.llr-q__sec { padding-top: 38px; }

	.llr-q__toc { grid-template-columns: minmax(0, 1fr); }

	.llr-q__test { padding: 20px 18px; }
	.llr-q__pull { padding: 18px 18px; font-size: 15.5px; }
	.llr-q__flag,
	.llr-q__ruo { padding: 22px 20px; }

	/* Tables keep their shape and scroll sideways — see the note above. */
	.llr-q__table { font-size: 13.5px; }
	.llr-q__table thead th { padding: 11px 14px; }
	.llr-q__table tbody th,
	.llr-q__table tbody td { padding: 13px 14px; }
	.llr-q__table tbody td { min-width: 150px; }
	.llr-q__table--compare tbody td { min-width: 90px; }

	.llr-q__ctarow { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.llr-quality * {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
}

@media print {
	.llr-quality .llr-cta,
	.llr-q__rail { display: none; }
	.llr-q__layout { display: block; }
	.llr-q__doc { max-width: none; }
	.llr-q__test,
	.llr-q__flowstep,
	.llr-q__table tr { break-inside: avoid; box-shadow: none; }
	.llr-q__qa[open] .llr-q__qabody,
	.llr-q__qabody { display: block; }
	.llr-q__tablewrap { overflow: visible; box-shadow: none; }
}



/* ============================================================================
   PEPTIDE STORAGE — Life Link Research
   Used by: page-peptide-storage.php  (Template Name: LLR Peptide Storage)

   PASTE AT THE VERY BOTTOM of assets/css/llr-blog.css, AFTER the Quality &
   Testing block. It depends on that block: the page's <main> carries both
   .llr-quality and .llr-storage, so the hero, contents rail, tables, flags,
   FAQ and CTA all come from there already built. If the Quality block is
   missing, this page renders unstyled.

   Everything below is only what this page has and the Quality page does
   not: the temperature cards, the residue markers, the label list and the
   checklist. Four small components, no second copy of the shell.

   NO !important.
   ========================================================================= */

/* The glance table is two rows of five short phrases. Left-aligned reads
   better than centred here — each cell is a sentence fragment, not a mark. */
.llr-s__table--glance tbody th { white-space: normal; min-width: 12ch; }
.llr-s__table--glance tbody td { color: var(--llr-body); }

/* ============================================================
   TEMPERATURE CARDS

   Three real choices a researcher picks between, so they sit side by side
   rather than as three more paragraphs. The value leads, because that is
   what the reader came to compare.
   ============================================================ */
.llr-s__temps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.llr-s__temp {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 22px 20px 20px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	transition: border-color .24s var(--llr-ease), box-shadow .24s var(--llr-ease);
}
.llr-s__temp:hover {
	border-color: rgba(201, 168, 76, .5);
	box-shadow: var(--llr-shadow);
}

/* A cold-to-colder ramp across the three cards: the gold bar grows as the
   temperature drops, so the sequence is visible before it is read. */
.llr-s__temp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--llr-gold);
}
.llr-s__temp:nth-child(1)::before { width: 34%; }
.llr-s__temp:nth-child(2)::before { width: 67%; }
.llr-s__temp:nth-child(3)::before { width: 100%; }

.llr-s__tempval {
	font-family: var(--llr-mono);
	font-size: clamp(24px, 3vw, 31px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--llr-navy);
	font-variant-numeric: tabular-nums;
}

.llr-s__temprole {
	margin-top: 10px;
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--llr-cream);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--llr-gold-ink);
}

.llr-s__tempname {
	margin: 12px 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-s__tempbody {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.64;
	color: var(--llr-body);
}

/* ============================================================
   OXIDATION-PRONE RESIDUES

   Three names the reader will meet again on a COA, so they are set as
   labels rather than buried in the sentence above them.
   ============================================================ */
.llr-s__residues {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0;
	padding: 0;
	list-style: none;
}

.llr-s__residues li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px 7px 8px;
	border: 1px solid var(--llr-line);
	border-radius: 999px;
	background: var(--llr-soft);
	font-size: 13.5px;
	color: var(--llr-ink);
}

.llr-s__res {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--llr-navy);
	font-family: var(--llr-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--llr-white);
}

/* ============================================================
   LABEL LIST — what goes on every tube
   ============================================================ */
.llr-s__label {
	margin-top: 24px;
	padding: 22px 24px;
	border: 1px solid var(--llr-line);
	border-left: 3px solid var(--llr-navy);
	border-radius: 0 var(--llr-r-sm) var(--llr-r-sm) 0;
	background: var(--llr-soft);
}

.llr-s__labellbl {
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--llr-navy);
}

.llr-s__label ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.llr-s__label li {
	padding: 6px 13px;
	border: 1px dashed rgba(5, 30, 120, .28);
	border-radius: var(--llr-r-sm);
	background: var(--llr-white);
	font-family: var(--llr-mono);
	font-size: 12px;
	color: var(--llr-navy);
}

/* ============================================================
   CHECKLIST

   Ruled rows rather than cards: this is the one part of the page a
   reader will run down with a vial in hand, and eight boxes would make
   that scan slower, not faster.
   ============================================================ */
.llr-s__check {
	margin: 26px 0 0;
	padding: 4px 0 0;
	list-style: none;
	border-top: 1px solid var(--llr-line);
}

.llr-s__check li {
	position: relative;
	padding: 14px 0 14px 34px;
	border-bottom: 1px solid var(--llr-line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--llr-ink);
}

/* Checkmark drawn in CSS — no icon font, no extra request. */
.llr-s__check li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 20px;
	width: 6px;
	height: 12px;
	border: solid var(--llr-gold-ink);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ============================================================
   STORAGE RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.llr-s__temps { gap: 14px; }
}

@media (max-width: 760px) {
	.llr-s__temps { grid-template-columns: minmax(0, 1fr); }

	/* The ramp only reads as a ramp in a row; stacked, every card gets the
	   same rule and the width difference would look like a mistake. */
	.llr-s__temp:nth-child(1)::before,
	.llr-s__temp:nth-child(2)::before,
	.llr-s__temp:nth-child(3)::before { width: 46px; }

	.llr-s__label { padding: 20px 18px; }
	.llr-s__check li { padding: 13px 0 13px 30px; font-size: 14.5px; }
	.llr-s__check li::before { left: 4px; top: 19px; }

	.llr-s__table--glance tbody td { min-width: 130px; }
}

@media print {
	.llr-s__temp,
	.llr-s__check li { break-inside: avoid; box-shadow: none; }
}



/* ============================================================================
   PEPTIDE RECONSTITUTION — Life Link Research
   Used by: page-peptide-reconstitution.php  (Template Name: LLR Peptide
   Reconstitution)

   PASTE AT THE VERY BOTTOM of assets/css/llr-blog.css, AFTER the Quality &
   Testing block. It depends on that block: the page's <main> carries both
   .llr-quality and .llr-recon, so the hero, contents rail, numbered steps,
   figure, RUO block, FAQ and CTA all come from there already built. If the
   Quality block is missing, this page renders unstyled.

   Three components only — the formula, the mistakes list and the checklist.
   The checklist rules are near-identical to .llr-s__check on the Storage
   page. That is deliberate duplication of about fifteen lines, chosen over
   making this page depend on the Storage block as well: a three-file chain
   is a worse thing to remember than a repeated border-bottom.

   NO !important.
   ========================================================================= */

/* ============================================================
   THE FORMULA

   Set as a plate rather than a sentence, because it is the one line on the
   page a reader will come back to and re-read on its own.
   ============================================================ */
.llr-r__formula {
	margin: 26px 0;
	padding: 24px 26px;
	border-radius: var(--llr-r);
	background:
		radial-gradient(520px 220px at 88% 0%, rgba(201, 168, 76, .16), transparent 64%),
		linear-gradient(152deg, var(--llr-navy-ink) 0%, var(--llr-navy-deep) 100%);
	font-family: var(--llr-mono);
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--llr-white);
	box-shadow: var(--llr-shadow);
}

/* ============================================================
   COMMON MISTAKES

   The habit is the heading and the correction is the body, so a reader
   scanning only the bold lines still gets the list of things not to do.
   ============================================================ */
.llr-r__mistakes {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.llr-r__mistakes li {
	position: relative;
	margin-bottom: 12px;
	padding: 18px 22px 18px 52px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	transition: border-color .24s var(--llr-ease), box-shadow .24s var(--llr-ease);
}
.llr-r__mistakes li:last-child { margin-bottom: 0; }
.llr-r__mistakes li:hover {
	border-color: rgba(201, 168, 76, .5);
	box-shadow: var(--llr-shadow);
}

/* A cross, drawn in CSS. Two bars rather than a character, so it lines up
   with the checkmarks elsewhere on the site instead of sitting on a
   font's own baseline. */
.llr-r__mistakes li::before,
.llr-r__mistakes li::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 26px;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background: var(--llr-gold-ink);
}
.llr-r__mistakes li::before { transform: rotate(45deg); }
.llr-r__mistakes li::after { transform: rotate(-45deg); }

.llr-r__mistakehead {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-r__mistakebody {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--llr-body);
}

/* ============================================================
   CHECKLIST

   Ruled rows rather than cards: this is the part a reader runs down with a
   vial in hand, and seven boxes would slow that scan rather than speed it.
   ============================================================ */
.llr-r__check {
	margin: 24px 0 0;
	padding: 4px 0 0;
	list-style: none;
	border-top: 1px solid var(--llr-line);
}

.llr-r__check li {
	position: relative;
	padding: 14px 0 14px 34px;
	border-bottom: 1px solid var(--llr-line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--llr-ink);
}

.llr-r__check li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 20px;
	width: 6px;
	height: 12px;
	border: solid var(--llr-gold-ink);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ============================================================
   RECONSTITUTION RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
	.llr-r__formula {
		padding: 20px 16px;
		text-align: left;
	}

	.llr-r__mistakes li { padding: 16px 18px 16px 46px; }
	.llr-r__mistakes li::before,
	.llr-r__mistakes li::after { left: 18px; top: 25px; }

	.llr-r__check li { padding: 13px 0 13px 30px; font-size: 14.5px; }
	.llr-r__check li::before { left: 4px; top: 19px; }
}

@media print {
	.llr-r__mistakes li,
	.llr-r__check li { break-inside: avoid; box-shadow: none; }
}


/* ============================================================================
   INTRODUCTION TO PEPTIDES — Life Link Research
   Used by: page-what-are-peptides.php  (Template Name: LLR Introduction to
   Peptides)

   PASTE AT THE VERY BOTTOM of assets/css/llr-blog.css, AFTER the Quality &
   Testing block. It depends on that block: the page's <main> carries both
   .llr-quality and .llr-intro, so the hero, contents rail, pull quote, RUO
   block, FAQ and CTA all come from there already built. If the Quality block
   is missing, this page renders unstyled.

   Two components only — the glossary and the read-more list. Everything else
   on the page is prose, which is what an explainer should mostly be.

   NO !important.
   ========================================================================= */

/* ============================================================
   GLOSSARY

   A real <dl>, ruled rather than boxed. Someone using this is jumping to
   one term, not reading eight cards, so the term column is fixed and the
   definitions all start on the same line — that is what makes a glossary
   scannable rather than just a list.
   ============================================================ */
.llr-i__terms {
	margin: 26px 0 0;
	padding: 4px 0 0;
	border-top: 1px solid var(--llr-line);
}

.llr-i__term {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 4px 24px;
	padding: 15px 0;
	border-bottom: 1px solid var(--llr-line);
}

.llr-i__term dt {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-i__term dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--llr-body);
}

/* ============================================================
   READ MORE

   Whole-card links: the target is the card, not the four words inside it,
   which matters more on a phone than anywhere else.
   ============================================================ */
.llr-i__more {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.llr-i__more a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 20px 46px 20px 22px;
	border: 1px solid var(--llr-line);
	border-radius: var(--llr-r);
	background: var(--llr-white);
	text-decoration: none;
	transition: border-color .24s var(--llr-ease), box-shadow .24s var(--llr-ease);
}
.llr-i__more a:hover {
	border-color: rgba(201, 168, 76, .55);
	box-shadow: var(--llr-shadow);
}
.llr-i__more a:focus-visible {
	outline: 2px solid var(--llr-gold);
	outline-offset: 3px;
}

/* Arrow drawn from two borders, so it inherits the link colour and needs
   no glyph that might not be in the theme's font. */
.llr-i__more a::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 26px;
	width: 7px;
	height: 7px;
	border: solid var(--llr-gold-ink);
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	transition: transform .22s var(--llr-ease);
}
.llr-i__more a:hover::after { transform: rotate(45deg) translate(3px, -3px); }

.llr-i__morehead {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--llr-navy);
}

.llr-i__morebody {
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--llr-body);
}

/* ============================================================
   INTRO RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.llr-i__term { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 760px) {
	/* Stacked, the fixed term column would leave a ragged gap on every row,
	   so the definition moves under its term instead. */
	.llr-i__term {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 14px 0;
	}

	.llr-i__more { grid-template-columns: minmax(0, 1fr); }
	.llr-i__more a { padding: 18px 42px 18px 18px; }
	.llr-i__more a::after { right: 18px; top: 24px; }
}

@media print {
	.llr-i__term,
	.llr-i__more a { break-inside: avoid; box-shadow: none; }
}


/* ============================================================================
   LEGAL PAGES — Life Link Research
   Used by: page-privacy-policy.php  (Template Name: LLR Privacy Policy)

   PASTE AT THE VERY BOTTOM of assets/css/llr-blog.css, AFTER the Quality &
   Testing block. It depends on that block: the page's <main> carries both
   .llr-quality and .llr-legal, so the hero, contents rail, headings and
   prose measure all come from there already built. If the Quality block is
   missing, this page renders unstyled.

   Two components only — the bulleted list and the contact card. A policy is
   prose and lists; anything more decorative would be working against the
   one job this page has, which is to be read and quoted accurately.

   Named .llr-legal rather than .llr-privacy on purpose: Terms, Refund and
   Shipping are the same shape, and they can reuse this file as-is by
   carrying the same two classes on <main>.

   NO !important.
   ========================================================================= */

/* The first section sits directly under the hero with no heading above it,
   so it needs the standfirst's breathing room rather than a section gap. */
.llr-legal .llr-legal__first { padding-top: 56px; }

/* Long documents run to fifteen sections; a touch more air between them
   than the guides use, so the headings read as real dividers. */
.llr-legal .llr-q__sec { padding-top: 44px; }

.llr-legal .llr-q__h3 {
	margin-top: 26px;
	margin-bottom: 8px;
	font-size: 16.5px;
}

/* ============================================================
   BULLETED LISTS

   Hairline rules rather than dots. Every item in these two lists is a
   distinct commitment someone may need to point at, and a ruled row makes
   each one a separate object on the page instead of a run-on sentence.
   ============================================================ */
.llr-l__list {
	margin: 20px 0 22px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--llr-line);
	max-width: 72ch;
}

.llr-l__list li {
	position: relative;
	padding: 13px 0 13px 26px;
	border-bottom: 1px solid var(--llr-line);
	font-size: 15px;
	line-height: 1.66;
	color: var(--llr-body);
}

.llr-l__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 22px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--llr-gold);
}

/* ============================================================
   CONTACT CARD

   The one place on the page a reader is trying to ACT rather than read,
   so it is the one thing given a box.
   ============================================================ */
.llr-l__contact {
	margin-top: 22px;
	padding: 26px 28px;
	max-width: 72ch;
	border: 1px solid var(--llr-line);
	border-left: 3px solid var(--llr-gold);
	border-radius: 0 var(--llr-r) var(--llr-r) 0;
	background: var(--llr-soft);
}

.llr-l__contact dl { margin: 0; }

.llr-l__row {
	display: grid;
	grid-template-columns: 152px minmax(0, 1fr);
	gap: 4px 20px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(5, 30, 120, .09);
}
.llr-l__row:first-child { padding-top: 0; }
.llr-l__row:last-child { padding-bottom: 0; border-bottom: 0; }

.llr-l__row dt {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 2;
	color: var(--llr-mute);
}

.llr-l__row dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--llr-ink);
}

.llr-l__contactnote {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.66;
	color: var(--llr-body);
}

/* ============================================================
   LEGAL RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
	.llr-legal .llr-legal__first { padding-top: 34px; }
	.llr-legal .llr-q__sec { padding-top: 36px; }

	.llr-l__list li { padding: 12px 0 12px 22px; font-size: 14.5px; }
	.llr-l__list li::before { left: 2px; top: 21px; }

	.llr-l__contact { padding: 22px 20px; }

	/* Stacked, the fixed label column would leave a ragged gap on both
	   rows, so the value moves under its label. */
	.llr-l__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
	}
	.llr-l__row dt { line-height: 1.6; }

	/* Long email addresses must wrap rather than widen the page. */
	.llr-l__row dd a { word-break: break-word; }
}

@media print {
	.llr-l__list li,
	.llr-l__contact { break-inside: avoid; }
}


/* Contents rail: scroll without the bar.

   The rail is capped at the viewport height, so on a long document like the
   Terms it scrolls inside itself. The bar it drew was pure chrome — the wheel,
   trackpad and keyboard all still work, and the script keeps the active item
   in view, so nothing is lost by hiding it. */
.llr-q__railinner {
	scrollbar-width: none;        /* Firefox */
	-ms-overflow-style: none;     /* legacy Edge */
}
.llr-q__railinner::-webkit-scrollbar {
	display: none;                /* Chrome, Safari */
}


/* ============================================================================
   Life Link Research — ARTICLE LAYOUT
   Contents rail on the LEFT, head inside the grid, no featured image.

   APPEND THIS TO THE VERY END OF /assets/css/llr-blog.css

   Why the end: the article block currently exists TWICE in llr-blog.css (once
   around line 757, again around line 2079 — the file was concatenated at some
   point). Specificity is identical between the two copies, so the later one
   wins on source order. Anything that overrides them must therefore sit after
   BOTH, which means last in the file. Nothing here is !important, and nothing
   here is a new visual treatment — type, colour and the spacing scale are all
   unchanged. This is column order and nesting only.
   ========================================================================= */

/* --- the grid ------------------------------------------------------------
   .llr-art__wrap now wraps the head AND the prose, not just the prose. Two
   children: the rail, and one column holding everything else. Because the
   head is a child of that column rather than a sibling of the rail, the rail
   starts level with the first line of the article instead of beginning
   partway down the page underneath the title.

   .llr-art__row (tags, author) keeps the same track sizes so its contents
   land on the same left edge as the prose above them.
   ---------------------------------------------------------------------- */
.llr-art__wrap,
.llr-art__row {
	display: grid;
	grid-template-columns: var(--llr-toc) minmax(0, var(--llr-read));
	gap: var(--llr-gap);
	align-items: start;
}

.llr-toc { grid-column: 1; }

/* min-width:0 is load-bearing, not defensive. A grid item defaults to its
   min-content width, so one long unbroken URL or code span inside the post
   would widen this column and squeeze the rail. */
.llr-art__main {
	grid-column: 2;
	min-width: 0;
}

.llr-art__row > * { grid-column: 2; }

/* --- vertical rhythm -----------------------------------------------------
   The head used to own the article's top padding. Now that it sits inside
   the grid, that padding belongs to the wrapper — left on the head, the rail
   would start 40px above the title it is meant to line up with.
   ---------------------------------------------------------------------- */
.llr-art__wrap { padding: 40px 0 20px; }
.llr-art__head { padding: 0 0 26px; }

/* --- rail appearance -----------------------------------------------------
   Flat, not a card. Boxed, it read as a widget parked beside the article;
   unstyled it reads as a list of sections, and the hairline on each entry is
   all the structure it needs. Still sticky — that is the entire reason for
   putting it beside the prose rather than above it.
   ---------------------------------------------------------------------- */
.llr-toc {
	position: sticky;
	top: 28px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* No inner scroller. A rail that scrolls on its own hides the sections the
   reader has not reached, puts a second scrollbar on screen, and traps the
   wheel whenever the pointer happens to be over it. Sticky already covers
   the long-article case: the rail travels down with the reader. If a post
   ever has more H2s than fit the viewport, the tail is reached by scrolling
   the page — the gesture the reader is already making. */
.llr-toc__nav {
	max-height: none;
	overflow: visible;
}

/* A signpost, not a heading competing with the H1 beside it. */
.llr-toc__label { color: var(--llr-mute); }

/* --- narrow screens ------------------------------------------------------
   Below the two-column threshold the grid collapses and the rail returns to
   normal flow above the article. It is already first in the DOM, so nothing
   needs an order property to put it there.
   ---------------------------------------------------------------------- */
@media (max-width: 1060px) {
	.llr-art__wrap,
	.llr-art__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.llr-art__main,
	.llr-art__row > *,
	.llr-toc { grid-column: 1; }

	.llr-toc {
		position: static;
		max-width: var(--llr-read);
	}
}

@media (max-width: 760px) {
	.llr-art__wrap { padding-top: 28px;         padding-left: 10px;
        padding-right: 10px;}
	.llr-art__head { padding-bottom: 20px; }
}