/*
Theme Name: Legend Power
Theme URI: https://legendpower.com
Author: SmarkLabs
Author URI: https://smarklabs.com
Description: Custom block theme for Legend Power Systems — SmartGATE active power management. Stress Map design system: dark radiograph ground, glowing diagnostic building, mono annotations, orange reserved for action.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
Version: 0.38.0
License: Proprietary
Text Domain: legendpower
Tags: block-theme, full-site-editing, custom-colors, custom-typography
*/

/* ============================================================
   Legend Power — Design System v2 ("Stress Map" radiograph)
   Direction : dark radiograph — film ground, glowing line work
   Type      : Inter (display+body) + system mono annotations
   Color     : ground #0E0B15 · ink #EAE6F2 · dim #C7C6CC ·
               orange = brand/CTA only · red/amber = severity only
   Layout    : hairlines, sharp corners, indexed sections
   Signature : the stress-map building (iso wireframe, per-system glow)
   Spec      : projects/website-launch/DESIGN-SYSTEM.md
   After ANY CSS change, bump Version: above AND LEGENDPOWER_VERSION.
   ============================================================ */

:root {
	--lp-ground: var(--wp--preset--color--ground);
	--lp-panel: var(--wp--preset--color--panel);
	--lp-ink: var(--wp--preset--color--ink);
	--lp-dim: var(--wp--preset--color--dim);
	--lp-hair: var(--wp--preset--color--hair);
	--lp-orange: var(--wp--preset--color--orange);
	--lp-red: var(--wp--preset--color--red);
	--lp-amber: var(--wp--preset--color--amber);
	--lp-green: var(--wp--preset--color--green);
	--lp-navy: var(--wp--preset--color--navy);
	/* Accent text = brand orange on every band (Brendan, 2026-07-22) */
	--lp-accent-text: var(--wp--preset--color--orange);
	--lp-mono: var(--wp--preset--font-family--mono);
	--lp-wrap: 1440px;
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ============================================================
   ELEMENTS — eyebrow, section head, lede
   ============================================================ */
.lp-eyebrow {
	margin: 0 0 1.6rem;
	font-family: var(--lp-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lp-accent-text);
}
.lp-sechead {
	margin: 0 0 1.1rem;
	font-family: var(--lp-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lp-accent-text);
}
.lp-h2 {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 640;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--lp-ink);
	margin: 0 0 1.25rem;
	max-width: 30ch;
	text-wrap: balance;
}
.lp-lede {
	margin: 0 0 2.75rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--lp-dim);
	max-width: 62ch;
}
.lp-lede strong { color: var(--lp-ink); font-weight: 560; }

/* ============================================================
   SECTION HEADER MODES
   The stacked default (eyebrow / H2 / lede, all flush left) left 700-790px
   of a 1344px canvas empty in EVERY section, then dropped a full-width
   artifact underneath — the same L-shaped void four sections running, which
   is what still read as generic after the artifacts had been varied. The
   measures are not the bug: .lp-h2 caps at 30ch and .lp-lede at 62ch for
   readability, and widening them would close the void by wrecking the
   typography. Filling the canvas means giving the header more than one
   column — and varying which mode each section uses.
   ============================================================ */

/* Mode B — two columns: H2 left, lede right. Both columns fill, so there is no
   void, and the pair reads as a horizontal entry to the section.
   The eyebrow sits ABOVE the band, spanning both columns, not inside the left
   one: nested there it made the left column 36px taller at the top, so the
   right column's first line aligned with the small mono eyebrow instead of
   with the H2 — reading as a misalignment against the heading that anchors
   the section. Above the band, both columns start level with the H2. */
.lp-sechead-band {
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 1.5rem 4.5rem;
	align-items: start; margin-bottom: 3.25rem;
}
.lp-sechead-band .lp-h2 { max-width: none; margin-bottom: 0; }
.lp-sechead-band .lp-lede { max-width: none; margin-bottom: 0; }

/* Mode C — centred, used once (the results band) so the page's proof moment
   reads as its centrepiece. Centring appears nowhere else on the site, which
   is exactly why it differentiates that section. */
.lp-sechead-center { max-width: 54rem; margin: 0 auto 3.25rem; text-align: center; }
.lp-sechead-center .lp-h2 { max-width: none; margin: 0 0 1.25rem; }
/* Centring amplifies ragged line breaks — both of these were ending on a
   one-word line. text-wrap: balance evens them out (it self-limits to short
   blocks, so it is safe on body copy this length). */
.lp-sechead-center .lp-lede,
.lp-sechead-center .lp-caseband__lede { max-width: none; margin: 0; text-wrap: balance; }
/* .lp-note--center lives further down the file, next to .lp-caseband__note —
   declared up here it lost the cascade to that rule's `margin: 2.5rem 0 0`
   shorthand (equal specificity, later wins), which reset the auto margins to
   0 and left the note flush left with centred text inside it. */

@media (max-width: 960px) {
	.lp-sechead-band { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
	.lp-sechead-center { margin-bottom: 2.5rem; }
}

/* ============================================================
   BUTTONS — solid orange primary + ink link-arrow
   ============================================================ */
.lp-btn {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 620;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	border-radius: 0;
	transition: background 0.15s ease;
}
.lp-btn--primary { background: var(--lp-orange); color: #16101F; }
.lp-btn--primary:hover, .lp-btn--primary:focus-visible { background: #FFA53C; color: #16101F; }
.lp-btn:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

.lp-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 560;
	text-decoration: none;
	color: var(--lp-ink);
	border-bottom: 1px solid var(--lp-hair);
	padding-bottom: 3px;
	transition: border-color 0.15s ease;
}
/* will-change keeps the arrow on a persistent GPU layer — first-hover
   layer promotion can flash a colored rect on macOS */
.lp-link::after { content: "→"; color: var(--lp-orange); transition: transform 0.15s ease; will-change: transform; }
.lp-link:hover, .lp-link:focus-visible { border-color: var(--lp-orange); }
.lp-link:hover::after, .lp-link:focus-visible::after { transform: translateX(4px); }
/* --ext marks a link that leaves the site (the CIRA app on its own subdomain),
   so the arrow points out rather than forward. */
.lp-link--ext::after { content: "↗"; }
.lp-link--ext:hover::after, .lp-link--ext:focus-visible::after { transform: translate(3px, -3px); }

/* ============================================================
   HEADER — film-dark masthead
   ============================================================ */
/* Sticky lives on the template-part WRAPPER (<header class="wp-block-template-part">)
   — .lp-header alone is exactly its parent's height, so it has no room to
   travel and never sticks. The negative top tucks the utility strip out of
   view once scrolled, leaving only the main nav row pinned. z-index keeps the
   nav dropdowns painting above positioned/filtered elements in later sections.
   The tuck is derived from the strip height so the two can't drift apart — an
   off-by-a-few-px tuck leaves a sliver of the partner-login link showing above
   the pinned nav row. */
:root { --lp-utility-h: 1.7rem; --lp-header-tuck: calc(-1 * var(--lp-utility-h)); }
@media (max-width: 900px) { :root { --lp-header-tuck: 0rem; } }
header.wp-block-template-part { position: sticky; top: var(--lp-header-tuck); z-index: 100; }
.admin-bar header.wp-block-template-part { top: calc(var(--lp-header-tuck) + 32px); }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: calc(var(--lp-header-tuck) + 46px); } }

