/*
 * randolph — patterns.css
 *
 * Port of tg-theme/assets/css/patterns.css → rc- prefix.
 * Sections retained: only those the engine + 12 Randolph sections need.
 * Sections dropped: Birch-specific (parallax, article-card/insights, audience-grid,
 *   pillar-cards, anchor-band, pain-grid, about-split — Randolph's wave 2 partials
 *   will add their own section rules in the rc- namespace as needed).
 * Sections added: rc-band, rc-hero base, rc-eyebrow, nav/header, footer,
 *   form field styles, buttons, scroll-reveal, reduced-motion.
 *
 * Design token rule: NEVER use a raw hex or px where a CSS custom property exists.
 * Color  — var(--wp--preset--color--{slug})
 * Font   — var(--wp--preset--font-family--{slug})
 * Size   — var(--wp--preset--font-size--{slug})
 * Custom — var(--wp--custom--radius--{slug})
 *          var(--wp--custom--elevation--{slug})
 *          var(--wp--custom--focus-ring)
 *
 * Config version: 0.1.0
 */

/* ==========================================================================
   RENDER FIX — type scale custom properties on :root
   (WP 7.0 did not emit --wp--preset--font-size--* vars; define from theme.json
   fontSizes so every var(--wp--preset--font-size--*) reference resolves.)
   Values mirror theme.json exactly.
   ========================================================================== */
:root {
	--wp--preset--font-size--xs:   12px;
	--wp--preset--font-size--sm:   13.5px;
	--wp--preset--font-size--base: clamp(16px, 1.1vw, 18px);
	--wp--preset--font-size--lg:   20px;
	--wp--preset--font-size--xl:   clamp(23px, 2.7vw, 30px);
	--wp--preset--font-size--2xl:  clamp(31px, 4.2vw, 52px);
	--wp--preset--font-size--hero: clamp(44px, 6.6vw, 84px);

	/* Font-family vars — WP 7.0 render-fix parity with theme.json fontFamilies. */
	--wp--preset--font-family--fraunces:      'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--wp--preset--font-family--ibm-plex-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	--wp--preset--font-family--archivo:       'Archivo', 'Segoe UI', system-ui, sans-serif;

	/* Editorial layer tokens (patterns.css owns these; not in theme.json custom). */
	--rc-optical: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
	--rc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   EDITORIAL TYPOGRAPHY OVERRIDE
   Section partials hardcode font-family:archivo INLINE on headings, and inline
   styles beat a stylesheet rule. To move display headings to Fraunces (the
   editorial pivot) without renaming any ACF field or touching renderer logic,
   these class-scoped rules use !important to win over the partial inline style.
   Fraunces = display. Archivo stays on eyebrows/labels. IBM Plex Sans = body/UI.
   ========================================================================== */

.rc-hero__heading,
.rc-section-heading,
.rc-statement h2,
.rc-service-detail h2,
.rc-testimonial h2,
.rc-media-feature h2,
.rc-award-band h2,
.rc-cta h2,
.rc-logo-wall h2,
.rc-outcomes-list h2,
.rc-client-list h2,
.rc-contact-block h2 {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-weight: 480 !important;
	font-variation-settings: 'opsz' 44 !important;
	letter-spacing: -0.015em !important;
	font-feature-settings: 'ss01' 1;
}

.rc-hero__heading {
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	line-height: 0.98 !important;
	font-variation-settings: 'opsz' 72 !important;
}

/* Card / sub-headings that use archivo inline → Fraunces at a smaller optical size. */
.rc-service-card h3,
.rc-testimonial__card figcaption {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-weight: 540 !important;
	font-variation-settings: 'opsz' 20 !important;
	letter-spacing: -0.005em !important;
}

/* Prose measure + rhythm refinements applied globally to body copy. */
.rc-prose p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ==========================================================================
   GLOBAL HELPERS
   ========================================================================== */

.rc-band {
	width: 100%;
	box-sizing: border-box; /* prevents content-box + 100% + padding overflow */
	padding-block: clamp(52px, 6vw, 84px);
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

.rc-band__inner {
	max-width: 1120px;
	margin-inline: auto;
}

.rc-band__header--center {
	text-align: center;
}

.rc-lead {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--slate);
	margin-top: 16px;
	max-width: 64ch;
}

.rc-lead--center {
	margin-inline: auto;
	text-align: center;
}

.rc-band__header--center .rc-lead {
	margin-inline: auto;
}

/* ==========================================================================
   EYEBROW LABEL
   ========================================================================== */

.rc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Leading hairline tick — a broadcast-lower-third cue. */
.rc-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background-color: currentColor;
	flex: none;
}

.rc-eyebrow--center {
	display: flex;
	justify-content: center;
	text-align: center;
}

/* On dark/navy backgrounds — bright logo cyan (AA 7.38 on ink navy). */
.rc-eyebrow--soft {
	color: var(--wp--preset--color--accent-bright);
}

.rc-eyebrow--on-fill {
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   NAVIGATION (header)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* FIX B: dark navy header — lockup is grey/cyan, unreadable on white */
	background-color: var(--wp--preset--color--ink-deep);
	backdrop-filter: saturate(1.2) blur(14px);
	-webkit-backdrop-filter: saturate(1.2) blur(14px);
	border-bottom: 1px solid rgba(232, 223, 217, 0.10);
	transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
	overflow: visible; /* never clip the logo */
}

/* FIX 3 — Hide header once user scrolls past 50% of scrollable height.
   Set by nav.js (.site-header--hidden). Slides out upward; pointer-events
   disabled so it cannot intercept clicks while off-screen. */
.site-header--hidden {
	transform: translateY(-100%);
	pointer-events: none;
}

/* Elevated state — set by nav.js once the page scrolls past the fold. */
.site-header.is-scrolled {
	background-color: var(--wp--preset--color--ink-deep);
	box-shadow: 0 1px 0 rgba(232, 223, 217, 0.10), 0 14px 30px rgba(0, 0, 0, 0.22);
	border-bottom-color: transparent;
}

/* display:contents removes the template-part wrapper box so .site-header sticks
   against the full-height page container (.wp-site-blocks). */
