/*
 * Silectis 2026 — front-end stylesheet
 *
 * Compliant with silectis-web-foundations-v1.md (locked 2026-05-09).
 * Token names mirror theme.json slugs; values flow from theme.json into
 * --wp--preset--* CSS variables; this file aliases them and applies them
 * to component classes. Density bands (band/hero, band/editorial, etc.)
 * are documented inline at each pattern.
 *
 * Layered architecture:
 *   1. Tokens         — semantic aliases for the WP preset CSS variables.
 *   2. Reset / base   — minimal resets layered on top of WP's defaults.
 *   3. Typography     — element-level type rules (p, blockquote, etc).
 *   4. Layout         — site frame, header, footer, nav.
 *   5. Components     — silectis-{slug} pattern rules. 15 patterns from
 *                        the foundations roster.
 *   6. Utilities      — small helpers (.silectis-eyebrow, .silectis-fullbleed).
 *   7. Editor parity  — keep block editor close to front-end render.
 *
 * Tokens live in theme.json — DO NOT add hard-coded hex values here.
 * Reference --wp--preset--color--*, --wp--preset--font-size--*,
 * --wp--preset--spacing--*.
 */


/* ---------------------------------------------------------------- *
 * 1. Token aliases
 * ---------------------------------------------------------------- */

:root {
	/* Color — semantic aliases for theme.json palette */
	--c-navy:        var(--wp--preset--color--navy);
	--c-navy-deep:   var(--wp--preset--color--navy-deep);
	--c-orange:      var(--wp--preset--color--orange);
	--c-off-white:   var(--wp--preset--color--off-white);
	--c-parchment:   var(--wp--preset--color--parchment);
	--c-warm-grey:   var(--wp--preset--color--warm-grey);
	--c-charcoal:    var(--wp--preset--color--charcoal);
	--c-white:       var(--wp--preset--color--white);

	/* Typography */
	--font-sans:     var(--wp--preset--font-family--montserrat);

	--fz-caption:    var(--wp--preset--font-size--caption);
	--fz-body:       var(--wp--preset--font-size--body);
	--fz-lede:       var(--wp--preset--font-size--lede);
	--fz-title:      var(--wp--preset--font-size--title);
	--fz-display:    var(--wp--preset--font-size--display);
	--fz-hero:       var(--wp--preset--font-size--hero);

	/* Spacing — semantic aliases for theme.json spacing scale */
	--space-10:      var(--wp--preset--spacing--10);
	--space-20:      var(--wp--preset--spacing--20);
	--space-30:      var(--wp--preset--spacing--30);
	--space-40:      var(--wp--preset--spacing--40);
	--space-50:      var(--wp--preset--spacing--50);
	--space-60:      var(--wp--preset--spacing--60);
	--space-70:      var(--wp--preset--spacing--70);
	--space-80:      var(--wp--preset--spacing--80);

	/* Edge gutter for the site frame — mirrors theme.json styles.spacing.padding */
	--silectis-page-gutter: clamp(1.5rem, 6vw, 6rem);

	/* Tracking pin (per foundations §2): caption/eyebrow caps tracking */
	--track-caption: 0.04em;   /* 12–14px Medium caps */
	--track-section-label: 0.08em;  /* 15–18px Bold caps "SITUATION" labels */
	--track-display: -0.02em;
	--track-title:   -0.01em;

	/* Line-height pin (per foundations §2) */
	--lh-display: 1.05;
	--lh-title:   1.15;
	--lh-lede:    1.4;
	--lh-body:    1.55;
	--lh-list:    1.6;
	--lh-caption: 1.3;
}


/* ---------------------------------------------------------------- *
 * 2. Reset / base
 * ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-sans);
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	background: var(--c-off-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

::selection { background: var(--c-orange); color: var(--c-white); }


/* ---------------------------------------------------------------- *
 * 3. Typography
 *
 * theme.json sets element-level h1..h6 styles. This block reinforces
 * and adds anything theme.json can't express (responsive measure,
 * blockquote treatment, link transitions).
 * ---------------------------------------------------------------- */

p, li { max-width: 65ch; }            /* foundations prose measure */
p     { margin: 0 0 1em; }

a {
	color: var(--c-orange);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover, a:focus { text-decoration: underline; }

strong, b { font-weight: 700; }       /* keep weight only; inherit color */

/* Default blockquote — bare element style. Pattern-level treatments
 * (.silectis-quote, .silectis-long-form-prose blockquote) override. */
blockquote {
	border-left: 3px solid var(--c-orange);
	padding-left: var(--space-30);
	margin: var(--space-50) 0;
	font-size: var(--fz-lede);
	font-weight: 300;
	line-height: var(--lh-lede);
	letter-spacing: -0.005em;
	color: var(--c-navy);
}


/* ---------------------------------------------------------------- *
 * 4. Layout — site frame
 * ---------------------------------------------------------------- */

.site-container { background: var(--c-off-white); }

.site-inner {
	padding-top: 0;
	padding-bottom: 0;
}

/* Genesis structural wraps — header and footer share the page gutter */
.wrap {
	max-width: 1400px;
	padding-left:  var(--silectis-page-gutter);
	padding-right: var(--silectis-page-gutter);
}

/* Single-source page frame — every top-level block on a page sits inside
 * this wrapper. Patterns that should escape (e.g. silectis-fullbleed for
 * the navy section divider) override with negative margins. */
.entry-content {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left:  var(--silectis-page-gutter);
	padding-right: var(--silectis-page-gutter);
}

/* Override constrained-layout's auto-centering for our patterns — we want
 * everything left-aligned to the page gutter, not centered inside its own
 * max-width. WP's `.is-layout-constrained > *` rule sets margin-left/right
 * with !important; this override needs !important to beat it. */
.silectis-hero > *,
.silectis-section > *,
.silectis-cta > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------- *
 * Header — logo left, primary nav right, sticky-ready
 * ---------------------------------------------------------------- */

/* Floating header — sticky to top, hides on scroll-down past the hero,
 * reveals on any scroll-up. Frosted background + hairline border appear
 * once the page has scrolled past the very top. Behavior is driven by JS
 * (see assets/js/silectis-interactions.js); CSS handles the visuals. */
.site-header {
	background: rgba(250, 250, 247, 0.92);    /* off-white at ~92% — works as frosted under the blur */
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: var(--space-40) 0;
	border-bottom: 1px solid transparent;
	position: sticky;
	top: 0;
	z-index: 100;
	transition:
		transform 0.32s cubic-bezier(0.2, 0.8, 0.4, 1),
		background 0.2s ease,
		border-bottom-color 0.2s ease,
		box-shadow 0.2s ease;
	will-change: transform;
}
.site-header.is-scrolled {
	background: rgba(250, 250, 247, 0.78);
	border-bottom-color: var(--c-warm-grey);
	box-shadow: 0 1px 0 rgba(27, 58, 92, 0.04), 0 4px 16px rgba(27, 58, 92, 0.04);
}
.site-header.is-hidden {
	transform: translateY(-100%);
}

/* Reduced-motion users still get the scroll-state styling (it's a visual
 * cue, not motion) but never the hide/reveal transform. */
@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: background 0.2s ease, border-bottom-color 0.2s ease, box-shadow 0.2s ease;
	}
	.site-header.is-hidden {
		transform: none;
	}
}
.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
	flex-wrap: nowrap;
}