/* Core ships `.wp-block-group.has-background { padding: 1.25em 2.375em }`. The
   vertical half must be zeroed: it lands ABOVE the utility strip, so it both
   pads the masthead with dead air and pushes the strip below the sticky tuck,
   leaving the partner-login link peeking out of the pinned nav row. */
.lp-header { padding-top: 0; padding-bottom: 0; border-bottom: 1px solid var(--lp-hair); }

/* Utility strip — secondary menu above the main nav row (desktop only).
   No bottom rule: the strip reads as part of the masthead, and a second
   hairline directly above .lp-header's own border looked like a stray divider. */
.lp-utility__inner {
	display: flex; align-items: center; justify-content: flex-end;
	height: var(--lp-utility-h); max-width: var(--lp-wrap); margin: 0 auto; padding: 0 2rem;
}
.lp-utility__link {
	font-family: var(--lp-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
	color: var(--lp-dim); text-decoration: none; white-space: nowrap;
	transition: color 0.15s ease;
}
.lp-utility__link:hover, .lp-utility__link:focus-visible { color: var(--lp-ink); }
.lp-utility__arr { color: var(--lp-orange); }

.lp-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	max-width: var(--lp-wrap); margin: 0 auto; padding: 0.85rem 2rem;
}
.lp-nav__brand { display: inline-flex; flex: 0 0 auto; }
.lp-nav__brand img { display: block; height: 30px; width: auto; }
.lp-nav__menu { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.lp-nav__item { display: flex; align-items: center; }
.lp-nav__link {
	color: var(--lp-dim); text-decoration: none;
	font-size: 0.85rem; font-weight: 500; line-height: 1; white-space: nowrap;
	transition: color 0.15s ease;
}
.lp-nav__link:hover, .lp-nav__link:focus-visible { color: var(--lp-ink); }
.lp-nav__cta {
	display: inline-block; background: var(--lp-orange); color: #16101F;
	padding: 0.6rem 1.2rem; font-size: 0.85rem; font-weight: 620; line-height: 1;
	text-decoration: none; white-space: nowrap; transition: background 0.15s ease;
}
.lp-nav__cta:hover, .lp-nav__cta:focus-visible { background: #FFA53C; color: #16101F; }
/* In-menu partner-login row — mobile menu only; desktop uses .lp-utility. */
.lp-nav__portal {
	font-family: var(--lp-mono); font-size: 0.625rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
	color: var(--lp-dim); text-decoration: none; white-space: nowrap;
	transition: color 0.15s ease;
}
.lp-nav__portal:hover, .lp-nav__portal:focus-visible { color: var(--lp-ink); }
.lp-nav__portal-arr { color: var(--lp-orange); }

.lp-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
.lp-nav__bar { display: block; width: 24px; height: 2px; background: var(--lp-ink); transition: transform 0.2s ease, opacity 0.2s ease; }

/* Industries dropdown — hover/click panel on desktop, accordion on mobile */
.lp-nav__item--has-sub { position: relative; gap: 0.45rem; }
.lp-nav__subtoggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer;
	color: var(--lp-dim); transition: color 0.15s ease;
}
.lp-nav__subtoggle svg { display: block; transition: transform 0.2s ease; }
.lp-nav__subtoggle:hover, .lp-nav__subtoggle:focus-visible,
.lp-nav__item--has-sub:hover .lp-nav__subtoggle { color: var(--lp-ink); }
.lp-nav__item--has-sub.is-sub-open .lp-nav__subtoggle svg { transform: rotate(180deg); }
.lp-nav__sub { margin: 0; padding: 0; list-style: none; }
.lp-nav__sublink {
	display: block; padding: 0.6rem 1.1rem;
	color: var(--lp-dim); text-decoration: none;
	font-size: 0.85rem; font-weight: 500; white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease;
}
.lp-nav__sublink:hover, .lp-nav__sublink:focus-visible { color: var(--lp-ink); background: rgba(255, 255, 255, 0.04); }
.lp-nav__sub-arr { color: var(--lp-orange); }

@media (min-width: 901px) {
	.lp-nav__portal { display: none; }
	.lp-nav__sub {
		/* nav padding-bottom + the masthead's 1px border, so the panel sits flush
		   under the rule. Retune if .lp-nav vertical padding changes. */
		position: absolute; top: calc(100% + 0.85rem + 1px); left: 50%;
		min-width: 230px; padding: 0.45rem 0;
		background: var(--lp-panel); border: 1px solid var(--lp-hair);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
		opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}
	/* Invisible bridge so the pointer can travel from the link to the panel. */
	.lp-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.2rem; }
	.lp-nav__item--has-sub:hover .lp-nav__sub,
	.lp-nav__item--has-sub.is-sub-open .lp-nav__sub {
		opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
	}
	.lp-nav__item--has-sub:hover .lp-nav__subtoggle svg { transform: rotate(180deg); }
	.lp-nav__sub-all { border-top: 1px solid var(--lp-hair); margin-top: 0.4rem; padding-top: 0.4rem; }
}