header.wp-block-template-part {
	display: contents;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 20px; /* eased 24→20px to match the 205px lockup */
	padding-inline: clamp(20px, 4vw, 48px);
	max-width: 1320px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

/* Wordmark — the lockup is emblem + readable text. The wordmark is visible,
   set in Fraunces, ink navy for AA contrast on the light header, vertically
   centred against the emblem. It stays a non-heading (site-title level:0),
   so it does not reintroduce a second <h1>. */
.site-header__wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.05;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

.site-header__wordmark a,
.site-header__wordmark {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.site-header__wordmark a:hover,
.site-header__wordmark a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Site-logo sizing — the custom_logo is now the CLEAN full emblem
   (assets/logo/rc-emblem.png, ~1709x1774, near-square lens mark) with no
   surrounding whitespace. So NO clip window and NO oversized-image offset:
   the whole emblem shows, sized by height so it reads at a generous,
   readable header scale (~60px tall) beside the wordmark. The previous
   overflow:hidden crop window (tuned for the old 4000x3000 PNG) is removed
   deliberately — do not reintroduce it. */
.site-header__brand .wp-block-site-logo,
.rc-brand__lockup.wp-block-site-logo {
	margin: 0;
	display: block;
	width: auto;
	height: 205px;     /* scaled back 230→205px */
	overflow: visible; /* show the whole lockup, never crop it */
	flex: none;
}

.site-header__brand .wp-block-site-logo a,
.rc-brand__lockup a { display: block; line-height: 0; }

/* Full lockup, uncropped: height drives the scale, width follows aspect (1873×2189 → ~0.856 ratio). */
.site-header__brand .wp-block-site-logo img,
.rc-brand__lockup img {
	width: auto;
	height: 205px;     /* matches wrapper — scaled back 230→205px */
	max-width: none;
	display: block;
	margin: 0;
	object-fit: contain;
}

@media (max-width: 560px) {
	/* Mobile: full lockup at 120px tall so banner remains legible on small screens. */
	.site-header__brand .wp-block-site-logo,
	.rc-brand__lockup.wp-block-site-logo { width: auto; height: 120px; } /* scaled back 130→120px */
	.site-header__brand .wp-block-site-logo img,
	.rc-brand__lockup img { width: auto; height: 120px; margin: 0; }
}

@media (max-width: 380px) {
	/* Very tight widths: wordmark alone reads better than a cramped lockup. */
	.site-header__wordmark { font-size: 16px; }
}

/* ==========================================================================
   FIX 1 — DEFENSIVE GLOBAL: logo image anti-regression
   Ensures logo images are never clipped or aspect-distorted by an ancestor or
   WP block default. Each location's specific rule sets the explicit height;
   this global provides object-fit:contain + max-width:none as a floor.
   height:auto is applied only to .rc-intro__emblem (splash) and .custom-logo
   because those are width-driven; the header/footer site-logo img heights are
   set explicitly in their respective rules above and must not be overridden.
   overflow:visible on wrappers prevents any ancestor clip.
   ========================================================================== */
.custom-logo,
.rc-intro__emblem {
	object-fit: contain;
	height: auto;
	max-width: none;
}
.wp-block-site-logo img {
	object-fit: contain;
	max-width: none;
	/* height is NOT set here — each location (header/footer) sets it explicitly. */
}
.wp-block-site-logo,
.site-header__brand,
.site-footer__logo {
	overflow: visible;
}

/* ==========================================================================
   FIX 2 — HEADER CTA "CONTACT": white label on teal pill
   Live computed: A.wp-block-navigation-item__content inside .site-header__cta
   resolves to color:rgb(16,38,58) (dark ink) — a WP Navigation block default
   overriding the earlier rule via inline or block styles. This !important rule
   targets the link directly inside the CTA wrapper and wins regardless of
   WP-emitted specificity. AA: white on #0C7299 ≈ 5.2:1 ✓
   ========================================================================== */
.site-header__cta a,
.site-header__cta .wp-block-navigation-item__content {
	color: #ffffff !important;
}
.site-header__cta a:hover,
.site-header__cta a:focus-visible,
.site-header__cta .wp-block-navigation-item__content:hover,
.site-header__cta .wp-block-navigation-item__content:focus-visible {
	color: #ffffff !important;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 34px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nav links within the WordPress Navigation block.
   FIX B: dark header — links are white for AA legibility on ink-deep (#0B1C2C).
   white on #0B1C2C ≈ 17.5:1 ✓ */
.site-header__nav .wp-block-navigation__container,
.site-header__nav .wp-block-navigation-item__content {
	color: #ffffff;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1px;
	text-decoration: none;
}

/* Cyan underline-grow on hover (skip the CTA pill). */
.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content {
	position: relative;
	padding-block: 6px;
}

.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent-bright);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content:hover::after,
.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-bright);
}

/* CTA — cyan pill */
.site-header__nav .site-header__cta .wp-block-navigation-item__content,
.wp-block-navigation-item.site-header__cta .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: 0.2px;
	padding: 11px 22px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 6px 16px rgba(12, 114, 153, 0.22);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.site-header__nav .site-header__cta .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.site-header__cta .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--primary-light);
	box-shadow: 0 10px 22px rgba(12, 114, 153, 0.28);
	transform: translateY(-1px);
}