/* Logo / title area — text title is replaced with the wordmark logo via
 * background-image. The text-indent off-screen technique keeps the title
 * accessible to screen readers while displaying the brand mark visually. */
.title-area {
	flex: 0 0 auto;
	max-width: 240px;
}
.title-area img,
.custom-logo {
	max-height: 44px;
	width: auto;
}
.title-area .site-title {
	margin: 0;
	line-height: 1;
}
/* Fallback only. When a logo is set in Appearance > Customize > Site Identity,
 * silectis_2026_header_logo() outputs a real <img> and adds .site-title--logo,
 * and this background must not paint underneath it. The Media Library copy is
 * also the safer source: the theme-asset PNGs shipped mode 0600 and returned
 * 403 in production. */
.title-area .site-title:not(.site-title--logo) a {
	display: block;
	width: 200px;
	height: 44px;
	background-image: url(../img/silectis-logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* Tagline / site description — hidden site-wide. The legacy
 * "Simplifying data engineering, accelerating insights" tagline conflicts
 * with the new positioning; see audit conflict #1. The wordmark is
 * sufficient brand identification; positioning is established by the
 * hero on each page. */
.site-description { display: none; }

/* ---------------------------------------------------------------- *
 * Primary navigation
 * ---------------------------------------------------------------- */

.nav-primary {
	font-size: var(--fz-body);
	margin-left: auto;
}
.nav-primary .menu {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-primary .menu > li { position: relative; }
.nav-primary .menu > li > a {
	display: inline-block;
	position: relative;
	color: var(--c-charcoal);
	font-weight: 500;
	text-decoration: none;
	padding: 0.5rem 0 0.625rem;
	transition: color 0.18s ease;
}
/* Orange underline that scales from 0 to 100% on hover — slower at the start,
 * snappier at the finish via the brand easing curve. Replaces the previous
 * on/off border-bottom approach. */
.nav-primary .menu > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--c-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.4, 1);
}
.nav-primary .menu > li > a:hover,
.nav-primary .menu > .current-menu-item > a,
.nav-primary .menu > .current-menu-ancestor > a {
	color: var(--c-navy);
}
.nav-primary .menu > li > a:hover::after,
.nav-primary .menu > .current-menu-item > a::after,
.nav-primary .menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Sub-menu dropdowns */
.nav-primary .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 220px;
	background: var(--c-off-white);
	border: 1px solid var(--c-warm-grey);
	box-shadow: 0 8px 24px rgba(27, 58, 92, 0.08);
	margin: 0;
	padding: var(--space-20) 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 200;
}
.nav-primary .menu > li:hover > .sub-menu,
.nav-primary .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-primary .sub-menu li { display: block; }
.nav-primary .sub-menu a {
	display: block;
	padding: 0.6rem 1.25rem;
	color: var(--c-charcoal);
	font-size: var(--fz-caption);
	font-weight: 500;
	text-decoration: none;
}
.nav-primary .sub-menu a:hover,
.nav-primary .sub-menu .current-menu-item > a {
	color: var(--c-navy);
	background: var(--c-warm-grey);
}

/* "Get a Demo" CTA — applied via menu item custom class `is-cta`.
 * Filled orange, matching the primary button style used at the bottom of
 * every page, so the nav's action reads as the same kind of thing. */
.nav-primary .menu > li.is-cta > a {
	background: var(--c-orange);
	color: var(--c-white);
	padding: 0.625rem 1.5rem;
	font-weight: 700;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	font-size: var(--fz-caption);
	border: 0;
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.nav-primary .menu > li.is-cta > a:hover {
	background: var(--c-navy);
	color: var(--c-white);
}
.nav-primary .menu > li.is-cta > a::after {
	display: none;
}

/* ---------------------------------------------------------------- *
 * Genesis responsive menu — kicks in below 900px
 * ---------------------------------------------------------------- */

.menu-toggle,
.sub-menu-toggle {
	display: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: var(--space-20);
	color: var(--c-navy);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.site-header .wrap {
		flex-wrap: wrap;
		gap: var(--space-30);
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-20);
		margin-left: auto;
	}
	.menu-toggle::before {
		content: '';
		display: inline-block;
		width: 22px;
		height: 14px;
		background-image:
			linear-gradient(var(--c-navy), var(--c-navy)),
			linear-gradient(var(--c-navy), var(--c-navy)),
			linear-gradient(var(--c-navy), var(--c-navy));
		background-size: 100% 2px;
		background-position: top, center, bottom;
		background-repeat: no-repeat;
		transition: transform 0.2s ease;
	}
	.menu-toggle.activated::before {
		background-image:
			linear-gradient(var(--c-orange), var(--c-orange)),
			linear-gradient(var(--c-orange), var(--c-orange)),
			linear-gradient(var(--c-orange), var(--c-orange));
	}

	.nav-primary {
		flex: 0 0 100%;
		margin: 0;
		display: none;
	}
	.nav-primary.activated { display: block; }
	.nav-primary .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-30) 0;
		border-top: 1px solid var(--c-warm-grey);
	}
	.nav-primary .menu > li {
		border-bottom: 1px solid var(--c-warm-grey);
	}
	.nav-primary .menu > li > a {
		display: block;
		padding: var(--space-30) 0;
		font-size: 1.0625rem;
	}
	/* In the mobile drawer each menu item is its own row separated by a
	 * hairline border; the orange scaleX underline isn't useful here. */
	.nav-primary .menu > li > a::after { content: none; }

	.nav-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 0.75rem 1rem;
	}
	.nav-primary .menu > li.menu-item-has-children > .sub-menu-toggle + .sub-menu,
	.nav-primary .menu > li.menu-item-has-children:hover > .sub-menu,
	.nav-primary .menu > li.menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	.sub-menu-toggle {
		display: inline-block;
		float: right;
		margin-top: 0.75rem;
	}
	.sub-menu-toggle .dashicons-arrow-down-alt2::before {
		content: '+';
		font-size: 1.25rem;
	}
	.sub-menu-toggle.activated .dashicons-arrow-down-alt2::before { content: '−'; }

	.nav-primary .menu > li.is-cta {
		border-bottom: 0;
		margin-top: var(--space-20);
	}
	.nav-primary .menu > li.is-cta > a {
		display: block;
		text-align: center;
		padding: var(--space-30);
	}
}