@media (max-width: 900px) {
	.lp-nav { flex-wrap: wrap; }
	.lp-nav__toggle { display: flex; }
	.lp-nav__menu { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
	.lp-nav.is-open .lp-nav__menu { max-height: 75vh; margin-top: 1rem; overflow-y: auto; }
	.lp-nav__item { width: 100%; }
	.lp-nav__link, .lp-nav__cta { display: block; width: 100%; padding: 0.85rem 0; }
	.lp-nav__cta { width: max-content; padding: 0.7rem 1.3rem; margin-top: 0.5rem; }
	.lp-utility { display: none; }
	.lp-nav__item--cta { flex-direction: column; align-items: flex-start; gap: 0; }
	.lp-nav__portal { display: block; width: 100%; padding: 0.85rem 0; }
	.lp-nav__item--has-sub { flex-wrap: wrap; }
	.lp-nav__item--has-sub .lp-nav__link { flex: 1; width: auto; }
	.lp-nav__subtoggle { width: 44px; height: 44px; }
	.lp-nav__sub {
		flex-basis: 100%; width: 100%;
		max-height: 0; overflow: hidden;
		border-left: 1px solid var(--lp-hair);
		transition: max-height 0.25s ease;
	}
	.lp-nav__item--has-sub.is-sub-open .lp-nav__sub { max-height: 30rem; }
	.lp-nav__sublink { padding: 0.7rem 1.4rem; }
	.lp-nav.is-open .lp-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.lp-nav.is-open .lp-nav__bar:nth-child(2) { opacity: 0; }
	.lp-nav.is-open .lp-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO — copy + the stress-map building
   ============================================================ */
.lp-hero__inner {
	display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 2.5rem; align-items: center;
	max-width: var(--lp-wrap); margin: 0 auto; padding: 4rem 3rem 0;
}
.lp-hero__title {
	font-size: clamp(2.5rem, 4.4vw, 3.9rem); font-weight: 640; line-height: 1.04;
	letter-spacing: -0.035em; color: var(--lp-ink); margin: 0 0 1.5rem;
	text-wrap: balance; max-width: 15ch;
}
.lp-hero__lede { margin: 0 0 2.25rem; font-size: 1.0625rem; line-height: 1.6; color: var(--lp-dim); max-width: 52ch; }
.lp-hero__lede strong { color: var(--lp-ink); font-weight: 560; }
.lp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
/* Hero credibility strip — proof on the first screen without stealing the
   results band's numbers (Brendan, 2026-08-12: problem-first order, but the
   hero still needs credibility). Values sit at 1.0625rem, not the 1.75rem of
   .lp-readouts__val, so this reads as a trust line rather than a second data
   strip competing with the readouts further down the page. */
.lp-hero__proof {
	display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
	margin: 2.25rem 0 0; padding-top: 1.35rem;
	border-top: 1px solid var(--lp-hair);
	max-width: 40rem;
}
.lp-hero__proof-val {
	display: block; font-family: var(--lp-mono); font-size: 1.0625rem;
	color: var(--lp-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* max-width in px, not ch: these labels carry 0.14em tracking, so a ch-based
   measure under-counts by ~20% and all three 26-character labels broke to
   three cramped lines. 10.5rem lands each on two. */
.lp-hero__proof-lab {
	display: block; font-family: var(--lp-mono); font-size: 0.625rem;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-dim);
	margin-top: 0.35rem; max-width: 10.5rem; line-height: 1.5;
}
/* Narrow screens: the three items stack one per row, and stacked value-over-
   two-line-label cost ~190px of hero before the stress map even started. Run
   each item inline instead — all three labels clear 342px on one line. */
@media (max-width: 700px) {
	.lp-hero__proof { gap: 0.85rem 2rem; }
	.lp-hero__proof-item { display: flex; align-items: baseline; gap: 0.6rem; }
	.lp-hero__proof-lab { max-width: none; margin-top: 0; }
}
/* Photographic hero column (Strategic Partners) — the alternative to .lp-xray.
   Same hairline frame and desaturate/darken grade as .lp-band__img so a photo
   sits in the radiograph palette instead of fighting it. */
.lp-hero__figure { margin: 0; border: 1px solid var(--lp-hair); overflow: hidden; }
.lp-hero__figure img {
	display: block; width: 100%; height: auto;
	filter: saturate(0.8) contrast(1.05) brightness(0.88);
}
/* .lp-hero__inner deliberately has no bottom padding, so the stress-map SVG can
   sit ON the next section's rule when it is the taller column. But the columns
   are centre-aligned and the band takes the height of the taller one — so on
   pages where the COPY is taller (SmartGATE, Power Impact Assessment, Partners)
   the CTA buttons landed flush against that rule, 0px clearance, while x-ray-led
   pages got 34-67px. Padding the copy column instead of the band gives both
   cases the same breathing room and keeps the SVG bleed.
   Desktop only: below 960px the columns stack, so the grid gap already
   separates the copy from the diagram and there is nothing to collide with. */
@media (min-width: 961px) {
	.lp-hero__content { padding-bottom: 4rem; }
}
@media (max-width: 960px) {
	.lp-hero__inner { grid-template-columns: 1fr; padding: 3rem 1.5rem 0; }
}

/* ============================================================
   SIGNATURE — stress-map building SVG
   Orange = SmartGATE/brand only. Red/amber = severity only.
   ============================================================ */
.lp-xray svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(150, 185, 235, 0.10)); }
.lp-xray svg .hot {
	stroke: var(--lp-red); fill: none; stroke-width: 1.2;
	filter: drop-shadow(0 0 6px rgba(255, 81, 71, 0.55));
	animation: lp-hotpulse 3.6s ease-in-out infinite;
}
.lp-xray svg .warm {
	stroke: var(--lp-amber); fill: none; stroke-width: 1.1;
	filter: drop-shadow(0 0 5px rgba(255, 200, 56, 0.45));
	animation: lp-warmpulse 4.4s ease-in-out infinite;
}
@keyframes lp-hotpulse  { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes lp-warmpulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.95; } }
.lp-xray svg .sg { stroke: var(--lp-orange); stroke-width: 1.5; fill: none; filter: drop-shadow(0 0 7px rgba(245, 147, 33, 0.55)); }
/* Healthy/aligned state — steady glow (no pulse: healthy is calm) */
.lp-xray svg .ok {
	stroke: var(--lp-green); fill: none; stroke-width: 1.1;
	filter: drop-shadow(0 0 5px rgba(62, 220, 143, 0.45));
}
.lp-xray svg text { font-family: var(--lp-mono); font-size: 11.5px; letter-spacing: 0.09em; fill: var(--lp-ink); }
.lp-xray svg text.dim2 { fill: var(--lp-dim); font-size: 10.5px; }
.lp-xray svg text.syslab { font-size: 19px; letter-spacing: 0.08em; }
.lp-xray svg text.sevlab { font-size: 13px; letter-spacing: 0.12em; }
.lp-xray svg text.thot  { fill: #FF6A5E; }
.lp-xray svg text.twarm { fill: var(--lp-amber); }
.lp-xray svg text.tok   { fill: #5FE8A8; }
.lp-xray svg text.tsg   { fill: var(--lp-orange); }
@media (prefers-reduced-motion: reduce) {
	.lp-xray svg .hot, .lp-xray svg .warm { animation: none; }
}

/* ============================================================
   READOUT STRIP — mono data cells
   ============================================================ */
.lp-readouts { max-width: var(--lp-wrap); margin: 3.5rem auto 0; padding: 0 3rem; }
/* Nested inside a section (front page: the readouts belong to the risk
   section, not to the hero) the wrap and gutter are already applied by
   .lp-section/.lp-section__inner — re-applying them here double-inset the
   cells and knocked them out of alignment with the H2 above. */
.lp-section__inner .lp-readouts { max-width: none; margin: 3.25rem 0 0; padding: 0; }
.lp-readouts__cap {
	font-family: var(--lp-mono); font-size: 0.66rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0 0 0.8rem;
}
.lp-readouts__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--lp-hair); border-bottom: 1px solid var(--lp-hair);
}
.lp-readouts__cell { padding: 1.4rem 1.6rem; border-left: 1px solid var(--lp-hair); }
.lp-readouts__cell:first-child { border-left: 0; }
.lp-readouts__val { font-family: var(--lp-mono); font-size: 1.75rem; color: var(--lp-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lp-readouts__val--flag { color: var(--lp-orange); }
.lp-readouts__lab { font-family: var(--lp-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-dim); margin-top: 0.4rem; }
@media (max-width: 960px) {
	.lp-readouts { padding: 0 1.5rem; }
	.lp-readouts__grid { grid-template-columns: 1fr 1fr; }
	.lp-readouts__cell:nth-child(3) { border-left: 0; border-top: 1px solid var(--lp-hair); }
	.lp-readouts__cell:nth-child(4) { border-top: 1px solid var(--lp-hair); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.lp-section { padding: 6rem 3rem; }
.lp-section--rule { border-top: 1px solid var(--lp-hair); }
.lp-section__inner { max-width: var(--lp-wrap); margin: 0 auto; }
@media (max-width: 960px) { .lp-section { padding: 4rem 1.5rem; } }

/* ============================================================
   FINDINGS — indexed rows with PASS/FLAG chips
   ============================================================ */
.lp-finding {
	display: grid; grid-template-columns: 1.1fr 130px 1.6fr; gap: 1.5rem;
	align-items: baseline; padding: 1.6rem 0; border-top: 1px solid var(--lp-hair);
}
.lp-finding--plain { grid-template-columns: 1.1fr 1.75fr; }
.lp-finding:last-of-type { border-bottom: 1px solid var(--lp-hair); }
.lp-finding__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--lp-ink); }
.lp-chip {
	font-family: var(--lp-mono); font-size: 0.66rem; letter-spacing: 0.14em;
	padding: 4px 10px; border: 1px solid var(--lp-hair); color: var(--lp-dim); justify-self: start;
}
.lp-chip--flag { border-color: rgba(245, 147, 33, 0.65); color: var(--lp-accent-text); }
.lp-finding__detail { color: var(--lp-dim); font-size: 1rem; line-height: 1.6; }
.lp-finding__detail strong { color: var(--lp-ink); font-weight: 560; }
.lp-kicker { margin: 2.75rem 0 0; font-size: 1.3125rem; font-weight: 560; letter-spacing: -0.015em; color: var(--lp-ink); max-width: 44ch; }
.lp-kicker em { font-style: normal; color: var(--lp-accent-text); }
@media (max-width: 960px) {
	.lp-finding { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ============================================================
   CASE BAND — panel background, orange-keyline stats
   ============================================================ */
.lp-caseband { background: var(--lp-panel); border-top: 1px solid var(--lp-hair); border-bottom: 1px solid var(--lp-hair); }
.lp-caseband .lp-section__inner { padding: 0; }
.lp-caseband__lede { color: var(--lp-dim); font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; margin: 0 0 3rem; }
.lp-caseband__lede strong { color: var(--lp-ink); font-weight: 560; }
.lp-caseband__note, .lp-note { margin: 2.5rem 0 0; font-size: 0.875rem; color: var(--lp-dim); max-width: 66ch; }
/* Must come AFTER the shorthand above: that `margin: 2.5rem 0 0` resets
   margin-left/right, so declaring this earlier in the file silently killed the
   centring and left the note flush left inside a 68ch box. */
.lp-note--center {
	max-width: 68ch; margin-left: auto; margin-right: auto;
	text-align: center; text-wrap: balance;
}
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.lp-stats--3 { grid-template-columns: repeat(3, 1fr); }
.lp-stat { border-top: 2px solid var(--lp-orange); padding-top: 1.1rem; }
.lp-stat__n { font-size: 2.375rem; font-weight: 640; letter-spacing: -0.03em; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-stat__d { color: var(--lp-dim); font-size: 0.9rem; line-height: 1.55; margin-top: 0.5rem; }
@media (max-width: 960px) { .lp-stats { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   LIGHT BAND — neutral grey section variant
   Re-scopes the core tokens so every lp- component adapts
   automatically. Neutral greys only — no purple cast (Rule 5).
   Accent text stays brand orange on light bands too — matching the
   dark sections was chosen over AA contrast for these mono labels.
   ============================================================ */
.lp-light {
	--lp-ink: #17151C;
	--lp-dim: #52515A;
	--lp-hair: #D9D8DD;
	--lp-panel: #E9E8EC;
	/* --lp-ground must be re-scoped too: components that paint the page ground
	   to mask something behind them (.lp-path .lp-chip sits on its connector
	   line) otherwise punch a dark hole through a light band. */
	--lp-ground: #F2F1F3;
	background: #F2F1F3;
}
.lp-light.lp-caseband { border-top: 0; border-bottom: 0; }

/* ============================================================
   INDUSTRIES — 3:4 photo cards, specimen tags
   ============================================================ */
.lp-ind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.lp-ind-card { display: block; text-decoration: none; color: var(--lp-ink); }
.lp-ind-card__img { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--lp-hair); }
.lp-ind-card__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: saturate(0.72) contrast(1.06) brightness(0.82);
	transition: filter 0.35s ease, transform 0.35s ease;
}
.lp-ind-card__img::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 11, 21, 0.18) 0%, rgba(14, 11, 21, 0.02) 45%, rgba(14, 11, 21, 0.55) 100%);
}
.lp-ind-card__name { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.01em; color: var(--lp-ink); margin: 1rem 0 0.4rem; }
.lp-ind-card__name .lp-ind-card__arr { color: var(--lp-orange); opacity: 0; transition: opacity 0.25s ease; }
.lp-ind-card__text { color: var(--lp-dim); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.lp-ind-card:hover .lp-ind-card__img img, .lp-ind-card:focus-visible .lp-ind-card__img img {
	filter: saturate(0.92) contrast(1.06) brightness(0.95); transform: scale(1.03);
}
.lp-ind-card:hover .lp-ind-card__arr, .lp-ind-card:focus-visible .lp-ind-card__arr { opacity: 1; }
.lp-ind-card:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
@media (max-width: 960px) { .lp-ind-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.lp-ind-card__img img { transition: none; }
}

/* ============================================================
   INDUSTRY PAGES — split layouts, callouts, systems panel,
   results sub-band, deployment progression
   ============================================================ */
/* Tighter bottom margin when a lede/body runs multiple paragraphs */
.lp-lede--tight, .lp-hero__lede--tight, .lp-endcta__text--tight { margin-bottom: 1.1rem; }

.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4.5rem; align-items: start; }
.lp-split--center { align-items: center; }
/* Grid items default to min-width:auto, so a column cannot shrink below its
   content's min-content width. A wide child (the portfolio table, min-content
   478px) therefore forced the stacked mobile column to 478px inside a 342px
   canvas and pushed the whole page to 502px of horizontal scroll — taking the
   copy out with it. min-width:0 lets the column shrink so the table scrolls in
   its own overflow-x box as intended. Applies to every .lp-split site-wide;
   any of the other ten templates using it would hit this with wide content. */
.lp-split > *, .lp-sechead-band > * { min-width: 0; }

.lp-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.lp-callouts--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .lp-callouts, .lp-callouts--3 { grid-template-columns: 1fr; gap: 1.5rem; } }
.lp-callout { border-top: 1px solid var(--lp-hair); padding-top: 1.1rem; }
/* Severity-coded callouts — the top rule carries the risk colour so the three
   risk zones read against the gauge without repeating its numbers. Severity
   colours stay reserved for severity, per the design system. */
.lp-callout--ok { border-top-color: var(--lp-green); }
.lp-callout--warn { border-top-color: var(--lp-amber); }
.lp-callout--sev { border-top-color: var(--lp-red); }
.lp-callout--ok .lp-callout__name { color: var(--lp-green); }
.lp-callout--warn .lp-callout__name { color: var(--lp-amber); }
.lp-callout--sev .lp-callout__name { color: var(--lp-red); }
.lp-callout__name { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.01em; color: var(--lp-ink); margin: 0 0 0.45rem; }
.lp-callout__text { color: var(--lp-dim); font-size: 0.9rem; line-height: 1.55; margin: 0; }

.lp-finding--stack { grid-template-columns: 1fr; gap: 0.55rem; }

.lp-syslist { border: 1px solid var(--lp-hair); }
.lp-syslist__head {
	font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0;
	padding: 1rem 1.4rem; border-bottom: 1px solid var(--lp-hair);
}
.lp-syslist__items { margin: 0; padding: 0; list-style: none; }
.lp-syslist__items li { padding: 0.95rem 1.4rem; color: var(--lp-ink); font-size: 0.95rem; border-top: 1px solid var(--lp-hair); }
.lp-syslist__items li:first-child { border-top: 0; }

.lp-subband { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--lp-hair); }