/* Core overlay menu button — FIX B: white on dark header */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close { color: #ffffff; }

/* ==========================================================================
   MOBILE NAV OVERLAY
   Full-screen dark-ink panel matching the header aesthetic.
   ========================================================================== */

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	height: 100vh !important;
	height: 100dvh !important;
	width: 100vw !important;
	background-color: var(--wp--preset--color--ink, #10263A) !important;
	padding: 0;
	overflow-y: auto;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin: 0;
	padding: 88px 28px 40px;
	min-height: 100%;
	box-sizing: border-box;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content {
	color: #fff !important;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg, 1.25rem) !important;
	font-weight: 600;
	padding: 15px 0 !important;
	display: block;
	width: 100%;
	border-bottom: 1px solid rgba(232, 223, 217, 0.12);
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__cta {
	margin-top: 22px;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__cta .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
	padding: 14px 16px;
	font-size: var(--wp--preset--font-size--sm) !important;
	color: #fff !important;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff !important;
	top: 26px;
	right: 22px;
	width: 44px;
	height: 44px;
}

/* ==========================================================================
   HERO (base)
   Full section-specific styles live in inc/sections/hero.php inline styles
   per gotcha H (100% inline). This provides the ::before/::after hooks for
   the hero image injection (gotcha B — background-color longhand only).
   ========================================================================== */

/* --------------------------------------------------------------------------
   EDITORIAL SPLIT HERO
   Text left on paper, sharp bright portrait right. NO dark blur on her face.
   The legacy full-bleed dark-image hero (body.rc-has-hero-image .rc-hero::before)
   is retired; the ACF hero-background field stays wired but this split ignores it.
   -------------------------------------------------------------------------- */

.rc-hero-split {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/* Far-left cool wash — a faint navy-to-transparent gradient for depth. */
.rc-hero-split__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(120% 90% at 0% 0%, rgba(12, 114, 153, 0.06) 0%, rgba(12, 114, 153, 0) 46%),
		linear-gradient(180deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--cloud) 100%);
	pointer-events: none;
}

.rc-hero-split__inner {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(32px, 5vw, 88px);
}

.rc-hero-split--home .rc-hero-split__inner { padding-block: clamp(56px, 7vw, 104px); }
.rc-hero-split--compact .rc-hero-split__inner { padding-block: clamp(46px, 5.5vw, 80px); }

.rc-hero-split__text {
	max-width: 640px;
}

.rc-hero__heading {
	font-size: clamp(48px, 7vw, 92px);
	line-height: 0.96;
	letter-spacing: -0.02em;
	margin-bottom: 0;
}

/* The RED dress is the warm focal accent — the accent word picks up cyan so the
   two brand notes sit together; the portrait supplies the red. */
.rc-hero__accent {
	color: var(--wp--preset--color--primary);
	font-style: italic;
	font-variation-settings: 'opsz' 72, 'WONK' 1;
}

.rc-hero-split__sub {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	color: var(--wp--preset--color--ink-soft);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.6;
	margin-top: 22px;
	max-width: 48ch;
}

.rc-hero-split__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 26px;
	align-items: center;
	margin-top: 34px;
}

.rc-hero-split__cta-primary {
	background-color: var(--wp--preset--color--primary);
	/* Explicit white — guarded with !important against WP block colour inheritance. */
	color: #ffffff !important;
	border-color: var(--wp--preset--color--primary);
	gap: 10px;
	padding: 16px 28px;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: 0 14px 30px rgba(12, 114, 153, 0.24);
}

.rc-hero-split__cta-primary:hover {
	background-color: var(--wp--preset--color--primary-light);
	border-color: var(--wp--preset--color--primary-light);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(12, 114, 153, 0.3);
}

.rc-btn__arrow { transition: transform 0.2s ease; }
.rc-hero-split__cta-primary:hover .rc-btn__arrow { transform: translateX(3px); }

.rc-hero-split__cta-secondary {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.rc-hero-split__cta-secondary:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary-light);
}

/* ==========================================================================
   CREDIBILITY STRIP (below hero, home variant)
   Slim credential row on ink navy, Archivo labels, cyan stat accents,
   thin dividers. Adds substance directly under the hero.
   ========================================================================== */
.rc-cred-strip {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.rc-cred-strip__inner {
	/* Full viewport width so justify-content:center genuinely centres across
	   the whole screen, not within a narrower constrained box. The padding-inline
	   prevents items from touching the edge on very wide viewports. */
	width: 100%;
	box-sizing: border-box;
	max-width: none;
	margin: 0;
	padding-block: 22px;
	padding-inline: clamp(20px, 4vw, 48px);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centres the row AND each wrapped row */
	align-items: center;
	align-content: center;   /* wrapped rows also stay centred, not left-clustered */
	gap: clamp(28px, 4vw, 60px);
}

.rc-cred-strip__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	text-align: center;
	align-items: center;
}

/* Thin vertical divider sits in the gap before each item after the first. */
.rc-cred-strip__item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(14px, 2vw, 30px));
	top: 2px;
	bottom: 2px;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.16);
}

.rc-cred-strip__stat {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.1;
	color: var(--wp--preset--color--accent-bright); /* 7.4:1 on ink navy — AAA; solid sans strokes for legibility */
	letter-spacing: -0.005em;
}

.rc-cred-strip__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72); /* AA on ink navy */
}

@media (max-width: 720px) {
	/* Two per row, centred; divider between the pair only.
	   max-width removed — width:100% + justify-content:center centres genuinely. */
	.rc-cred-strip__inner { gap: 22px 40px; }
	.rc-cred-strip__item { flex-basis: calc(50% - 40px); }
	.rc-cred-strip__item:not(:first-child)::before { left: -20px; }
	.rc-cred-strip__item:nth-child(odd)::before { display: none; }
}

@media (max-width: 460px) {
	/* Stacked, centred, hairline separators. */
	.rc-cred-strip__inner { flex-direction: column; gap: 0; max-width: 320px; margin-inline: auto; }
	.rc-cred-strip__item { flex-basis: auto; width: 100%; padding-block: 14px; }
	.rc-cred-strip__item::before { display: none !important; }
	.rc-cred-strip__item + .rc-cred-strip__item {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Portrait — refined offset frame + soft shadow (one device: the cyan block). */
.rc-hero-split__media {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 480px;
}

.rc-hero-split__frame {
	position: absolute;
	inset: 22px -22px -22px 22px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--xl);
	z-index: 0;
	pointer-events: none;
}

.rc-hero-split__portrait {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	aspect-ratio: 1180 / 1500;
	background-color: var(--wp--preset--color--cloud);
	box-shadow: var(--wp--custom--elevation--lg);
}

.rc-hero-split__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	display: block;
}

/* Broadcast-style location tag pinned to the portrait. */
.rc-hero-split__tag {
	position: absolute;
	z-index: 2;
	left: -14px;
	bottom: 30px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background-color: var(--wp--preset--color--ink);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 11px 18px;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--elevation--md);
}