/* ---------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------- */

.site-footer {
	background: var(--c-navy);
	color: var(--c-off-white);
	padding: var(--space-60) 0 var(--space-40);
	margin-top: var(--space-70);
}
.site-footer a { color: var(--c-orange); }
.site-footer p { color: var(--c-warm-grey); margin: 0; }

/* Footer layout — minimal: just section nav + legal row with hairline.
 *   1. Inline link row (Platform · Approach · Partners · Resources · About · Get a Demo)
 *   2. Legal row (copyright left, Privacy/Terms right) above a hairline
 * Rendered by `silectis_2026_render_footer` in functions.php. */
.silectis-footer__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}
.silectis-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-40);
}
.silectis-footer__nav li { margin: 0; }
.silectis-footer__nav a {
	color: var(--c-off-white) !important;
	text-decoration: none;
	font-size: var(--fz-caption);
	font-weight: 500;
	transition: color 0.18s ease;
}
.silectis-footer__nav a:hover {
	color: var(--c-orange) !important;
}
.silectis-footer__legal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-30);
	padding-top: var(--space-30);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.silectis-footer__legal p {
	font-size: var(--fz-caption);
	margin: 0;
}
.silectis-footer__legal a {
	color: var(--c-warm-grey) !important;
	text-decoration: none;
	transition: color 0.18s ease;
}
.silectis-footer__legal a:hover {
	color: var(--c-orange) !important;
}
@media (max-width: 768px) {
	.silectis-footer__nav ul { gap: var(--space-30); }
}


/* ================================================================ *
 * 5. Components / patterns
 *
 * One block per pattern from silectis-web-foundations-v1.md §5. Each
 * pattern uses .silectis-{slug} as its root class. Density band rules
 * (band/hero, band/editorial, etc.) are noted inline.
 * ================================================================ */

/* Eyebrow — small-caps orange label for hero / section-opener tops.
 * Foundations: var(--fz-caption), Medium 500, var(--track-caption). */
.silectis-eyebrow {
	font-size: var(--fz-caption);
	font-weight: 500;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	color: var(--c-orange);
	margin: 0 0 var(--space-20);
}
.silectis-eyebrow--neutral { color: var(--c-charcoal); }  /* "CASE IN POINT" style */

/* Section-label — 16px Bold caps used inside cards (e.g. "SITUATION/APPROACH/RESULTS"). */
.silectis-section-label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: var(--track-section-label);
	text-transform: uppercase;
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
}

/* Accent line — 48×3 px orange rule used as card-row accent. */
.silectis-accent-line {
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--c-orange);
	margin: 0 0 var(--space-30);
	border: 0;
}

/* ---------------------------------------------------------------- *
 * 5.1 hero-typographic — band/hero
 *     padding-top space/70 (96px), padding-bottom space/60 (64px)
 *     h1: var(--fz-hero) 900, LH 1.05, tracking -0.02em
 *     supporting: var(--fz-lede) 400, LH 1.4, max-width 56ch
 * ---------------------------------------------------------------- */
.silectis-hero {
	padding: var(--space-70) 0 var(--space-60);
}
.silectis-hero__statement {
	font-size: var(--fz-hero);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
}
.silectis-hero__supporting {
	margin-top: var(--space-40);
	font-size: var(--fz-display);
	font-weight: 300;       /* Light — editorial echo of the Black 900 H1 (deck slide 13 rhythm) */
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--c-charcoal);
	max-width: 56ch;
}

/* Inner pages tone down the hero one step — display + Bold 700 instead of
 * hero + Black 900. Home (the .home body class) keeps the billboard-grade
 * treatment above as the loudest element on the site. Inner heroes read
 * as confident article openers rather than positioning headlines. */
body:not(.home) .silectis-hero__statement {
	font-size: var(--fz-display);
	font-weight: 700;
}
body:not(.home) .silectis-hero__supporting {
	font-size: var(--fz-title);
}

/* --split: hero copy and a form side by side, so a conversion page keeps its
 * form above the fold. Stacks below 900px like the other two-column patterns.
 * The form heading drops to title scale so it doesn't compete with the H1
 * sitting beside it. */
.silectis-hero--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-hero--split > * { margin-block-start: 0; }
@media (min-width: 900px) {
	.silectis-hero--split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-60);
	}
}
.silectis-hero--split .silectis-form {
	padding: 0;
}
.silectis-hero--split .silectis-form h2 {
	font-size: var(--fz-title);
	margin-bottom: var(--space-30);
}

/* Standalone accent line — used as a small section divider between hero and
 * the intro block. */
.silectis-hero + hr.silectis-accent-line,
hr.silectis-accent-line.is-section-divider {
	margin: var(--space-40) 0;
	width: 3rem;
	max-width: 3rem;     /* defeat WP's default full-width hr */
	border: 0;
	height: 3px;
	background: var(--c-orange);
}

/* When a hero is followed by an accent-line + intro pair, scope the
 * vertical rhythm so the intro stays visible above the fold. Targets only
 * the home-style "hero + divider + intro" pattern; leaves /approach/-style
 * hero-into-content alone. */
.silectis-hero:has(+ hr.silectis-accent-line) {
	padding-bottom: var(--space-40);
}
.silectis-section.silectis-intro {
	padding-top: var(--space-40);
	padding-bottom: var(--space-60);
}

/* Dark variant — when the hero sits on a navy background */
.silectis-hero--dark {
	background: var(--c-navy);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--silectis-page-gutter);
	padding-right: var(--silectis-page-gutter);
}
.silectis-hero--dark .silectis-hero__statement,
.silectis-hero--dark .silectis-eyebrow + h1 { color: var(--c-off-white); }
.silectis-hero--dark .silectis-hero__supporting { color: var(--c-warm-grey); }


/* ---------------------------------------------------------------- *
 * 5.2 section-opener — band/section-opener
 *     padding-top space/60 (64px), padding-bottom space/30 (16px)
 *     h2: var(--fz-title) 700, LH 1.15
 *     supporting: var(--fz-lede) 400, LH 1.4
 * ---------------------------------------------------------------- */
.silectis-section {
	padding: var(--space-60) 0 var(--space-30);
}
.silectis-section h2 {
	font-size: var(--fz-display);  /* was --fz-title — now display so section headlines
	                                  anchor above sub-items (cards, pillars, phase strips)
	                                  which sit at title size. Establishes hierarchy. */
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
	max-width: 28ch;
	text-wrap: balance;
}
.silectis-section .silectis-eyebrow + h2 { margin-top: var(--space-20); }
.silectis-section p {
	font-size: var(--fz-lede);
	line-height: var(--lh-lede);
	color: var(--c-charcoal);
	max-width: 56ch;
}