.lp-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 0 0 3rem; }
.lp-progress__node {
	font-family: var(--lp-mono); font-size: 0.72rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--lp-ink);
	border: 1px solid var(--lp-hair); padding: 0.7rem 1.1rem;
}
.lp-progress__arr { color: var(--lp-accent-text); font-size: 1.1rem; }

.lp-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

@media (max-width: 960px) {
	.lp-split { grid-template-columns: 1fr; gap: 2.5rem; }
	.lp-stages { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 640px) { .lp-callouts { grid-template-columns: 1fr; } }

/* ============================================================
   INDUSTRY PAGES v2 — sticky problem sequence, system blocks,
   CTA band, flow schematic, outcomes bento, layered photo CTA
   ============================================================ */
/* Severity word — meaning-carrying color (Rule 1) */
.lp-sev { font-family: var(--lp-mono); font-size: 0.66rem; letter-spacing: 0.14em; white-space: nowrap; }
.lp-sev--critical { color: var(--lp-red); }
.lp-sev--high { color: var(--lp-amber); }

/* Panel band — raised dark section variant (separates back-to-back
   dark sections, e.g. hero → hidden problem). Nested panel-bg elements
   flip to ground so they keep their contrast. */
.lp-panelband { background: var(--lp-panel); border-top: 1px solid var(--lp-hair); border-bottom: 1px solid var(--lp-hair); }
.lp-panelband .lp-vtab.is-active { background: var(--lp-ground); }
.lp-panelband .lp-ctaband { background: var(--lp-ground); }

/* Section-closing secondary CTA link */
.lp-seccta { margin-top: 2.25rem; }

/* Vertical system tabs — label rail + radiograph diagram stage */
.lp-tabs { margin-top: 3.25rem; display: grid; grid-template-columns: 280px 1fr; border: 1px solid var(--lp-hair); }
.lp-tabs__rail { display: flex; flex-direction: column; border-right: 1px solid var(--lp-hair); }
.lp-vtab {
	flex: 1; display: flex; align-items: center; width: 100%; margin: 0;
	padding: 1.05rem 1.3rem; background: none; text-align: left; cursor: pointer;
	border: 0; border-bottom: 1px solid var(--lp-hair); border-left: 2px solid transparent;
	font: inherit; font-size: 0.9rem; font-weight: 560; letter-spacing: -0.01em; color: var(--lp-dim);
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lp-tabs__rail .lp-vtab:last-child { border-bottom: 0; }
.lp-vtab:hover, .lp-vtab:focus-visible { color: var(--lp-ink); }
.lp-vtab.is-active { color: var(--lp-ink); border-left-color: var(--lp-orange); background: var(--lp-panel); }
.lp-vtab:focus-visible { outline: 2px solid var(--lp-orange); outline-offset: -2px; }

.lp-tabs__stage { min-width: 0; }
.lp-tabpanel { display: grid; grid-template-columns: 1.15fr 0.85fr; }
.lp-tabpanel[hidden] { display: none; }
.lp-tabpanel__diag { padding: 1.5rem 0.75rem 1.5rem 1.25rem; display: flex; align-items: center; }
.lp-tabpanel__diag svg { width: 100%; height: auto; display: block; }
.lp-tabpanel__body { padding: 2.25rem 2.5rem 2.25rem 1.5rem; display: flex; flex-direction: column; }
.lp-tabpanel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.4rem; }
.lp-tabpanel__name { font-size: 1.4rem; font-weight: 620; letter-spacing: -0.02em; color: var(--lp-ink); margin: 0; }
.lp-tabpanel__label {
	font-family: var(--lp-mono); font-size: 0.66rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0 0 0.4rem;
}
.lp-tabpanel__text { color: var(--lp-dim); font-size: 0.975rem; line-height: 1.62; margin: 0 0 1.4rem; max-width: 52ch; }
.lp-tabpanel__text strong { color: var(--lp-ink); font-weight: 560; }
.lp-tabpanel__proof { margin-top: auto; border-top: 1px solid var(--lp-hair); padding-top: 1.25rem; }
.lp-tabpanel__proof-n { font-family: var(--lp-mono); font-size: 1.75rem; color: var(--lp-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lp-tabpanel__proof-d { color: var(--lp-dim); font-size: 0.9rem; line-height: 1.55; margin-top: 0.35rem; max-width: 46ch; }
.lp-tabpanel__proof-cap {
	font-family: var(--lp-mono); font-size: 0.62rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--lp-dim); margin-top: 0.75rem; opacity: 0.75;
}
.lp-tabs + .lp-kicker { margin-top: 3rem; }

/* Full-width CTA band — panel bg, title + action */
.lp-ctaband {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2.5rem; background: var(--lp-panel); border: 1px solid var(--lp-hair);
	padding: 2.25rem 2.5rem; margin-top: 3.5rem;
}
.lp-light .lp-ctaband { background: var(--lp-panel); }
.lp-ctaband__title { font-size: 1.4rem; font-weight: 620; letter-spacing: -0.02em; color: var(--lp-ink); margin: 0; max-width: 34ch; text-wrap: balance; }
.lp-ctaband__text { color: var(--lp-dim); font-size: 0.95rem; margin: 0.5rem 0 0; max-width: 52ch; }


/* Flow schematic text/strokes — var-driven so light bands adapt */
.lp-flow text { font-family: var(--lp-mono); }
.lp-flow .flab { fill: var(--lp-ink); font-size: 13px; letter-spacing: 0.1em; }
.lp-flow .fdim { fill: var(--lp-dim); font-size: 11px; letter-spacing: 0.08em; }
.lp-flow .facc { fill: var(--lp-accent-text); font-size: 13px; letter-spacing: 0.12em; }


/* Outcomes bento — mixed-size panel cards */
.lp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.lp-bento > * { min-width: 0; }
.lp-bento__big { grid-column: 1 / 3; grid-row: 1 / 3; }
.lp-card--flush { padding: 0; display: flex; flex-direction: column; }
.lp-card__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex: 0 0 auto; }
.lp-card__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: saturate(0.72) contrast(1.06) brightness(0.82);
}
.lp-card__img::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 11, 21, 0.2) 0%, rgba(14, 11, 21, 0.05) 50%, rgba(14, 11, 21, 0.4) 100%);
}
.lp-card__pad { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.lp-card__pad .lp-card__text { max-width: 56ch; }
.lp-card .lp-stat { margin-top: auto; padding-top: 1rem; }
.lp-card--stat { display: flex; flex-direction: column; }

/* Layered photo CTA — full-bleed image, hairline content panel */
.lp-photocta { position: relative; overflow: hidden; border-top: 1px solid var(--lp-hair); }
.lp-photocta__bg { position: absolute; inset: 0; }
.lp-photocta__bg img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: saturate(0.72) contrast(1.06) brightness(0.72);
}
.lp-photocta__bg::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(14, 11, 21, 0.88) 0%, rgba(14, 11, 21, 0.5) 55%, rgba(14, 11, 21, 0.18) 100%);
}
.lp-photocta .lp-section__inner { position: relative; }
.lp-photocta__panel {
	max-width: 620px; background: rgba(14, 11, 21, 0.82); border: 1px solid var(--lp-hair);
	padding: 2.75rem 3rem; backdrop-filter: blur(2px);
}
.lp-photocta__panel .lp-endcta__text:last-of-type { margin-bottom: 2.25rem; }