.rc-hero-split__tag-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-bright);
	box-shadow: 0 0 0 4px rgba(79, 192, 232, 0.25);
}

@media (max-width: 900px) {
	.rc-hero-split__inner {
		grid-template-columns: 1fr;
		gap: 44px;
		text-align: left;
	}
	.rc-hero-split__text { max-width: 640px; }
	.rc-hero-split__media {
		justify-self: start;
		max-width: 360px;
		margin-left: 14px;
	}
	.rc-hero-split__frame { inset: 16px -16px -16px 16px; }
}

@media (max-width: 480px) {
	.rc-hero-split__media { max-width: 300px; }
	.rc-hero-split__tag { left: -8px; font-size: 10.5px; padding: 9px 14px; }
}

/* Session 3 (owner 2026-08-18): on mobile the home hero photo + locator pill and
   the "What Shawna can do for you" statement heading were left-aligned while the
   credibility strip between them is centred. Centre them to match. Home only, and
   .home-scoped so specificity beats the left-aligning rules above. */
@media (max-width: 900px) {
	.home .rc-hero-split__media { justify-self: center; margin-left: 0; }
	.home .rc-hero-split__tag { left: 0; right: 0; margin-inline: auto; width: -moz-fit-content; width: fit-content; white-space: nowrap; transform: none; }
	.home .rc-statement__lede { text-align: center; }
	.home .rc-statement__lede .rc-section-heading { margin-inline: auto; }
}

/* Session 3 (owner 2026-08-18): the About hero uses the wide "cropped SR-123"
   crop; the global 50% object-position framed Shawna left-of-centre. Nudge the
   horizontal focal point so she is centred in the portrait. About page only
   (page-id-8) so the Home SR-109 portrait keeps its 50% 18% framing. */
.page-id-8 .rc-hero-split__portrait img { object-position: 38% 18%; }

/* --------------------------------------------------------------------------
   HERO STAGGERED LOAD — CSS-only, reduced-motion safe.
   eyebrow -> headline -> subhead -> CTA -> portrait.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.rc-hero-stagger {
		opacity: 0;
		transform: translateY(16px);
		animation: rc-hero-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.rc-hero-split__media.rc-hero-stagger {
		transform: translateY(20px) scale(0.985);
		animation-name: rc-hero-rise-media;
	}
	.rc-hero-stagger--1 { animation-delay: 0.05s; }
	.rc-hero-stagger--2 { animation-delay: 0.16s; }
	.rc-hero-stagger--3 { animation-delay: 0.30s; }
	.rc-hero-stagger--4 { animation-delay: 0.42s; }
	.rc-hero-stagger--5 { animation-delay: 0.22s; }

	@keyframes rc-hero-rise {
		to { opacity: 1; transform: translateY(0); }
	}
	@keyframes rc-hero-rise-media {
		to { opacity: 1; transform: translateY(0) scale(1); }
	}
}

/* ==========================================================================
   FORM FIELD STYLES
   Full base styles in style.css (.rc-field__input / .rc-field__textarea).
   Label and layout rules here for the contact form.
   ========================================================================== */

.rc-field {
	margin-bottom: 20px;
}

.rc-field__label {
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}

.rc-field__req {
	color: var(--wp--preset--color--danger);
	margin-left: 2px;
}

.rc-field__opt {
	color: var(--wp--preset--color--slate);
	font-weight: 400;
	margin-left: 4px;
}

.rc-field__help {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	margin-top: 4px;
	margin-bottom: 6px;
}

.rc-contact-form__heading {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 24px;
}

.rc-contact-form__status {
	min-height: 24px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--wp--preset--color--success);
}

.rc-contact-form__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	margin-top: 16px;
	line-height: 1.5;
}

.rc-contact-form__recaptcha-notice {
	font-size: 11.5px;
	color: var(--wp--preset--color--slate);
	margin-top: 10px;
	line-height: 1.5;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--slate-light);
	position: relative;
}

/* Cyan hairline seam at the top of the footer. */
.site-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent-bright) 100%);
}

/* FIX 1 — Footer: top row (logo | info) + nav underneath.
   Replaces the old .site-footer__inner two-column grid.
   .site-footer__top: flex row, logo left, info right-aligned.
   .site-footer__nav: full-width row directly below .site-footer__top. */
.site-footer__top {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	padding-block: clamp(48px, 6vw, 76px) clamp(28px, 3vw, 40px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px 48px;
	width: 100%;
	box-sizing: border-box;
}

.site-footer__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: right;
}

.site-footer__info .site-footer__nap {
	align-items: flex-end;
}

/* FIX 1 — Narrow: stack logo then info (left-aligned), then nav. */
@media (max-width: 760px) {
	.site-footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-block: clamp(36px, 5vw, 52px) 24px;
	}
	.site-footer__info {
		text-align: left;
	}
	.site-footer__info .site-footer__nap {
		align-items: flex-start;
	}
}

/* Keep old .site-footer__brand selector as a no-op tombstone in case it is
   referenced anywhere; the DOM no longer uses this element. */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 42ch;
}

.site-footer__logo {
	/* FIX C: white knockout plate REMOVED — transparent lockup sits directly on the dark footer */
	display: inline-flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	/* background-color, padding, border-radius, box-shadow: all removed */
	width: fit-content;
}

/* Footer logo — full lockup transparent over dark footer; no plate, no crop.
   190px so emblem + banner both read clearly on ink-deep. */
.site-footer__logo .wp-block-site-logo,
.site-footer__logo-img {
	display: block;
	width: auto;
	height: 190px;
	overflow: visible;
	margin: 0;
	flex: none;
}
.site-footer__logo .wp-block-site-logo a,
.site-footer__logo-img a { display: block; line-height: 0; }

.site-footer__logo .wp-block-site-logo img,
.site-footer__logo-img img {
	width: auto;
	height: 190px;
	max-width: none;
	display: block;
	margin: 0;
	object-fit: contain;
}

/* The logo carries the wordmark — hide the redundant text title. */
.site-footer__wordmark {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

.site-footer__tagline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 460;
	font-size: clamp(21px, 2.4vw, 28px);
	font-style: italic;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0;
	font-variation-settings: 'opsz' 28, 'WONK' 1;
}