/* ---------------------------------------------------------------- *
 * 5.3 section-divider (.silectis-divider) — band/section-divider
 *     full-bleed navy, padding space/70 top + bottom, margin space/70.
 *     headline: var(--fz-display) 900 off-white, LH 1.05
 *     supporting: var(--fz-lede) 400 warm-grey, LH 1.4, max-width 56ch
 * ---------------------------------------------------------------- */
.silectis-divider {
	background: var(--c-navy);
	color: var(--c-off-white);
	padding: var(--space-70) 0;
	margin: var(--space-70) 0;
}
/* The navy band itself is full-bleed with page-gutter padding (.silectis-
 * fullbleed). Don't add a second centering layer to the inner group —
 * inherit the band's natural content frame so the headline aligns with
 * page content above and below (eyebrow, intro, CTA all sit at the same
 * left edge). */
.silectis-divider .wp-block-group {
	max-width: none;
	margin: 0;
	padding: 0;
}
.silectis-divider .wp-block-group > * {
	margin-left: 0 !important;     /* defeat WP is-layout-constrained centering on inner children */
	margin-right: 0 !important;
}
.silectis-divider__headline {
	font-size: var(--fz-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-off-white);
	max-width: 32ch;
	text-wrap: balance;
}
.silectis-divider__supporting {
	margin-top: var(--space-30);
	font-size: var(--fz-lede);
	line-height: var(--lh-lede);
	color: var(--c-warm-grey);
	max-width: 56ch;
}


/* ---------------------------------------------------------------- *
 * 5.4 two-thirds-editorial — band/editorial
 *     2fr / 1fr at ≥900px; stacked below.
 *     padding space/60 top + bottom; gap space/60.
 *     lede: var(--fz-title) 700 navy, LH 1.15, tracking -0.01em
 *     support: var(--fz-body) 400 charcoal, LH 1.55, measure 65ch
 * ---------------------------------------------------------------- */
.silectis-editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	padding: var(--space-60) 0;
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-editorial > * { margin-block-start: 0; }
@media (min-width: 900px) {
	.silectis-editorial {
		grid-template-columns: 2fr 1fr;
		gap: var(--space-60);
	}
	/* --prose: for the blocks where the right column carries the section's
	 * actual argument rather than a short callout. The base 2fr/1fr put ~630
	 * characters into the narrow column, forcing a ~45ch measure over 19 lines
	 * while the statement's 802px sat mostly empty. Flipping the weight gives
	 * the prose room; the global `p { max-width: 65ch }` still holds the
	 * measure, so the extra width reads as margin rather than a long line. */
	.silectis-editorial--prose {
		grid-template-columns: 1fr 2fr;
	}
}
.silectis-editorial__lede {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
}
.silectis-editorial__support p {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
}


/* ---------------------------------------------------------------- *
 * 5.5 numbered-editorial — TWO VARIANTS:
 *
 *   .silectis-numbered                  → prominent (deck slide 3)
 *   .silectis-numbered--quad            → 2×2 grid (deck slide 12)
 *
 *   Prominent: big var(--fz-display) Black orange number on the left,
 *   horizontal var(--fz-title) Bold navy heading, var(--fz-lede) body.
 *   Quad: 2×2 grid; smaller ~32px Black orange number, ~22px Bold
 *   heading, var(--fz-body) body.
 * ---------------------------------------------------------------- */
/* WordPress stamps .has-global-padding onto constrained-layout groups, which
 * re-applies the root page gutter to a block that is already inside
 * .entry-content's gutter. Every sibling section neutralises it by accident,
 * because each declares `padding: <space> 0` and the shorthand zeroes the
 * horizontal side. This wrapper had no padding rule of its own, so it was the
 * only block on the page sitting a second gutter (86px) to the right. */
.silectis-numbered-wrap {
	padding-left: 0;
	padding-right: 0;
}
/* The same constrained-layout treatment also caps children at content-size and
 * centres them with auto margins, which floated the list 34px right of the
 * section heading above it. Sibling sections span the full gutter-inset width,
 * so the list should too. Two classes to out-specify WP's :where() rule. */
.silectis-numbered-wrap > .silectis-numbered {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.silectis-numbered {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-50);
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-numbered > * { margin-block-start: 0; }
.silectis-numbered__item {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: var(--space-40);
	align-items: start;
	max-width: none;          /* defeat the universal `p, li { max-width: 65ch }`
	                             rule, which was clobbering this layout container.
	                             The body <p> inside keeps its own 65ch measure. */
}
.silectis-numbered__num {
	font-size: var(--fz-display);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--track-display);
	color: var(--c-orange);
}
.silectis-numbered__heading {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
}
.silectis-numbered__body {
	font-size: var(--fz-lede);
	line-height: var(--lh-lede);
	color: var(--c-charcoal);
	margin: 0;
}

/* Schematic glyph that floats to the right of the body paragraph. Stroke-
 * based; inherits --c-orange via currentColor so the icon palette stays a
 * single brand accent without per-rule overrides. The figure sits in source
 * after the heading so the heading remains full-width and the body wraps
 * to the icon's left.
 *
 * margin-right on the float anchors the icon at the right edge of the
 * content column with explicit breathing room — reads as "right-justified
 * mark" rather than mid-column floater. */
.silectis-numbered__icon {
	float: right;
	width: 64px;
	height: 64px;
	margin: 0 var(--space-40) var(--space-30) var(--space-50);
	color: var(--c-orange);
	shape-outside: margin-box;
}
.silectis-numbered__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Quad variant — 2×2 grid */
.silectis-numbered--quad {
	grid-template-columns: 1fr;
	gap: var(--space-50);
}
@media (min-width: 900px) {
	.silectis-numbered--quad {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-50) var(--space-60);
	}
}
.silectis-numbered--quad .silectis-numbered__item {
	grid-template-columns: 3rem 1fr;
	gap: var(--space-30);
}
.silectis-numbered--quad .silectis-numbered__num {
	font-size: 2rem;
	letter-spacing: var(--track-display);
}
.silectis-numbered--quad .silectis-numbered__heading {
	font-size: 1.375rem;
	margin-bottom: var(--space-20);
}
.silectis-numbered--quad .silectis-numbered__body {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
}


/* ---------------------------------------------------------------- *
 * 5.6 phase-strip — TWO VARIANTS:
 *
 *   .silectis-phases                    → compact (deck slide 6)
 *   .silectis-phases--prominent         → prominent / no-connector (deck slide 9)
 *
 *   Compact: 2px orange connector across top with 20px filled dots;
 *   inline 28px Black orange numeral, var(--fz-title) Black navy phase
 *   name, caption time-label, body lines. The connector continues past
 *   the last dot per the deck.
 *
 *   Prominent: big var(--fz-display) Black orange number above title,
 *   no connector, no dots.
 * ---------------------------------------------------------------- */