@media (max-width: 960px) {
	.lp-tabs { grid-template-columns: 1fr; }
	.lp-tabs__rail {
		flex-direction: row; overflow-x: auto; border-right: 0;
		border-bottom: 1px solid var(--lp-hair); -webkit-overflow-scrolling: touch;
	}
	.lp-vtab {
		flex: 0 0 auto; width: auto; white-space: nowrap; padding: 0.9rem 1.1rem;
		border-bottom: 2px solid transparent; border-left: 0;
	}
	.lp-tabs__rail .lp-vtab:last-child { border-bottom: 2px solid transparent; }
	.lp-vtab.is-active, .lp-tabs__rail .lp-vtab.is-active { border-bottom-color: var(--lp-orange); border-left: 0; }
	.lp-tabpanel { grid-template-columns: 1fr; }
	.lp-tabpanel__diag { padding: 1.5rem 1.25rem 0.5rem; }
	.lp-tabpanel__body { padding: 1.5rem; }
	.lp-bento { grid-template-columns: 1fr 1fr; }
	.lp-bento__big { grid-column: 1 / -1; grid-row: auto; }
	.lp-photocta__panel { padding: 2rem 1.5rem; }
	.lp-ctaband { padding: 1.75rem 1.5rem; }
}
@media (max-width: 640px) {
	.lp-bento { grid-template-columns: 1fr; }
}