.site-footer__nap {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--slate-light);
	line-height: 1.6;
}

.site-footer__nap-name {
	color: #fff;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.site-footer__nap-contact {
	color: var(--wp--preset--color--accent-bright);
	text-decoration: none;
	margin-top: 6px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
}

.site-footer__nap-contact:hover {
	color: #fff;
}

.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row; /* horizontal — was column; wrap allows narrow viewports */
	flex-wrap: wrap;
	gap: 10px 24px;
}

.site-footer__nav a {
	color: var(--wp--preset--color--slate-light);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--sm);
	transition: color 0.15s ease;
}

.site-footer__nav a:hover {
	color: #ffffff;
}

/* .site-footer__col-right — removed from DOM (FIX 1). Tombstone only. */
.site-footer__col-right { display: none; }

.site-footer__legal {
	background: rgba(0, 0, 0, 0.28);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer__copy {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate-light);
	margin: 0;
	padding-block: 20px;
	padding-inline: clamp(20px, 4vw, 48px);
	max-width: 1220px;
	margin-inline: auto;
	letter-spacing: 0.01em;
}

/* FIX 1 — Footer nav: full-width row underneath .site-footer__top.
   FIX 2 — Nav links are white (#ffffff) at rest; cyan on hover. */
.site-footer__nav,
.site-footer__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	padding-block: clamp(20px, 2.5vw, 30px);
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* FIX 2 — Resting state: white. Hover: cyan. */
.site-footer__nav a,
.site-footer__nav .wp-block-navigation-item__content {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__nav .wp-block-navigation-item__content:hover,
.site-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-bright) !important;
}

/* ==========================================================================
   BELT-AND-SUSPENDERS HEADING SIZES
   (in case element style loses the var)
   ========================================================================== */

.rc-section-heading { font-size: clamp(31px, 4.2vw, 52px); line-height: 1.04; }

/* ==========================================================================
   BRAND LOCKUP (header logo)
   ========================================================================== */

.rc-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	line-height: 1;
}

.rc-brand:focus-visible {
	outline: 3px solid rgba(166, 94, 79, 0.55);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

.rc-brand__lockup {
	display: block;
	height: auto;
	flex: none;
}

/* ==========================================================================
   TEXT LINK
   ========================================================================== */

.rc-text-link {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-size: 15px;
}

.rc-text-link:hover {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   PORTRAIT / CARD IMAGE
   ========================================================================== */

.rc-portrait {
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	box-shadow: var(--wp--custom--elevation--lg);
	aspect-ratio: 4 / 5;
}

.rc-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* ==========================================================================
   SCROLL REVEAL (prefers-reduced-motion: no-preference only)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Hidden state is gated behind html.rc-js — JS adds that class immediately.
	   With JS off / before JS runs / on failed JS, content is fully visible. */
	html.rc-js .rc-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.28s ease, transform 0.28s ease;
	}

	html.rc-js .rc-reveal.rc-revealed {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   VIDEO FACADE (media_feature section)
   Zero-CLS 16:9 aspect ratio wrapper.
   button and iframe states live here; facade poster in wave 2 partial.
   ========================================================================== */

.rc-video-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.rc-video-facade__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rc-video-facade__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 100%;
	height: 100%;
}

.rc-video-facade__play-icon {
	width: 72px;
	height: 72px;
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, transform 0.15s ease;
	box-shadow: var(--wp--custom--elevation--md);
}

.rc-video-facade__play:hover .rc-video-facade__play-icon,
.rc-video-facade__play:focus-visible .rc-video-facade__play-icon {
	background-color: var(--wp--preset--color--primary-light);
	transform: scale(1.08);
}

.rc-video-facade__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rc-video-facade__play-icon {
		transition: none;
	}
	.rc-video-facade__play:hover .rc-video-facade__play-icon,
	.rc-video-facade__play:focus-visible .rc-video-facade__play-icon {
		transform: none;
	}
}

.rc-video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ==========================================================================
   REDUCED MOTION OVERRIDES (global)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 860px) {
	.rc-band {
		padding-block: clamp(38px, 5vw, 68px);
	}
}

/* ==========================================================================
   WAVE 2 — SECTION-SPECIFIC RULES
   (appended; wave 1 rules above are unchanged)
   ========================================================================== */

/* ==========================================================================
   LOGO WALL — grid + grayscale wrapper
   Grayscale is applied via the filter on .rc-logo-wall__grid (not per-img)
   to honour the filter-on-container rule (gotcha B).
   The inline style on the wrapper sets the actual filter value.
   This rule provides the grid skeleton.
   ========================================================================== */

.rc-logo-wall__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 28px 36px;
	align-items: center;
}

@media (max-width: 560px) {
	.rc-logo-wall__grid {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: 20px 24px;
	}
}

/* ==========================================================================
   TESTIMONIAL — grid
   ========================================================================== */

.rc-testimonial__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

@media (max-width: 560px) {
	.rc-testimonial__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   OUTCOMES LIST — columns grid
   ========================================================================== */

.rc-outcomes-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px 28px;
	padding: 0;
	list-style: none;
}