.silectis-phases {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	padding: var(--space-30) 0 var(--space-60);
	position: relative;
	align-items: start;             /* dots align to row top regardless of column height */
	--wp--style--block-gap: 0;      /* defeat WP's is-layout-constrained margin between siblings */
}
.silectis-phases > * { margin-block-start: 0; }   /* belt-and-suspenders for the same */
@media (min-width: 900px) {
	.silectis-phases {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-60);
	}
	.silectis-phases::before {
		content: '';
		position: absolute;
		top: calc(1rem + 9px); /* dot top (1rem) + dot radius (10px) - line offset (1px) */
		left: 10px;
		right: 0;
		height: 2px;
		background: var(--c-orange);
		z-index: 0;
	}
}
/* Item rhythm: dot at top:1rem, dot height 20px → dot ends at 36px from item
 * top. Padding-top 3.25rem (52px) puts the number 16px below the dot — close
 * to deck slide 6's 21px gap and tighter than the prior 28px. */
.silectis-phases__item {
	padding-top: 3.25rem;
	position: relative;
	z-index: 1;
}
.silectis-phases__item::before {
	content: '';
	position: absolute;
	top: 1rem;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--c-orange);
	border-radius: 50%;
}
.silectis-phases__num {
	display: block;
	font-size: 1.75rem;       /* between subhead-max and title-min — inline marker */
	font-weight: 900;
	color: var(--c-orange);
	line-height: 1;
	letter-spacing: var(--track-display);
	margin: 0 0 var(--space-20);
}
.silectis-phases__name {
	font-size: var(--fz-title);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
}
.silectis-phases__time {
	font-size: var(--fz-caption);
	font-weight: 500;
	color: var(--c-charcoal);
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	margin: 0 0 var(--space-30);
}
.silectis-phases__body {
	font-size: var(--fz-body);
	line-height: var(--lh-list);
	color: var(--c-charcoal);
	max-width: 32ch;
}

/* Prominent variant — no connector, no dots, big numbers above name */
.silectis-phases--prominent::before { content: none; }
.silectis-phases--prominent .silectis-phases__item { padding-top: 0; }
.silectis-phases--prominent .silectis-phases__item::before { content: none; }
.silectis-phases--prominent .silectis-phases__num {
	font-size: var(--fz-display);
	margin: 0 0 var(--space-20);
}

/* Compact variant — Home's Approach tease preview. Same vocabulary as the
 * canonical phase strip (orange connector + dots + numbered phases) at
 * reduced visual weight. No body copy; name + time label only. Reads as
 * a teaser into /approach/, not a competing diagram. */
.silectis-phases--compact {
	list-style: none;
	margin: var(--space-50) 0;
	padding: var(--space-30) 0 var(--space-40);
	gap: var(--space-40);
}
.silectis-phases--compact .silectis-phases__num,
.silectis-phases--compact .silectis-phases__name,
.silectis-phases--compact .silectis-phases__time {
	display: block;
}
.silectis-phases--compact .silectis-phases__item {
	padding-top: 2rem;     /* dot top 0.5rem + 14px dot + 12px gap */
}
.silectis-phases--compact .silectis-phases__item::before {
	top: 0.5rem;
	width: 14px;
	height: 14px;
}
@media (min-width: 900px) {
	.silectis-phases--compact {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-50);
	}
	.silectis-phases--compact::before {
		top: calc(0.5rem + 6px);   /* dot center: top + radius */
		left: 7px;                 /* half of 14px dot */
		height: 1.5px;
	}
}
.silectis-phases--compact .silectis-phases__num {
	font-size: var(--fz-body);
	margin: 0 0 var(--space-10);
}
.silectis-phases--compact .silectis-phases__name {
	font-size: var(--fz-lede);
	font-weight: 700;             /* subordinate to canonical strip's 900 */
	line-height: var(--lh-title);
	margin: 0 0 var(--space-10);
}
.silectis-phases--compact .silectis-phases__time {
	font-size: var(--fz-caption);
	margin: 0;
}


/* ---------------------------------------------------------------- *
 * 5.7 quote-feature — band/editorial (deck slide 4, web-scaled)
 *     Oversized orange quote mark + Light 300 var(--fz-title) quote +
 *     Bold attribution + Medium role.
 * ---------------------------------------------------------------- */
/* Layout: 2-column grid (mark | content). Eyebrow spans both columns
 * across the top; the mark sits in column 1, quote and attribution
 * stack in column 2 so the attribution aligns with the quote text.
 * Per foundations §5 component 9: mark 8rem+, quote Light 300. */
.silectis-quote {
	padding: var(--space-60) 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-40);
	row-gap: var(--space-30);
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-quote > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-block-start: 0;
}
.silectis-quote .silectis-eyebrow {
	grid-column: 1 / -1;
	margin: 0 0 var(--space-30);
}
.silectis-quote__mark {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--font-sans);
	font-size: 8rem;
	font-weight: 900;
	line-height: 0.85;
	color: var(--c-orange);
	margin: 0;
}
.silectis-quote blockquote {
	grid-column: 2;
	grid-row: 2;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: var(--fz-lede);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--c-navy);
	max-width: 56ch;
	align-self: center;       /* center quote text vertically against the tall mark */
}
.silectis-quote__attribution {
	grid-column: 2;
	grid-row: 3;
	margin: 0;
}
.silectis-quote__name {
	font-size: var(--fz-lede);
	font-weight: 700;
	color: var(--c-navy);
	margin: 0 0 var(--space-10);
}
.silectis-quote__role {
	font-size: var(--fz-caption);
	font-weight: 500;
	color: var(--c-charcoal);
	letter-spacing: var(--track-caption);
	margin: 0;
}
/* Navy variant. For pages where the customer quote is the emphatic
 * moment rather than a passage between sections (Platform). Reuses the
 * band shadow trick so the navy runs to the viewport edge without a
 * layout change. The orange mark and eyebrow already carry on navy;
 * only the navy-on-light text needs inverting. */
.silectis-quote--dark {
	background: var(--c-navy);
	box-shadow: 0 0 0 100vmax var(--c-navy);
	clip-path: inset(0 -100vmax);
	padding: var(--space-70) 0;
	margin: var(--space-70) 0;   /* match .silectis-divider — navy bands stand off
	                                the surrounding content, they don't butt it */
}
.silectis-quote--dark blockquote,
.silectis-quote--dark .silectis-quote__name {
	color: var(--c-off-white);
}
.silectis-quote--dark .silectis-quote__role {
	color: var(--c-warm-grey);
}