/* ============================================================
   PARTNERS PAGE — benefit cards, profile band, flow diagram,
   partnership path, portal callout
   ============================================================ */
.lp-cards2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.lp-card { background: var(--lp-panel); border: 1px solid var(--lp-hair); padding: 1.75rem; }
.lp-card__name { font-size: 1.125rem; font-weight: 620; letter-spacing: -0.01em; color: var(--lp-ink); margin: 0 0 0.6rem; }
.lp-card__text { color: var(--lp-dim); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.lp-card__list { margin: 0; padding-left: 1.1rem; color: var(--lp-dim); font-size: 0.95rem; line-height: 1.7; }

/* Voltage comparison table (Our Approach). On the old site this data was baked
   into an image, so it was invisible to search, screen readers and copy-paste;
   rebuilt as a real table. Scrolls inside itself on narrow screens rather than
   forcing the page to scroll sideways. */
.lp-vtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lp-vtable__cap {
	caption-side: top; text-align: left; font-family: var(--lp-mono);
	font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--lp-dim); padding-bottom: 0.9rem;
}
.lp-vtable th, .lp-vtable td {
	text-align: left; padding: 0.85rem 1rem 0.85rem 0;
	border-bottom: 1px solid var(--lp-hair); font-size: 0.95rem;
}
.lp-vtable thead th {
	font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--lp-dim); font-weight: 500;
	vertical-align: bottom;
}
/* Currency/figure columns right-aligned, so the digits stack on their own
   right edge the way a financial exhibit reads. (Superseded an earlier
   full-width variant of this table: capped at 760px in a 1344px canvas it
   stranded ~584px of dead space beside itself, so the table moved into a
   split column instead.) */
.lp-vtable--figures thead th:not(:first-child),
.lp-vtable--figures td { text-align: right; padding-right: 0; }
.lp-vtable tbody th { color: var(--lp-ink); font-weight: 620; }
.lp-vtable tbody td { color: var(--lp-dim); }
.lp-vtable tbody tr:last-child th, .lp-vtable tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) { .lp-vtable { display: block; overflow-x: auto; white-space: nowrap; } }

.lp-band { display: grid; grid-template-columns: 1.15fr 0.85fr; border: 1px solid var(--lp-hair); margin-top: 3rem; }
.lp-band__body { padding: 2rem 2.25rem; }
.lp-band__label { font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-accent-text); margin: 0 0 0.9rem; }
.lp-band__text { color: var(--lp-dim); font-size: 0.95rem; line-height: 1.65; margin: 0; max-width: 58ch; }
.lp-band__img { position: relative; min-height: 220px; }
.lp-band__img img, .lp-figure img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8) contrast(1.05) brightness(0.88); }
.lp-band__img img { position: absolute; inset: 0; }
.lp-figure { display: block; overflow: hidden; border: 1px solid var(--lp-hair); margin: 0; }

/* Installation gallery — real SmartGATE installs, not stock or generated.
   One row of six so the whole band clears a single screen; at three across the
   two rows of 614px pushed it past 1200px tall. Source photos are 419x592, so
   at ~219px per cell they render at half size — comfortably sharp on 2x
   displays. Same grade as .lp-band__img: white cabinets in fluorescent-lit
   plant rooms need pulling toward the radiograph palette, but not so far that
   the hardware stops reading. No captions — the alt text carries the meaning. */