@media (max-width: 560px) {
	.rc-outcomes-list__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   AWARD BAND — flex row responsive
   ========================================================================== */

@media (max-width: 660px) {
	.rc-award-band .rc-band__inner {
		flex-direction: column;
		gap: 28px;
	}
}

/* ==========================================================================
   SERVICE DETAIL — card grid
   ========================================================================== */

.rc-service-detail__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

@media (max-width: 560px) {
	.rc-service-detail__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   CLIENT LIST — responsive columns
   ========================================================================== */

.rc-client-list__grid {
	display: grid;
	gap: 32px 40px;
}

@media (max-width: 660px) {
	.rc-client-list__grid {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   MEDIA FEATURE — responsive two-column to one-column
   (also handled inline; this provides the cascade fallback)
   ========================================================================== */

@media (max-width: 760px) {
	.rc-media-feature .rc-band__inner {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   WAVE 3 — EDITORIAL CRAFT LAYER
   Premium refinement over the wave-1/2 partials. Class-scoped; where a partial
   sets an inline style that must be overridden, !important is used narrowly.
   No ACF field renamed; no renderer logic touched.
   ========================================================================== */

/* --- Section eyebrow rhythm: consistent gap under kickers ---------------- */
.rc-statement .rc-eyebrow,
.rc-service-detail .rc-eyebrow,
.rc-outcomes-list .rc-eyebrow,
.rc-logo-wall .rc-eyebrow,
.rc-media-feature .rc-eyebrow {
	margin-bottom: 4px;
}

.rc-media-feature__text h2 { margin-top: 16px !important; }

/* --- Body-prose editorial polish: dropped links, lists, blockquotes ------ */
.rc-prose a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(12, 114, 153, 0.35);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.rc-prose a:hover {
	color: var(--wp--preset--color--primary-light);
	text-decoration-color: var(--wp--preset--color--primary-light);
}
.rc-prose strong { color: var(--wp--preset--color--ink); font-weight: 640; }

/* --- STATEMENT: offset editorial two-column (sticky lede + measured body) - */
.rc-statement__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(28px, 5vw, 76px);
	align-items: start;
}
.rc-statement__lede { position: relative; }
.rc-statement__lede .rc-section-heading { max-width: 15ch; }
.rc-statement__body { max-width: 62ch; }
/* First paragraph as a lede: larger, inked. */
.rc-statement__body > p:first-of-type {
	font-size: 1.08em;
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}
@media (max-width: 820px) {
	.rc-statement__grid { grid-template-columns: 1fr; gap: 26px; }
	.rc-statement__lede .rc-section-heading { max-width: none; }
}

/* --- SERVICE DETAIL: "Why Shawna" split + numbered cards ------------------ */
.rc-service-detail__split {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	gap: clamp(30px, 5vw, 72px);
	align-items: center;
}
.rc-service-detail__media {
	position: relative;
	margin: 0;
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--wp--custom--elevation--lg);
	isolation: isolate;
}
.rc-service-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 30%;
	display: block;
	transform: scale(1.02);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-service-detail--split:hover .rc-service-detail__media img { transform: scale(1.06); }
.rc-service-detail__media-cap {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: rgba(11, 28, 44, 0.62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 8px 13px;
	border-radius: var(--wp--custom--radius--pill);
}
@media (max-width: 820px) {
	.rc-service-detail__split { grid-template-columns: 1fr; gap: 30px; }
}

.rc-service-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rc-service-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary-soft) !important;
	box-shadow: var(--wp--custom--elevation--md) !important;
}
.rc-service-card__num {
	display: block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 480;
	font-size: 30px;
	font-variation-settings: 'opsz' 30;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	margin-bottom: 16px;
	letter-spacing: -0.01em;
}
/* Retire the old top hairline bar on cards in favour of the numeral. */
.rc-service-card > div[aria-hidden="true"]:first-child { display: none; }

/* --- TESTIMONIAL: editorial pull-quote ----------------------------------- */
.rc-testimonial__single { position: relative; padding-top: 8px; }
.rc-testimonial__mark {
	display: block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 500;
	font-size: clamp(88px, 12vw, 150px);
	line-height: 0.7;
	color: var(--wp--preset--color--primary-soft);
	margin-bottom: -0.18em;
	user-select: none;
}
.rc-testimonial__pull-text {
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-weight: 420;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-variation-settings: 'opsz' 40;
	text-wrap: balance;
}
.rc-testimonial__attr {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-top: 30px;
}
.rc-testimonial__attr-rule {
	width: 40px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	flex: none;
}
/* Grid testimonial cards */
.rc-testimonial__card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rc-testimonial__card:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--elevation--md) !important; }

/* --- MEDIA FEATURE: navy frame + bright-cyan play + caption --------------- */
.rc-media-feature__frame {
	position: relative;
	padding: 14px;
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--elevation--lg);
}
.rc-media-feature__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: var(--rc-grain);
	opacity: 0.06;
	mix-blend-mode: screen;
	pointer-events: none;
}
.rc-media-feature__frame .rc-video-facade {
	border-radius: var(--wp--custom--radius--md) !important;
}
.rc-media-feature__frame .rc-video-facade__play-icon {
	background-color: var(--wp--preset--color--accent-bright) !important;
	box-shadow: 0 10px 26px rgba(79, 192, 232, 0.4) !important;
}
.rc-media-feature__frame .rc-video-facade__play-icon svg path { fill: var(--wp--preset--color--ink); }
.rc-media-feature__caption {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-light);
	margin-top: 14px;
}

/* --- AWARD BAND: credential row ------------------------------------------- */
.rc-award-band .rc-band__inner {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--xl);
	padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
	box-shadow: var(--wp--custom--elevation--sm);
	position: relative;
	overflow: hidden;
}
.rc-award-band .rc-band__inner::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background-color: var(--wp--preset--color--primary);
}
.rc-award-band__eyebrow { margin-bottom: 2px; }
.rc-award-band__text { padding-left: 8px; }
.rc-award-band img {
	filter: drop-shadow(0 8px 20px rgba(16, 38, 58, 0.14));
}

/* --- CTA: rich navy band ------------------------------------------------- */
.rc-cta--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient(80% 120% at 50% -10%, rgba(79, 192, 232, 0.14) 0%, rgba(79, 192, 232, 0) 55%),
		var(--rc-grain);
	background-size: cover, 160px 160px;
	opacity: 1;
	pointer-events: none;
}
.rc-cta--dark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: clamp(72px, 8vw, 128px);
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	background-color: var(--wp--preset--color--accent-bright);
	z-index: 1;
	display: none;
}
.rc-cta__eyebrow { margin-bottom: 22px; }

/* FIX: CTA eyebrow — dark navy on the steel-blue (--primary, #0C7299) band.
   The base .rc-eyebrow uses --primary (teal) and .rc-eyebrow--soft uses
   --accent-bright (#4FC0E8, light cyan) — both same cyan family, washes out.
   This 2-class selector + !important wins over both. The ::before hairline
   dash uses background-color:currentColor so it inherits automatically.
   Contrast: #0B1C2C on #0C7299 ≈ 3.3:1 (hue contrast is strong; noted below
   limit for WCAG AA 4.5:1 at this small text size — owner-acknowledged).
   Scope: .rc-cta only — no other section eyebrows are affected. */