.silectis-quote cite {
	display: block;
	margin-top: var(--space-40);
	font-style: normal;
	font-size: var(--fz-caption);
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	color: var(--c-charcoal);
}


/* ---------------------------------------------------------------- *
 * 5.8 stat-callout — band/stats
 *     3-up display numbers + caption labels. Number = orange.
 * ---------------------------------------------------------------- */
.silectis-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	padding: var(--space-60) 0;
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-stats > * { margin-block-start: 0; }
@media (min-width: 700px) {
	.silectis-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-50); }
}
.silectis-stat__number {
	font-size: var(--fz-hero);
	font-weight: 900;
	line-height: 1;
	letter-spacing: var(--track-display);
	color: var(--c-orange);
}
.silectis-stat__number--navy { color: var(--c-navy); }   /* opt-out for navy variant */
.silectis-stat__label {
	display: block;
	margin-top: var(--space-20);
	font-size: var(--fz-caption);
	font-weight: 500;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	color: var(--c-charcoal);
}


/* ---------------------------------------------------------------- *
 * 5.9 card-row — band/grid (deck slides 5, 7, 10)
 *     3- or 4-up cards with orange accent rule on top.
 * ---------------------------------------------------------------- */
.silectis-card-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	padding: var(--space-60) 0;
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-card-row > * { margin-block-start: 0; }
@media (min-width: 600px) { .silectis-card-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .silectis-card-row.silectis-card-row--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .silectis-card-row.silectis-card-row--4 { grid-template-columns: repeat(4, 1fr); } }

.silectis-card-row__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-30);
}
.silectis-card-row__item::before {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--c-orange);
	margin: 0 0 var(--space-30);
}
/* When cards lead with a screenshot, suppress the top accent rule and
 * place the orange accent between the image and the heading instead.
 * Same editorial signal, repositioned to give the heading breathing room
 * below the screenshot. */
.silectis-card-row--with-images .silectis-card-row__item::before {
	display: none;
}
.silectis-card-row--with-images .silectis-card-row__heading::before {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--c-orange);
	margin: 0 0 var(--space-30);
}
.silectis-card-row__image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--c-warm-grey);
}
.silectis-card-row__heading {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	margin: 0;
}
.silectis-card-row__body {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	margin: 0;
}

/* Dark-variant card-row (used inside .silectis-divider full-bleed) */
.silectis-divider .silectis-card-row__heading { color: var(--c-off-white); }
.silectis-divider .silectis-card-row__body { color: var(--c-warm-grey); }


/* ---------------------------------------------------------------- *
 * silectis-workspace — alternating two-column editorial block for
 * /platform/'s AI Workspaces section. Each workspace gets a full
 * image + heading + lede + detail + feature bullets treatment.
 * Default block: content-left, image-right.
 * `.silectis-workspace--reverse`: image-left, content-right.
 * On mobile both stack content-first / image-below.
 * ---------------------------------------------------------------- */
.silectis-workspace {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-60);
	padding: var(--space-50) 0;
	align-items: center;
	--wp--style--block-gap: 0;
}
.silectis-workspace > * {
	margin-block-start: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.silectis-workspace--reverse .silectis-workspace__content {
	order: 2;
}
.silectis-workspace__image {
	margin: 0;
}
.silectis-workspace__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--c-warm-grey);
}
.silectis-workspace__content {
	max-width: 60ch;
}
.silectis-workspace__content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.silectis-workspace__content .silectis-eyebrow {
	margin: 0 0 var(--space-20);
}
.silectis-workspace__heading {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	margin: 0 0 var(--space-20);
}
.silectis-workspace__lede {
	font-size: var(--fz-lede);
	font-weight: 500;
	line-height: var(--lh-lede);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
}
.silectis-workspace__content p {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	margin: 0 0 var(--space-30);
}
.silectis-workspace__features {
	list-style: none;
	padding: 0;
	margin: var(--space-20) 0 0;
}
.silectis-workspace__features li {
	position: relative;
	padding-left: 1.5em;
	margin: 0 0 var(--space-20);
	font-size: var(--fz-body);
	line-height: var(--lh-list);
	color: var(--c-charcoal);
}
.silectis-workspace__features li:last-child { margin-bottom: 0; }
.silectis-workspace__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5em;
	height: 0.5em;
	background: var(--c-orange);
	border-radius: 50%;
}

@media (max-width: 768px) {
	.silectis-workspace {
		grid-template-columns: 1fr;
		gap: var(--space-40);
	}
	/* When stacked, always show content first; image below */
	.silectis-workspace--reverse .silectis-workspace__content {
		order: 0;
	}
	.silectis-workspace__image {
		order: 1;
	}
}


/* ---------------------------------------------------------------- *
 * 5.10 lede-with-reasons — band/list (deck slide 2)
 *     Display headline + 3-row list of Bold heading + Regular body.
 *     No numbers.
 * ---------------------------------------------------------------- */
.silectis-reasons {
	display: grid;
	gap: var(--space-50);
	padding: var(--space-60) 0;
}
.silectis-reasons__lede {
	font-size: var(--fz-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	max-width: 22ch;
	margin: 0 auto var(--space-30) 0;     /* left-align: 0 left, auto right; beats WP's auto-centering */
	margin-left: 0 !important;            /* defeats WP is-layout-constrained's !important auto */
	margin-right: auto !important;
}
.silectis-reasons__list {
	display: grid;
	gap: var(--space-50);
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.silectis-reasons__heading {
	font-size: var(--fz-lede);
	font-weight: 700;
	line-height: var(--lh-title);
	color: var(--c-navy);
	margin: 0 0 var(--space-20);
}
.silectis-reasons__body {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	margin: 0;
	max-width: 65ch;
}


/* ---------------------------------------------------------------- *
 * 5.11 long-form-prose — band/editorial (web-only)
 *     Article flow with 65ch measure, h2/h3 hierarchy, blockquote.
 * ---------------------------------------------------------------- */
.silectis-prose {
	max-width: 65ch;
	padding: var(--space-60) 0;
}
.silectis-prose > * + * { margin-top: var(--space-30); }
.silectis-prose h2 {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	margin-top: var(--space-50);
	margin-bottom: var(--space-30);
}
.silectis-prose h3 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: var(--lh-title);
	color: var(--c-navy);
	margin-top: var(--space-40);
	margin-bottom: var(--space-30);
}
.silectis-prose p {
	font-size: var(--fz-body);
	line-height: 1.65;
	color: var(--c-charcoal);
}
.silectis-prose ul,
.silectis-prose ol {
	font-size: var(--fz-body);
	line-height: var(--lh-list);
	color: var(--c-charcoal);
	padding-left: 1.25em;
}
.silectis-prose li + li { margin-top: var(--space-20); }
.silectis-prose blockquote {
	border-left: 3px solid var(--c-orange);
	padding-left: var(--space-30);
	margin: var(--space-40) 0;
	font-size: var(--fz-lede);
	font-weight: 300;
	line-height: var(--lh-lede);
	color: var(--c-navy);
}


/* ---------------------------------------------------------------- *
 * 5.12 card-grid — band/grid (web-only)
 *     6+ cards in responsive grid. Distinct from card-row (which is
 *     exactly 3-4). For case-study indices, blog index, AI workspaces.
 * ---------------------------------------------------------------- */
.silectis-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-50);
	padding: var(--space-60) 0;
	align-items: start;
	--wp--style--block-gap: 0;
}
.silectis-card-grid > * { margin-block-start: 0; }
@media (min-width: 600px) { .silectis-card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .silectis-card-grid { grid-template-columns: repeat(3, 1fr); } }