.lp-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-top: 2.5rem; }
.lp-gallery__img { display: block; aspect-ratio: 419 / 592; overflow: hidden; border: 1px solid var(--lp-hair); }
.lp-gallery__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: saturate(0.8) contrast(1.05) brightness(0.88);
}
@media (max-width: 1180px) { .lp-gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (max-width: 640px) { .lp-gallery { grid-template-columns: repeat(2, 1fr); } }

.lp-flow { margin-top: 3rem; }
.lp-flow svg { width: 100%; height: auto; display: block; }

.lp-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.lp-path__step { position: relative; }
.lp-path__step::before { content: ''; position: absolute; top: 12px; left: 0; right: -2.5rem; height: 1px; background: var(--lp-hair); }
.lp-path__step:last-child::before { right: 0; }
.lp-path .lp-chip { position: relative; background: var(--lp-ground); }
.lp-path__name { font-size: 1.125rem; font-weight: 620; letter-spacing: -0.01em; color: var(--lp-ink); margin: 1.1rem 0 0.5rem; }
.lp-path__text { color: var(--lp-dim); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.lp-path__text strong { color: var(--lp-ink); font-weight: 560; }

.lp-portal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem 2rem; border: 1px solid var(--lp-hair); padding: 1.4rem 1.75rem; margin-top: 3.5rem;
}
.lp-portal__text { margin: 0; color: var(--lp-dim); font-size: 0.95rem; }
.lp-portal__text strong { color: var(--lp-ink); font-weight: 620; }

@media (max-width: 960px) {
	.lp-cards2x2 { grid-template-columns: 1fr; }
	.lp-band { grid-template-columns: 1fr; }
	.lp-band__img { min-height: 260px; }
	.lp-path { grid-template-columns: 1fr; gap: 2rem; }
	.lp-path__step::before { right: 0; }
}

/* ============================================================
   POWER IMPACT ASSESSMENT — stacked callouts, filled figure,
   3-step glyph path, white report specimen card
   ============================================================ */
.lp-callouts--stack { grid-template-columns: 1fr; gap: 1.5rem; }

.lp-path--3 { grid-template-columns: repeat(3, 1fr); }
.lp-path__diag { margin: 1.5rem 0 0.25rem; }
.lp-path__diag svg { width: 100%; max-width: 250px; height: auto; display: block; }

.lp-spec { background: #FFFFFF; border: 1px solid var(--lp-hair); padding: 1.9rem 2.1rem; }
.lp-spec__mast {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	font-family: var(--lp-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--lp-ink);
	border-bottom: 1px solid var(--lp-hair); padding-bottom: 0.9rem; margin-bottom: 0.9rem;
}
.lp-spec__tag { color: var(--lp-accent-text); }
.lp-spec__meta { font-family: var(--lp-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--lp-dim); margin: 0 0 1.6rem; }
.lp-redact { display: inline-block; width: 108px; height: 0.68em; background: var(--lp-ink); vertical-align: baseline; }
.lp-spec__chart svg { width: 100%; height: auto; display: block; }
.lp-spec__rows { margin-top: 1.4rem; }
.lp-spec__row { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--lp-hair); padding: 0.65rem 0; font-size: 0.95rem; }
.lp-spec__row-l { color: var(--lp-dim); }
.lp-spec__row-v { color: var(--lp-ink); font-weight: 620; font-variant-numeric: tabular-nums; }
.lp-spec__row-v--sev { color: #C92A21; }  /* severity red, darkened for paper */
.lp-spec__foot { margin-top: 1.2rem; font-family: var(--lp-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--lp-dim); }

@media (max-width: 960px) {
	.lp-path--3 { grid-template-columns: 1fr; }
	.lp-spec { padding: 1.4rem 1.5rem; }
}

/* ============================================================
   COMPANY PAGE — leadership grid + news cards
   ============================================================ */
.lp-readouts--flush { margin-top: 0; }

/* Column count tracks the size of the roster in page-about.html — it was 5 for
   five people, and leaving it at 5 after one was removed left a visibly empty
   cell at the end of the row. Update both together. */
.lp-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.lp-team-card__img { display: block; aspect-ratio: 344 / 408; overflow: hidden; border: 1px solid var(--lp-hair); }
.lp-team-card__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1) contrast(1.05) brightness(0.94);
}
.lp-team-card__name { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.01em; color: var(--lp-ink); margin: 1rem 0 0.3rem; }
.lp-team-card__role { font-family: var(--lp-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-dim); margin: 0; }
@media (max-width: 960px) { .lp-team { grid-template-columns: 1fr 1fr; } }

.lp-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.lp-news-card {
	border-top: 1px solid var(--lp-hair); padding-top: 1.25rem;
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
}
.lp-news-card__date { font-family: var(--lp-mono); font-size: 0.69rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-dim); margin: 0; }
.lp-news-card__title { font-size: 1.125rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.35; color: var(--lp-ink); margin: 0; flex: 1; }
@media (max-width: 960px) { .lp-news { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ============================================================
   INVESTORS — query-loop news cards, column heads, doc links
   ============================================================ */
ul.lp-news { padding: 0; margin: 0; }
.lp-news > li { list-style: none; margin: 0; }
.lp-news-card__title a { color: inherit; text-decoration: none; }
.lp-news-card__title a:hover, .lp-news-card__title a:focus-visible { color: var(--lp-orange); }
.lp-colhead {
	font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0 0 0.6rem;
}
.lp-callout .lp-link { margin-top: 0.85rem; }

/* Document rows — AGM materials, offering documents, reports. Same row grammar
   as .lp-replay__item (label, meta, open-in-new-tab arrow) but a separate
   component: these carry a file type and size rather than a fiscal quarter,
   and the two archives should be free to diverge. */
.lp-doclist { border-top: 1px solid var(--lp-hair); }
.lp-doc {
	display: flex; align-items: center; gap: 1.1rem;
	padding: 1rem 0.25rem; text-decoration: none;
	border-bottom: 1px solid var(--lp-hair);
}
.lp-doc__main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.lp-doc__name {
	font-size: 0.95rem; font-weight: 560; color: var(--lp-ink);
	letter-spacing: -0.01em; transition: color 0.15s ease;
}
.lp-doc__meta {
	font-family: var(--lp-mono); font-size: 0.62rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--lp-dim);
}
.lp-doc__go {
	font-family: var(--lp-mono); font-size: 0.9rem; color: var(--lp-dim);
	opacity: 0.55; transition: color 0.15s ease, opacity 0.15s ease;
}
.lp-doc:hover .lp-doc__name, .lp-doc:focus-visible .lp-doc__name { color: var(--lp-orange); }
.lp-doc:hover .lp-doc__go, .lp-doc:focus-visible .lp-doc__go { color: var(--lp-orange); opacity: 1; }
.lp-doclist + .lp-colhead { margin-top: 2.5rem; }
.lp-doclist + .lp-callout__text { margin-top: 0.5rem; }

/* ============================================================
   INVESTORS — shareholder-call replay archive (year tabs → link
   rows; behavior = tabs.js, same rail as industry system tabs)
   ============================================================ */
.lp-tabs--replays { grid-template-columns: 220px 1fr; margin-top: 2.6rem; max-width: 980px; }
.lp-tabs--replays .lp-vtab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; }
.lp-vtab__sub {
	font-family: var(--lp-mono); font-size: 0.62rem; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--lp-dim); opacity: 0.8;
}
.lp-replay-panel { padding: 0.5rem 2.1rem 0.9rem; }
.lp-replay-panel[hidden] { display: none; }
.lp-replay__item {
	display: flex; align-items: center; gap: 1.1rem;
	padding: 1.05rem 0.25rem; text-decoration: none;
	border-bottom: 1px solid var(--lp-hair);
}
.lp-replay-panel .lp-replay__item:last-child { border-bottom: 0; }
.lp-replay__item-q { font-family: var(--lp-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--lp-dim); min-width: 2.4ch; }
.lp-replay__item-main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.lp-replay__item-name { font-size: 0.95rem; font-weight: 560; color: var(--lp-ink); letter-spacing: -0.01em; transition: color 0.15s ease; }
.lp-replay__item-tag { font-family: var(--lp-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-dim); }
.lp-replay__item-go { font-family: var(--lp-mono); font-size: 0.9rem; color: var(--lp-dim); opacity: 0.55; transition: color 0.15s ease, opacity 0.15s ease; }
.lp-replay__item:hover .lp-replay__item-name,
.lp-replay__item:focus-visible .lp-replay__item-name { color: var(--lp-orange); }
.lp-replay__item:hover .lp-replay__item-go,
.lp-replay__item:focus-visible .lp-replay__item-go { color: var(--lp-orange); opacity: 1; }
@media (max-width: 960px) {
	/* re-assert the base .lp-tabs mobile stack — this modifier's 220px rail
	   column is declared later in the file and would otherwise win */
	.lp-tabs--replays { grid-template-columns: 1fr; }
	.lp-replay-panel { padding: 0.25rem 1.25rem 0.6rem; }
}