.rc-cta .rc-cta__eyebrow {
	color: var(--wp--preset--color--ink-deep) !important;
}

.rc-cta h2 {
	font-size: clamp(32px, 4.4vw, 56px) !important;
	line-height: 1.02 !important;
	max-width: 18ch;
	margin-left: auto !important;
	margin-right: auto !important;
}
.rc-cta--dark .rc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.28); }

/* --- LOGO WALL: grayscale grid, hover to colour -------------------------- */
.rc-logo-wall__grid { filter: none !important; }
.rc-logo-wall__item img {
	filter: grayscale(100%) opacity(0.55) contrast(1.05);
	transition: filter 0.3s ease, transform 0.3s ease;
}
.rc-logo-wall__item:hover img {
	filter: grayscale(0%) opacity(1) contrast(1);
	transform: translateY(-2px);
}

/* --- OUTCOMES: designed check rows + optional stat treatment -------------- */
.rc-outcomes-list__grid li {
	transition: border-color 0.2s ease;
}
.rc-outcomes-list__grid li:hover { border-bottom-color: var(--wp--preset--color--primary) !important; }

/* Numeric stat treatment: any digit-leading outcome (e.g. "28 years ...")
   gets a larger Fraunces first token via a utility span the editor can add.
   Non-destructive: only applies if .rc-stat is present. */
.rc-stat__num {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 480;
	font-size: 1.55em;
	color: var(--wp--preset--color--primary);
	font-variation-settings: 'opsz' 40;
	letter-spacing: -0.01em;
	margin-right: 2px;
}

/* --- CLIENT LIST: refined group headings --------------------------------- */
.rc-client-list__group h3 {
	border-bottom-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--ink) !important;
}
.rc-client-list__group li {
	position: relative;
	padding-left: 16px;
}
.rc-client-list__group li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-soft);
}

/* --- CONTACT BLOCK: elevated form card + accented details ----------------- */
.rc-contact-form-col {
	border-color: var(--wp--preset--color--hairline) !important;
	box-shadow: var(--wp--custom--elevation--md) !important;
	border-radius: var(--wp--custom--radius--xl) !important;
	position: relative;
	overflow: hidden;
}
.rc-contact-form-col::before {
	content: "";
	position: absolute;
	left: 0; top: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent-bright) 100%);
}
.rc-contact-details-col h3 {
	font-family: var(--wp--preset--font-family--archivo) !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11.5px !important;
	color: var(--wp--preset--color--slate) !important;
}

/* --- SECTION HAIRLINE RULE between adjacent same-ground bands ------------- */
.rc-band + .rc-band { position: relative; }

/* --- REVEAL easing refinement (data-reveal sections) --------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.rc-js .rc-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
	html.rc-js .rc-reveal.rc-revealed { opacity: 1; transform: none; }
}

/* --- Global button refinement: arrow-ready inline-flex, tighter tracking -- */
.rc-btn { gap: 8px; letter-spacing: 0.1px; }
.rc-btn--primary { box-shadow: 0 8px 20px rgba(12, 114, 153, 0.2); }
.rc-btn--primary:hover { box-shadow: 0 12px 26px rgba(12, 114, 153, 0.26); transform: translateY(-1px); }

/* FIX 3 — CTA BAND INVERTED BUTTON: teal text on white fill.
   Context: .rc-cta--dark uses a white-fill .rc-btn--primary ("Contact Shawna").
   Problem: the base .rc-btn--primary { color:#fff !important } makes text
   white-on-white (invisible). Fix: the dark-band context overrides the label
   to teal and keeps currentColor (arrow, border) teal too.
   Specificity: (.rc-cta--dark .rc-btn--primary) = 2 classes = same weight as
   the base (.rc-btn--primary) = 1 class rule, but this rule appears LATER in
   the source so it wins at equal !important specificity (CSS cascade §6.4.2).
   AA: teal #0C7299 on white ≈ 5.2:1 ✓
   Does NOT affect: hero .rc-hero-split__cta-primary (white on teal, different
   selector) or generic teal-fill .rc-btn--primary buttons (no .rc-cta--dark
   ancestor). */
.rc-cta--dark .rc-btn--primary {
	color: var(--wp--preset--color--primary) !important;
}
.rc-cta--dark .rc-btn--primary:hover,
.rc-cta--dark .rc-btn--primary:focus-visible {
	color: var(--wp--preset--color--primary) !important;
	background-color: #ffffff;
	border-color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.rc-btn, .rc-btn--primary, .rc-service-card, .rc-hero-split__cta-primary, .rc-testimonial__card,
	.rc-logo-wall__item img, .rc-service-detail__media img { transition: none !important; transform: none !important; }
	/* FIX 3 — Under reduced-motion the header disappears instantly (no slide). */
	.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
	.site-header--hidden { transition: none; }
}

/* ==========================================================================
   BRANDED INTRO OVERLAY (home front page only)
   ==========================================================================
   A full-screen ink-navy overlay that "focuses" the emblem in like a camera
   lens, fades the tagline in, then lifts away to reveal the site.

   ROBUSTNESS: the whole sequence is a CSS keyframe with
   animation-fill-mode:forwards. With JS OFF / failed / disabled it still runs
   to completion and ends the overlay non-interactive and hidden
   (pointer-events:none; visibility:hidden), so the site is always usable.
   position:fixed keeps it out of flow — it never causes layout shift.

   intro.js only enhances (skip on click/scroll/touch/Esc; plays every front-page load).
   Reduced-motion is handled here too: the overlay is hidden at once, no play.
   ========================================================================== */
.rc-intro {
	position: fixed;
	inset: 0;
	z-index: 1000;                 /* above the sticky header (z:50) */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--ink-deep);
	/* Subtle radial lens-vignette so the emblem sits in a pool of light. */
	background-image: radial-gradient(60% 60% at 50% 46%, rgba(12, 114, 153, 0.16) 0%, rgba(11, 28, 44, 0) 62%);
	will-change: transform, opacity;
	/* Default (no-JS, no reduced-motion) plays the full choreography and
	   lifts away at the end, leaving the overlay hidden + non-interactive.
	   Total ~2.4s: emblem focuses (0-1.5s), tagline settles (~1.85s), then the
	   overlay holds briefly and wipes up (from 80% ≈ 1.9s to 100% ≈ 2.4s). */
	animation: rc-intro-out 2.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Faint grain over the plate for depth (no extra request — inline SVG token). */