.silectis-card-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-30);
	padding: var(--space-40);
	border: 1px solid var(--c-warm-grey);
}
.silectis-card-grid__item::before {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--c-orange);
	margin: 0 0 var(--space-20);
}
.silectis-card-grid__tag {
	font-size: var(--fz-caption);
	font-weight: 500;
	letter-spacing: var(--track-section-label);
	text-transform: uppercase;
	color: var(--c-charcoal);
	margin: 0 0 var(--space-20);
}
.silectis-card-grid__heading {
	font-size: var(--fz-lede);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	margin: 0;
}
.silectis-card-grid__body {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	margin: 0;
}


/* ---------------------------------------------------------------- *
 * 5.13 closing-cta (.silectis-cta) — band/hero
 *     Same hero treatment as page hero, but at bottom of page.
 *     padding space/70 top + space/60 bottom.
 *     h2: var(--fz-hero) 900 navy.
 *     button: orange fill, navy hover, caption-tracked caps.
 * ---------------------------------------------------------------- */
.silectis-cta {
	padding: var(--space-70) 0 var(--space-60);
}
.silectis-cta h2 {
	font-size: var(--fz-hero);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
	max-width: 32ch;
	text-wrap: balance;
}
/* Inner-page closing CTA — paired with the inner-page hero tone-down above. */
body:not(.home) .silectis-cta h2 {
	font-size: var(--fz-display);
	font-weight: 700;
}
.silectis-cta p {
	font-size: var(--fz-lede);
	line-height: var(--lh-lede);
	color: var(--c-charcoal);
	max-width: 56ch;
}
.silectis-cta .wp-block-buttons { margin-top: var(--space-40); }
.silectis-cta .wp-block-button__link {
	background: var(--c-orange);
	color: var(--c-white);
	font-weight: 700;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	font-size: var(--fz-caption);
	padding: 0.875rem 1.75rem;
	border-radius: 0;
	transition: background 0.15s ease;
}
.silectis-cta .wp-block-button__link:hover { background: var(--c-navy); }


/* ================================================================ *
 * 6. Utilities
 * ================================================================ */

.silectis-fullbleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--silectis-page-gutter);
	padding-right: var(--silectis-page-gutter);
}

/* Background bands — alternate section backgrounds for visual rhythm.
 * Uses the box-shadow + clip-path trick to extend the band's background
 * to viewport edges WITHOUT changing layout: the band keeps its position
 * inside .entry-content's gutter, so children align cleanly with the
 * surrounding off-white sections. clip-path: inset(0 -100vmax) keeps the
 * shadow horizontal-only (no vertical bleed). */
.silectis-band {
	position: relative;
	clip-path: inset(0 -100vmax);
	padding-bottom: var(--space-60);
}
.silectis-band--parchment {
	background: var(--c-parchment);
	box-shadow: 0 0 0 100vmax var(--c-parchment);
}
.silectis-band--off-white {
	background: var(--c-off-white);
	box-shadow: 0 0 0 100vmax var(--c-off-white);
}
/* Band runs. A thematic unit often spans several top-level blocks (a
 * section opener plus the three workspaces beneath it). Tagging each one
 * individually would stack a bottom pad between every pair and read as
 * stripes; collapsing the interior padding makes the run render as one
 * continuous field with a single pad at the end. */
.silectis-band:has(+ .silectis-band) {
	padding-bottom: 0;
}

.silectis-text-balance { text-wrap: balance; }
.silectis-text-pretty  { text-wrap: pretty; }


/* ================================================================ *
 * Motion — restraint per silectis-design-system-spec.md voice rules.
 * Three behaviors:
 *   1. Hero entrance stagger on page load (CSS-only)
 *   2. Section fade-in-on-scroll reveal (paired with JS that adds
 *      the `.silectis-reveal` class to below-the-fold elements only)
 *   3. Button hover lift for the primary CTAs (subtle 1px translate
 *      + shadow appearance)
 * All animations respect prefers-reduced-motion.
 * ================================================================ */

/* Scroll-progress indicator — thin orange bar pinned above the header,
 * scaled horizontally from 0 to 1 by JS as the user scrolls. Always visible
 * (no `prefers-reduced-motion` gating because it's a passive cue, not motion). */
.silectis-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--c-orange);
	z-index: 200;                            /* above .site-header (z-100) */
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	will-change: transform;
}


/* scroll-margin-top keeps anchor jumps from landing underneath the floating
 * header. Useful for any in-page anchor link, not just rail-driven ones. */
.silectis-prose h2 {
	scroll-margin-top: 6rem;
}


@media (prefers-reduced-motion: no-preference) {

	/* Hero entrance — eyebrow → H1 → supporting cascade on page load.
	 * Brand easing curve, 700ms total, ~125ms stagger. Triggered by CSS
	 * only; no JS needed. */
	.silectis-hero .silectis-eyebrow,
	.silectis-hero .silectis-hero__statement,
	.silectis-hero .silectis-hero__supporting {
		opacity: 0;
		transform: translateY(12px);
		animation: silectis-hero-enter 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
	}
	.silectis-hero .silectis-eyebrow         { animation-delay: 0.05s; }
	.silectis-hero .silectis-hero__statement { animation-delay: 0.15s; }
	.silectis-hero .silectis-hero__supporting { animation-delay: 0.30s; }

	@keyframes silectis-hero-enter {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Section fade-in on scroll — the JS adds `.silectis-reveal` only to
	 * elements that are below the initial viewport, so content already
	 * visible on page load doesn't flash. */
	.silectis-reveal {
		opacity: 0;
		transform: translateY(20px);
		transition:
			opacity 0.7s cubic-bezier(0.2, 0.8, 0.4, 1),
			transform 0.7s cubic-bezier(0.2, 0.8, 0.4, 1);
	}
	.silectis-reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Button hover lift — 1px translate + subtle shadow appearance.
	 * Applied to the primary orange-fill buttons. Hover state already
	 * swaps background to navy (defined in pattern rules); this adds
	 * the dimensional cue. */
	.silectis-cta .wp-block-button__link,
	.nav-primary .menu > li.is-cta > a {
		transition:
			background 0.18s ease,
			color 0.18s ease,
			transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1),
			box-shadow 0.18s ease;
	}
	.silectis-cta .wp-block-button__link:hover,
	.nav-primary .menu > li.is-cta > a:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(247, 148, 29, 0.22);
	}
}