/* ============================================================
   POSTS — single article layout, prose typography, pagination
   ============================================================ */
.lp-article { padding: 4.25rem 1.5rem 0.75rem; }
.lp-article__title {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 640; letter-spacing: -0.03em;
	line-height: 1.12; color: var(--lp-ink); margin: 0 0 1.1rem; text-wrap: balance;
}
.lp-article__date {
	font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0 0 2.75rem;
}
.lp-prose { color: var(--lp-dim); }  /* container-level: imported markup (tables, divs) inherits the band's token */
.lp-prose p { margin: 0 0 1.35rem; color: var(--lp-dim); font-size: 1.0625rem; line-height: 1.75; }
.lp-prose table {
	display: block; overflow-x: auto; border-collapse: collapse;
	margin: 1.9rem 0; font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.lp-prose td, .lp-prose th {
	padding: 0.55rem 1.25rem 0.55rem 0; border-bottom: 1px solid var(--lp-hair);
	vertical-align: top; text-align: left;
}
.lp-prose strong { color: var(--lp-ink); font-weight: 600; }
.lp-prose a { color: var(--lp-ink); text-decoration: underline; text-decoration-color: var(--lp-hair); text-underline-offset: 3px; }
.lp-prose a:hover, .lp-prose a:focus-visible { text-decoration-color: var(--lp-orange); }
.lp-prose h2, .lp-prose h3, .lp-prose h4 { color: var(--lp-ink); margin: 2.4rem 0 1rem; letter-spacing: -0.02em; }
.lp-prose h2 { font-size: 1.55rem; }
.lp-prose h3 { font-size: 1.25rem; }
.lp-prose ul, .lp-prose ol { margin: 0 0 1.35rem 1.2rem; padding: 0; color: var(--lp-dim); }
.lp-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.lp-prose img { border: 1px solid var(--lp-hair); margin: 1.5rem 0; height: auto; }
.lp-prose blockquote { border-left: 2px solid var(--lp-orange); margin: 1.8rem 0; padding-left: 1.25rem; }
.lp-prose blockquote p { color: var(--lp-ink); }

/* Legal pages (privacy, disclaimer, vulnerability disclosure) — plain prose in
   a standard section band. Only job here is a reading measure: .lp-section__inner
   is the full 1440px wrap, far too wide for body copy. Matches the 760px the
   news article template uses. */
.lp-legal { max-width: 760px; }
.lp-legal h2:first-child { margin-top: 0; }
.lp-article__foot { border-top: 1px solid var(--lp-hair); margin-top: 2.75rem; padding-top: 1.5rem; }

.lp-pagenav {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem;
	margin-top: 3.25rem; font-family: var(--lp-mono); font-size: 0.8rem; letter-spacing: 0.08em;
}
.lp-pagenav a { color: var(--lp-dim); text-decoration: none; }
.lp-pagenav a:hover, .lp-pagenav a:focus-visible { color: var(--lp-orange); }
.lp-pagenav .wp-block-query-pagination-numbers { display: flex; gap: 0.9rem; }
.lp-pagenav .current { color: var(--lp-ink); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.lp-pagehead { padding-bottom: 3rem; }
.lp-pagehead__title {
	font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 640;
	letter-spacing: -0.035em; line-height: 1.05; color: var(--lp-ink);
	margin: 0 0 1.25rem; max-width: 18ch; text-wrap: balance;
}
.lp-pagehead .lp-lede { margin-bottom: 0; }
.lp-contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: start; }
.lp-contact__channel { display: block; padding: 1.6rem 0; border-top: 1px solid var(--lp-hair); text-decoration: none; }
.lp-contact__channel:last-of-type { border-bottom: 1px solid var(--lp-hair); }
.lp-contact__channel-label {
	display: block; font-family: var(--lp-mono); font-size: 0.6875rem;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 0.45rem;
}
.lp-contact__channel-value {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 620;
	letter-spacing: -0.02em; color: var(--lp-ink); transition: color 0.15s ease;
	font-variant-numeric: tabular-nums;
}
.lp-contact__channel:hover .lp-contact__channel-value,
.lp-contact__channel:focus-visible .lp-contact__channel-value { color: var(--lp-orange); }
.lp-contact__cta { margin-top: 2.75rem; }
.lp-contact__cta-text { color: var(--lp-dim); font-size: 1rem; margin: 0 0 1.25rem; }
.lp-contact__offices-label {
	font-family: var(--lp-mono); font-size: 0.6875rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--lp-dim); margin: 0 0 1rem;
}
.lp-office { padding: 1.25rem 0; border-top: 1px solid var(--lp-hair); }
.lp-office:last-of-type { border-bottom: 1px solid var(--lp-hair); }
.lp-office__city { font-size: 1rem; font-weight: 620; color: var(--lp-ink); margin: 0 0 0.35rem; }
.lp-office__addr { font-style: normal; color: var(--lp-dim); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 960px) {
	.lp-contact { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-endcta { border-top: 1px solid var(--lp-hair); }
.lp-endcta__title { font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 640; letter-spacing: -0.03em; color: var(--lp-ink); margin: 0 0 1.1rem; max-width: 24ch; }
.lp-endcta__text { color: var(--lp-dim); max-width: 52ch; margin: 0 0 2rem; }
.lp-endcta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* ============================================================
   FOOTER — film-dark, mono meta
   ============================================================ */
.lp-footer { border-top: 1px solid var(--lp-hair); }
.lp-footer__inner { max-width: var(--lp-wrap); margin: 0 auto; }
.lp-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--lp-hair); }
.lp-footer__logo img { display: block; height: 34px; width: auto; margin-bottom: 1.25rem; }
.lp-footer__tagline { color: var(--lp-dim); font-size: 0.9rem; line-height: 1.6; max-width: 34ch; margin: 0 0 1.5rem; }
.lp-footer__social { display: flex; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.lp-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--lp-ink); background: var(--lp-panel); border: 1px solid var(--lp-hair); transition: background 0.15s ease, color 0.15s ease; }
.lp-footer__social a:hover { background: var(--lp-orange); color: #16101F; border-color: var(--lp-orange); }
.lp-footer__heading { font-family: var(--lp-mono); font-size: 0.66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lp-dim); margin: 0 0 1rem; }
.lp-footer__links { margin: 0; padding: 0; list-style: none; }
.lp-footer__links li { margin-bottom: 0.6rem; }
.lp-footer__links a { color: var(--lp-dim); text-decoration: none; font-size: 0.9rem; transition: color 0.15s ease; }
.lp-footer__links a:hover { color: var(--lp-ink); }
.lp-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; }
.lp-footer__copy, .lp-footer__legal { margin: 0; font-family: var(--lp-mono); font-size: 0.69rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-dim); }
.lp-footer__legal a { color: var(--lp-dim); text-decoration: none; }
.lp-footer__legal a:hover { color: var(--lp-ink); }
@media (max-width: 900px) { .lp-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .lp-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .lp-footer__grid { grid-template-columns: 1fr; } .lp-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   LAYOUT FIX — flush section bands (remove WP block-gap)
   ============================================================ */
.lp-main { margin: 0; }
.lp-main > * { margin-block: 0; }
.lp-main > * + * { margin-block-start: 0; }