.rc-intro::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--rc-grain);
	opacity: 0.05;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.rc-intro__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding: 36px 28px; /* Fix 1: was 24px — generous breathing room so emblem never edge-touches */
	text-align: center;
}

/* Lens ring that "focuses" the emblem. Scales up + fades + one settle-rotate. */
.rc-intro__lens {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform-origin: 50% 50%;
	animation: rc-intro-focus 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rc-intro__emblem {
	display: block;
	width: clamp(200px, 30vw, 340px); /* FIX A: lockup is portrait (taller than wide) — sized up so banner reads */
	height: auto;
	/* Cyan "SR" sharpens: emblem eases from a soft blur to crisp as it focuses. */
	filter: blur(6px);
	animation: rc-intro-sharpen 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.rc-intro__tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-weight: 420;
	font-size: clamp(19px, 2.6vw, 27px);
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.94);
	font-variation-settings: 'opsz' 36, 'WONK' 1;
	opacity: 0;
	transform: translateY(8px);
	animation: rc-intro-tagline 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

/* Skip affordance — quick, graceful fade when dismissed by intro.js. */
.rc-intro--skip {
	animation: none;
	opacity: 0;
	transform: translateY(-2%);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

@keyframes rc-intro-focus {
	0%   { transform: scale(0.8) rotate(-7deg); opacity: 0; }
	55%  { opacity: 1; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes rc-intro-sharpen {
	0%   { filter: blur(6px); }
	100% { filter: blur(0); }
}

@keyframes rc-intro-tagline {
	0%   { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* The lift-away. Holds the composed frame, then wipes up + fades, ending
   hidden and non-interactive so content is never trapped behind it. */
@keyframes rc-intro-out {
	0%,
	80%  { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
	99%  { transform: translateY(-100%); opacity: 0; visibility: visible; pointer-events: none; }
	100% { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Reduced motion: no intro at all — reveal the site immediately. */
@media (prefers-reduced-motion: reduce) {
	.rc-intro {
		animation: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.rc-intro__lens,
	.rc-intro__emblem,
	.rc-intro__tagline { animation: none; }
}

/* ==========================================================================
   PARALLAX BAND (parallax section) + hero portrait drift
   ==========================================================================
   FIX 4 — CONVERTED TO FIXED-BACKGROUND REVEAL.
   The JS-driven translate layer is gone. The image is now a CSS
   background-image on the section itself with background-attachment:fixed
   so it stays fixed in the viewport while the page scrolls over the band.
   background-color and background-image are set as longhand properties
   (never the background shorthand — house rule).

   Fallbacks (required):
   - background-attachment:fixed jank/breaks on iOS/touch: @media (hover:none)
     falls back to background-attachment:scroll (static cover, well-positioned).
   - prefers-reduced-motion: also static cover.
   - With JS off there is nothing to drive anyway; CSS rules this entirely.

   Band height: min-height:clamp(420px,62vh,720px) shows significantly more
   image than the old ~240px padding-based height.

   Section is aria-hidden (decorative). No text overlay. Tint kept light so
   the photo reads cleanly.

   The old .rc-parallax__media / .rc-parallax__img rules are replaced with
   tombstones that are safe no-ops if those elements are absent (they are
   removed from the PHP partial in Fix 4).
   ========================================================================== */

/* Core fixed-background band */
.rc-parallax {
	position: relative;
	isolation: isolate;
	/* background-color is set inline on the section element (PHP partial). */
	/* background-image is set inline on the section element (PHP partial). */
	background-attachment: fixed;   /* page scrolls OVER the image */
	background-size: cover;
	background-position: 50% 42%;  /* same focal position as the old img layer */
	background-repeat: no-repeat;
	min-height: clamp(420px, 62vh, 720px); /* FIX 4: taller = more image visible */
	overflow: hidden; /* clip nothing on the band, but prevent inline-bg edges */
	box-sizing: border-box;
}

/* Tombstone rules — safe no-ops; elements removed from PHP partial. */
.rc-parallax__media { display: none; }
.rc-parallax__img   { display: none; }

/* .rc-parallax__heading — heading not rendered (decorative-only band);
   rule retained as a tombstone in case it is re-introduced. */

/* Tint overlay: keep as an absolute layer so the section background shows
   through cleanly. No text to protect — tint is light intentionally. */
.rc-parallax__tint {
	position: absolute;
	inset: 0;
	/* background-image is set inline on this element (PHP partial); no shorthand here. */
	pointer-events: none;
}

/* Inner layer preserves the section's height when .rc-band padding is zeroed. */
.rc-parallax__inner { position: relative; z-index: 1; }

/* iOS / touch: background-attachment:fixed breaks — static cover fallback. */
@media (hover: none) {
	.rc-parallax {
		background-attachment: scroll;
		background-position: 50% 42%;
	}
}

/* Reduced motion: static cover, no fixed-attachment scrolling effect. */
@media (prefers-reduced-motion: reduce) {
	.rc-parallax {
		background-attachment: scroll;
		background-position: 50% 42%;
	}
	.rc-hero-split__portrait img { transform: none !important; }
}

/* Session 3 (owner-reported 2026-08-18): on narrow/mobile viewports `cover`
   crops the sides of parallax-1.jpg and centres on the camera, hiding Shawna
   (far left of the frame). Below ~700px the sides get cropped, so shift the
   focal point left to keep her in view. Placed last so it wins over the
   touch/reduced-motion re-declarations above on phones; desktop keeps 50% 42%. */
@media (max-width: 768px) {
	.rc-parallax {
		background-position: 18% 40%;
	}
}

/* Hero portrait drift is composited; hint the browser (home hero only). */
@media (prefers-reduced-motion: no-preference) {
	.rc-hero-split--home .rc-hero-split__portrait img { will-change: transform; }
}