/* ================================================================ *
 * Blog — listing + single post
 *
 * The blog uses the standard WP post archive routed through the
 * `/blog/` page (id 228), which renders a hero + `wp:latest-posts` core
 * block listing. Single posts use Genesis's default single template
 * styled here as editorial article pages: 65ch measure, display-sized
 * title, date+author meta line, hidden Genesis breadcrumbs.
 * ================================================================ */

/* --- Listing page (silectis-blog-list — applied to wp:latest-posts) --- */
.silectis-blog-list.wp-block-latest-posts {
	list-style: none;
	margin: 0;
	padding: var(--space-50) 0 var(--space-60);
}
.silectis-blog-list.wp-block-latest-posts > li {
	padding: var(--space-50) 0;
	border-bottom: 1px solid var(--c-warm-grey);
}
.silectis-blog-list.wp-block-latest-posts > li:first-child {
	padding-top: 0;
}
.silectis-blog-list.wp-block-latest-posts > li:last-child {
	border-bottom: 0;
}
.silectis-blog-list .wp-block-latest-posts__post-date {
	display: block;
	font-size: var(--fz-caption);
	font-weight: 500;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	color: var(--c-charcoal);
	opacity: 0.75;
	margin: 0 0 var(--space-20);
}
.silectis-blog-list .wp-block-latest-posts__post-title {
	display: block;
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	color: var(--c-navy);
	text-decoration: none;
	margin: 0 0 var(--space-20);
	max-width: 36ch;
	text-wrap: balance;
}
.silectis-blog-list .wp-block-latest-posts__post-title:hover {
	color: var(--c-orange);
}
.silectis-blog-list .wp-block-latest-posts__post-excerpt {
	font-size: var(--fz-body);
	line-height: var(--lh-body);
	color: var(--c-charcoal);
	max-width: 65ch;
	margin: 0;
}
.silectis-blog-list .wp-block-latest-posts__post-excerpt a.more-link {
	display: inline-block;
	margin-top: var(--space-20);
	color: var(--c-orange);
	font-weight: 500;
	text-decoration: none;
}
.silectis-blog-list .wp-block-latest-posts__post-excerpt a.more-link:hover {
	text-decoration: underline;
}

/* --- Single post — article layout --- */
body.single-post .content {
	max-width: 65ch;
	margin: var(--space-60) auto var(--space-70);
}
body.single-post .breadcrumb {
	display: none;
}
body.single-post .entry-title {
	font-size: var(--fz-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	margin: 0 0 var(--space-30);
	text-wrap: balance;
}
.silectis-post-meta {
	font-size: var(--fz-caption);
	font-weight: 500;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	color: var(--c-charcoal);
	opacity: 0.7;
	margin: 0 0 var(--space-50);
}
body.single-post .entry-content {
	font-size: var(--fz-body);
	line-height: 1.65;
	color: var(--c-charcoal);
}
body.single-post .entry-content > * + * {
	margin-top: var(--space-30);
}
body.single-post .entry-content h2 {
	font-size: var(--fz-title);
	font-weight: 700;
	line-height: var(--lh-title);
	color: var(--c-navy);
	margin-top: var(--space-50);
	margin-bottom: var(--space-20);
}
body.single-post .entry-content h3 {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--c-navy);
	margin-top: var(--space-40);
	margin-bottom: var(--space-20);
}
body.single-post .entry-content p,
body.single-post .entry-content li {
	font-size: var(--fz-body);
	line-height: 1.65;
	color: var(--c-charcoal);
}
body.single-post .entry-content blockquote {
	border-left: 3px solid var(--c-orange);
	padding-left: var(--space-30);
	margin: var(--space-40) 0;
	font-size: var(--fz-lede);
	font-weight: 300;
	line-height: var(--lh-lede);
	color: var(--c-navy);
}

/* --- Single post trailing HubSpot form ---
 * The "Want to learn more about Silectis?" form is embedded in each
 * post's content. Style it as a calm closing block — soft separator
 * above, restrained heading, form inputs that match the brand. */
body.single-post .entry-content #h-want-to-learn-more-about-silectis {
	font-size: var(--fz-lede);
	font-weight: 700;
	color: var(--c-navy);
	margin-top: var(--space-70);
	padding-top: var(--space-50);
	border-top: 1px solid var(--c-warm-grey);
}
.hbspt-form {
	margin-top: var(--space-30);
}
.hbspt-form input[type="text"],
.hbspt-form input[type="email"],
.hbspt-form input[type="tel"] {
	font-family: var(--font-sans);
	font-size: var(--fz-body);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--c-warm-grey);
	background: var(--c-off-white);
	color: var(--c-charcoal);
	width: 100%;
}
.hbspt-form input[type="submit"] {
	background: var(--c-orange);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: var(--track-caption);
	text-transform: uppercase;
	font-size: var(--fz-caption);
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}
.hbspt-form input[type="submit"]:hover {
	background: var(--c-navy);
}
.hbspt-form label {
	font-size: var(--fz-caption);
	font-weight: 500;
	color: var(--c-charcoal);
}


/* ================================================================ *
 * 7. Editor parity
 *
 * Keep block editor rendering close to the front-end. theme.json
 * handles most of this; this block fills the gaps.
 * ================================================================ */

.editor-styles-wrapper {
	background: var(--c-off-white);
	color: var(--c-charcoal);
	font-family: var(--font-sans);
}


/* ---------------------------------------------------------------- *
 * silectis-form — a form section (currently /demo/).
 *
 * The HubSpot embed brings its own markup, so this sets only the frame:
 * section rhythm, a display-scale heading to match the other section
 * openers, and a measure narrow enough that the fields don't run the full
 * page width. Field styling lives with the .hbspt-form rules above.
 * ---------------------------------------------------------------- */
.silectis-form {
	padding: var(--space-60) 0 var(--space-70);
}
.silectis-form h2 {
	font-size: var(--fz-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: var(--track-display);
	color: var(--c-navy);
	margin-bottom: var(--space-40);
}
/* WP's constrained layout caps children at content-size and centres them with
 * auto margins, which pushed the heading 34px right of the page gutter and the
 * form 361px right of the heading. Two classes to out-specify its :where() rule. */
.silectis-form > h2,
.silectis-form > .hbspt-form {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.silectis-form > .hbspt-form {
	max-width: 34rem;
}