/* Redefine Web — main stylesheet (non-critical).
   Loaded async by the enqueue. Contains:
   - tokens
   - the complete keyframe library from Motion Spec §2 (defined ONCE)
   - reveal engine per Motion Spec §3
   - reduced-motion global guard per Motion Spec §8
   - base + typography + buttons
   - shared component styles (nav, footer, CTA band, cards, etc.)
   - template-scoped stylesheets are @imported below and live in templates/
*/

/* Design tokens — the ONLY place these values are authored.
   Sourced verbatim from:
   - WP Theme Development Guidelines §3–4
   - Motion & Animation Spec §1
*/
:root {
	/* ---------- Color (Theme Guidelines §3) ---------- */
	--ink: #16181D;
	--navy: #0E1733;
	--navy-2: #132044;
	--navy-border: #26365F;
	--navy-card: #192850;
	--lime: #D9F154;
	--lime-hover: #E3F669;
	--green-live: #8BE04A;
	--bg-gray: #F4F5F6;
	--bg-wash: linear-gradient(180deg, #EDF1FB, #F9FAFD);
	--bg-utility: #F9FAFD;
	--border: #E5E6E8;
	--border-2: #ECEDEF;
	--border-btn: #CBCDD1;
	--text-2: #43464E;
	--text-3: #575B62; /* darkened from #686D75 for WCAG AA contrast (4.5:1 on white and #F4F5F6) */
	--text-4: #9A9DA3;
	--link: #1D4ED8;
	--success: #15803D;
	--success-2: #4F7B2A;
	--danger: #B4232A;
	--danger-tint: #9F1D1D;
	--danger-bg: #FDECEC;

	/* Vertical chip pairs */
	/* Chip fg values darkened where needed for WCAG AA on their tinted backgrounds. */
	--chip-dental-bg: #FFE9D6;   --chip-dental-fg: #8F3006;
	--chip-b2b-bg:    #E4EDFD;   --chip-b2b-fg:    #1D4ED8;
	--chip-home-bg:   #DCFCE7;   --chip-home-fg:   #15803D;
	--chip-guide-bg:  #EAF7DF;   --chip-guide-fg:  #2E5320;
	--chip-ecom-bg:   #F5EDFB;   --chip-ecom-fg:   #4C1BA6;

	/* ---------- Layout (Theme Guidelines §3 container rule) ---------- */
	--container: 1240px;
	--pad-x: 32px;
	--pad-x-mobile: 16px;
	--radius: 9px;          /* buttons + small */
	--radius-card: 12px;    /* cards */
	--radius-card-lg: 14px; /* CTA lime card, deliverable panels */
	--radius-band: 18px;    /* bands (calculator) */
	--radius-media: 16px;   /* media frames */

	/* ---------- Typography (Theme Guidelines §4) ---------- */
	--font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* ---------- Motion (Motion Spec §1) ---------- */
	--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);  /* primary */
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* chart bars, FAQ answer fade */
	--dur-fast: 0.2s;         /* hover lifts, tab button color */
	--dur-base: 0.5s;         /* reveals, hero entrance, panel switch */
	--dur-reveal: 0.55s;      /* [data-reveal].is-in — §3 */
	--dur-accordion: 0.32s;   /* details open/close height */

	/* ---------- Elevation (Theme Guidelines §5) ---------- */
	--shadow-frame: 0 30px 80px rgba(14, 23, 51, 0.12);  /* hero visual frame */
	--shadow-nav: 0 4px 24px rgba(14, 23, 51, 0.07);
	--shadow-menu: 0 30px 70px rgba(14, 23, 51, 0.14);
	--shadow-hover: 0 12px 28px rgba(180, 205, 45, 0.4);  /* lime btn */
}

/* Global reset per Theme Guidelines §3 container rule. */
*, *::before, *::after { box-sizing: border-box; }

/* Template CSS files are enqueued separately via WP (inc/enqueue.php) so each
   gets a cache-busting ?ver= query. Don't @import them here — @import URLs
   are cached aggressively without version querystrings. */

/* =========================================================================
   Motion Spec §2 — the complete keyframe library. Verbatim.
   ========================================================================= */

/* Entrances */
@keyframes rwIn    { from { opacity: 0; transform: translateY(38px) scale(0.98); } }  /* master reveal + hero */
@keyframes ctaIn   { from { opacity: 0; transform: scale(0.95); } }                    /* hero CTA row */
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); }
                     to   { opacity: 1; transform: none; } }                            /* tab panel switch */
@keyframes rwhIn   { from { opacity: 0; transform: translateY(-6px); }
                     to   { opacity: 1; transform: none; } }                            /* mega menu / mobile sheet — from ABOVE the trigger */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(-4px); }
                     to   { opacity: 1; transform: none; } }                            /* FAQ answer */

/* Data / decorative */
@keyframes growV     { from { transform: scaleY(0); } }                                 /* chart bars, transform-origin:bottom */
@keyframes growH     { from { transform: scaleX(0); } }                                 /* process timeline line, origin:left */
@keyframes floatY    { 0%, 100% { transform: translateY(0); }
                       50%     { transform: translateY(-6px); } }                       /* hero dashboard idle */
@keyframes glowDrift { from { transform: translate(-30px, -18px) scale(1); }
                       to   { transform: translate(34px, 20px) scale(1.18); } }         /* hero ambient glow */
@keyframes pulseDot  { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }                 /* "live" status dots */
@keyframes marqueeX  { to { transform: translateX(-50%); } }                            /* logo marquee */

/* Nav (scroll-driven; used with animation-timeline:scroll() OR fallback class) */
@keyframes navIn { from { background: rgba(244, 245, 246, 0);
                          border-color: rgba(229, 230, 232, 0);
                          box-shadow: 0 0 0 rgba(14, 23, 51, 0); }
                   to   { background: rgba(244, 245, 246, 0.92);
                          border-color: var(--border);
                          box-shadow: var(--shadow-nav); } }

/* =========================================================================
   Motion Spec §3 — reveal-on-scroll engine.
   FAIL-SAFE: content is ALWAYS visible. `.is-in` fires the fade-up animation
   only when JS adds it via IntersectionObserver. If JS never runs, content
   shows without the animation — never invisible.
   Note: JS also pre-hides below-fold elements via inline `opacity:0` so the
   .is-in animation runs from-state -> to-state without a jump-back flash.
   ========================================================================= */
[data-reveal].is-in { animation: rwIn var(--dur-reveal) var(--ease-out) backwards; }

/* Motion Spec §8 — reduced-motion global guard. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.rw-marquee-track { animation-play-state: paused !important; }
}

/* =========================================================================
   Base
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg-gray);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	/* Body typography is applied by explicit .rw-body* classes and section
	   contexts — NOT as a global default. Any global body font-size cascades
	   a y-drift across every page. */
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--text-2); }
img, svg { max-width: 100%; height: auto; display: block; }
summary::-webkit-details-marker { display: none; }
input::placeholder { color: var(--text-3); }
input[type="range"] { accent-color: var(--lime); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.on-navy :focus-visible { outline-color: var(--lime); }

/* Modern accordion height animation per Motion Spec §6.3 */
:root { interpolate-size: allow-keywords; }
details::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size var(--dur-accordion) var(--ease-out), content-visibility var(--dur-accordion) allow-discrete;
}
details[open]::details-content { block-size: auto; }

/* Fixed nav needs anchor scroll offset per Motion Spec §7. */
:target, [id] { scroll-margin-top: 70px; }

/* Reserve scrollbar space so form focus (which can trigger scroll-into-view)
   doesn't cause a horizontal layout shift by suddenly showing/hiding the
   viewport scrollbar. Fixes the CTA form "shift-left on click" report. */
html { scrollbar-gutter: stable; }

/* =========================================================================
   Layout helpers
   ========================================================================= */
.rw-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
@media (max-width: 480px) { .rw-container { padding-inline: var(--pad-x-mobile); } }
.rw-py-lg { padding-block: 92px; }
.rw-py-xl { padding-block: 120px; }
@media (max-width: 767px) {
	.rw-py-lg { padding-block: 72px; }
	.rw-py-xl { padding-block: 84px; }
}
.rw-section-gray { background: var(--bg-gray); }
.rw-section-navy { background: linear-gradient(165deg, var(--navy), var(--navy-2)); color: #fff; }
.rw-section-navy h1, .rw-section-navy h2, .rw-section-navy h3 { color: #fff; }
.rw-section-wash { background: var(--bg-wash); }
.rw-section-utility { background: var(--bg-utility); }

/* =========================================================================
   Typography (Theme Guidelines §4)
   ========================================================================= */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.rw-h1-flagship { font-size: 62px; line-height: 1.0; letter-spacing: -0.045em; }
@media (max-width: 767px) { .rw-h1-flagship { font-size: clamp(34px, 10.5vw, 44px); } }
.rw-h1-archive { font-size: clamp(32px, 3.6vw, 46px); }
.rw-h1-detail { font-size: clamp(36px, 3vw, 42px); }
h2 { font-size: clamp(28px, 3vw, 38px); }
.rw-h2-flagship { font-size: 44px; line-height: 1.1; }
@media (max-width: 767px) { h2, .rw-h2 { font-size: clamp(27px, 7.6vw, 34px); letter-spacing: -0.035em; } }
h3 { font-size: 22px; }
@media (max-width: 767px) { h3 { font-size: 21px; } }
p { margin: 0; text-wrap: pretty; }

.rw-body { font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.rw-body-sm { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.rw-mono { font-family: var(--font-mono); }

.rw-eyebrow {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
	color: var(--text-3); text-transform: uppercase; display: inline-flex;
	align-items: center; gap: 8px;
}
.rw-eyebrow-chip {
	background: var(--lime); color: var(--navy);
	padding: 2px 7px; border-radius: 4px;
	font-family: var(--font-mono); font-weight: 500;
}
.rw-marker {
	background: linear-gradient(180deg, transparent 62%, var(--lime) 62%);
	padding: 0 2px;
}
.rw-underline-lime {
	text-decoration: underline;
	text-decoration-color: var(--lime);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* =========================================================================
   Buttons — 3 fixed sizes per Theme Guidelines §4
   ========================================================================= */
.rw-btn {
	display: inline-block; font-weight: 700; text-decoration: none;
	border-radius: var(--radius); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
	line-height: 1;
	cursor: pointer;
	border: 0;
}
.rw-btn-hero { padding: 15px 26px; font-size: 15px; }
.rw-btn-mid { padding: 14px 24px; font-size: 14.5px; }
.rw-btn-inline { padding: 13px 22px; font-size: 14px; }

.rw-btn-primary { background: var(--lime); color: var(--navy); }
.rw-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); background: var(--lime-hover); color: var(--navy); }

.rw-btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--border-btn); font-weight: 600; }
.rw-btn-secondary:hover { transform: translateY(-2px); border-color: var(--ink); }

.rw-btn-navy { background: var(--navy); color: #fff; }
.rw-btn-navy:hover { transform: translateY(-2px); background: var(--navy-2); color: #fff; }

/* =========================================================================
   Site header (chrome — matches Site Header.dc.html)
   Base rules here; critical.css holds above-the-fold copies.
   ========================================================================= */
.rw-annbar {
	background: var(--navy); color: #fff;
	height: 35px; display: flex; align-items: center; justify-content: center;
	padding: 0 16px; box-sizing: border-box;
	white-space: nowrap; overflow: hidden;
	font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
}
.rw-annbar a { color: var(--lime); text-decoration: none; }
.rw-annbar-sep { color: rgba(255,255,255,0.35); margin: 0 8px; }

.rw-navwrap {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	font-family: var(--font-sans); color: var(--ink);
	transition: transform 0.3s var(--ease-out);
}
/* WP logged-in admin bar sits above (32px / 46px on narrow). Shift the fixed
   navwrap down so it doesn't get hidden behind the admin bar. */
body.admin-bar .rw-navwrap { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rw-navwrap { top: 46px; } }
.rw-navwrap.is-scrolled { transform: translateY(-35px); }  /* annbar slides out */
.rw-navwrap.is-scrolled .rw-annbar { pointer-events: none; }
.rw-nav {
	position: relative;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(1.8);
	backdrop-filter: blur(16px) saturate(1.8);
	border-bottom: 1px solid var(--border);
}
/* Spacer height = annbar (35px if present) + nav (64px). */
.rw-nav-spacer { height: 64px; }
.has-annbar .rw-nav-spacer { height: 99px; }
/* Nav frost per Motion Spec §7 — animation-timeline first, class fallback second. */
@supports (animation-timeline: scroll()) {
	.rw-nav-solid {
		animation: navIn 0.3s var(--ease-out) both;
		animation-timeline: scroll();
		animation-range: 0px 140px;
	}
}
.rw-nav.is-solid { background: rgba(244, 245, 246, 0.92); border-bottom-color: var(--border); box-shadow: var(--shadow-nav); }

/* Nav-inner padding is 0 so the logo/CTA edges align with hero + section content edges (1240px container). */
.rw-nav-inner { max-width: var(--container); margin: 0 auto; padding: 0; height: 64px; display: flex; align-items: center; gap: 28px; }
@media (max-width: 767px) { .rw-nav-inner { padding: 0 20px; } }
.rw-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex-shrink: 0; height: 24px; }
.rw-logo .rw-logo-img { height: 24px; width: auto; display: block; }
.rw-logo-mark { width: 25px; height: 25px; background: var(--navy); color: var(--lime); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; border-radius: 6px; }
.rw-logo-txt { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }

.rw-nav-links { display: flex; gap: 4px; align-items: center; }
.rw-nav-link {
	display: flex; align-items: center; gap: 6px;
	background: none; border: none; cursor: pointer;
	color: var(--text-2); font-size: 13.5px; font-weight: 600;
	padding: 10px 12px; border-radius: 8px; text-decoration: none;
	transition: background 0.15s ease;
}
.rw-nav-link:hover { background: var(--bg-gray); color: var(--text-2); }
.rw-nav-caret { font-size: 9px; color: #8C8F95; }
.rw-nav-ctas { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.rw-btn-header-ghost {
	color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
	padding: 10px 16px; border: 1px solid var(--border-btn); border-radius: 8px;
	transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.rw-btn-header-ghost:hover { border-color: var(--ink); }
.rw-btn-header-primary {
	color: var(--navy); font-size: 13.5px; font-weight: 700; text-decoration: none;
	padding: 10px 18px; border-radius: 8px; background: var(--lime);
	transition: transform var(--dur-fast) ease;
	display: inline-block;
}
.rw-btn-header-primary:hover { transform: translateY(-1px); color: var(--navy); }

.rw-burger {
	width: 40px; height: 40px; border: 1px solid var(--border-btn); border-radius: 8px;
	background: #fff; cursor: pointer;
	display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.rw-burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 1px; display: block; }
@media (max-width: 1023px) {
	.rw-nav-links { display: none; }
	.rw-burger { display: flex; }
	.rw-btn-header-ghost { display: none; }
}
@media (max-width: 479px) {
	.rw-btn-header-primary { display: none; }
}

/* Mega menus */
.rw-mega { position: absolute; top: 100%; left: 0; right: 0; padding: 10px 24px 24px; }
.rw-mega[hidden] { display: none; }
.rw-mega-panel {
	max-width: var(--container); margin: 0 auto;
	background: #fff; border: 1px solid var(--border);
	border-radius: 16px; box-shadow: var(--shadow-menu);
	padding: 28px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
	gap: 28px;
	animation: rwhIn 0.25s var(--ease-out);
}
.rw-mega-panel--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }
.rw-mega-col-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 14px; }
.rw-mega-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 8px 10px; border-radius: 9px; transition: background 0.15s ease; }
.rw-mega-link:hover { background: var(--bg-gray); color: var(--ink); }
.rw-mega-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-gray); color: var(--navy); transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.rw-mega-icon svg { width: 18px; height: 18px; display: block; }
.rw-mega-link:hover .rw-mega-icon { background: var(--navy); color: var(--lime); }
.rw-mega-icon--dental { background: var(--chip-dental-bg); color: var(--chip-dental-fg); }
.rw-mega-icon--b2b { background: var(--chip-b2b-bg); color: var(--chip-b2b-fg); }
.rw-mega-icon--home { background: var(--chip-home-bg); color: var(--chip-home-fg); }
.rw-mega-icon--guide { background: var(--chip-guide-bg); color: var(--chip-guide-fg); }
.rw-mega-icon--ecom { background: var(--chip-ecom-bg); color: var(--chip-ecom-fg); }
.rw-mega-link-title { display: block; font-size: 13.5px; font-weight: 700; }
.rw-mega-link-sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
/* Mega-menu Free Audit CTA card — unified across Services / Industries / Resources. */
.rw-mega-promo { background: linear-gradient(150deg, var(--navy), var(--navy-2)); border-radius: 12px; padding: 22px; color: #fff; display: flex; flex-direction: column; }
.rw-mega-promo-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.rw-mega-promo-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.rw-mega-promo-eb-pill { margin-left: auto; border: 1px solid var(--navy-border); border-radius: 999px; padding: 2px 8px; }
.rw-mega-promo-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-top: 14px; }
.rw-mega-promo-mark { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rw-mega-promo-body { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.6); }
.rw-mega-promo-stats { display: flex; gap: 16px; margin-top: 16px; }
.rw-mega-promo-stat-value { font-size: 16px; font-weight: 800; }
.rw-mega-promo-stat-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-top: 2px; }
.rw-mega-promo-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: var(--lime); color: var(--navy); font-size: 12.5px; font-weight: 700; padding: 11px 14px; border-radius: 8px; text-decoration: none; margin-top: 18px; }
.rw-mega-promo-cta:hover { color: var(--navy); }
.rw-mega-promo-cta-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; }

/* Mobile sheet */
.rw-mobile-sheet {
	position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; border-bottom: 1px solid var(--border);
	box-shadow: 0 30px 60px rgba(14, 23, 51, 0.12);
	max-height: calc(100vh - 110px); overflow: auto;
	animation: rwhIn 0.25s var(--ease-out);
}
.rw-mobile-sheet[hidden] { display: none; }
.rw-mobile-sheet-inner { padding: 8px 24px 24px; }
/* Flat divider-only rows (no box outline), matches Site Header.dc.html mobile menu */
.rw-mobile-item {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	background: none; border: none; border-radius: 0;
	border-bottom: 1px solid var(--border-2);
	padding: 16px 2px; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none;
	text-align: left;
	appearance: none;
}
.rw-mobile-icon { font-family: var(--font-mono); font-size: 15px; color: #8C8F95; font-weight: 400; }
.rw-mobile-sub[hidden] { display: none; }
.rw-mobile-sub { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 12px; }
.rw-mobile-sub a { font-size: 14px; color: #3B3E45; text-decoration: none; padding: 9px 10px; border-radius: 8px; font-weight: 600; }
.rw-mobile-sub-all { color: var(--link) !important; font-weight: 700 !important; padding: 9px 10px !important; }
.rw-mobile-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rw-mobile-ctas a { text-align: center; font-size: 14px; padding: 13px; border-radius: 9px; text-decoration: none; }
.rw-mobile-ctas a.ghost { color: var(--ink); font-weight: 600; border: 1px solid var(--border-btn); }
.rw-mobile-ctas a.primary { color: var(--navy); font-weight: 700; background: var(--lime); }

/* =========================================================================
   Footer (chrome — matches Site Footer.dc.html)
   ========================================================================= */
/* Site Footer — matches Site Footer.dc.html verbatim */
.rw-footer { background: #0A1129; color: #fff; font-family: var(--font-sans); }
/* Footer-inner side padding is 0 so content edges align with hero + section content edges. */
.rw-footer-inner { max-width: var(--container); margin: 0 auto; padding: 64px 0 36px; }
@media (max-width: 767px) { .rw-footer-inner { padding: 48px 20px 32px; } }
.rw-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
.rw-footer-brand { min-width: 220px; }
.rw-footer-brand .rw-logo-mark { background: var(--lime); color: var(--navy); }
.rw-footer-brand .rw-logo-txt { color: #fff; font-weight: 800; font-size: 15.5px; }
.rw-footer-blurb { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); max-width: 240px; }
.rw-footer-phone { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.75); margin-top: 16px; }
.rw-footer-email { font-family: var(--font-mono); font-size: 12px; color: var(--lime); margin-top: 6px; display: block; text-decoration: none; }
.rw-footer-email:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.rw-footer-col { display: flex; flex-direction: column; gap: 11px; }
.rw-footer-col-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.72); margin-bottom: 4px; text-transform: uppercase; }
.rw-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.rw-footer-col a { font-size: 13.5px; color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 0.25s ease, text-decoration-color 0.25s ease; }
.rw-footer-col a:hover { color: rgba(255, 255, 255, 0.9); text-decoration-color: rgba(255, 255, 255, 0.5); }
.rw-footer-legal {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1);
	flex-wrap: wrap; gap: 14px;
}
.rw-footer-copy { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.rw-footer-copy a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 2px; }
.rw-footer-copy a:hover { color: #fff; }
.rw-footer-partners { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); }

.rw-footer-slim { padding: 24px 0; }
.rw-footer-slim .rw-footer-legal { border: none; margin: 0; padding: 0; }

/* =========================================================================
   CTA band (Theme Guidelines §5.3, matches CTA Band.dc.html)
   ========================================================================= */
.rw-cta-band { padding: 108px 32px; background: #fff; }
@media (max-width: 767px) { .rw-cta-band { padding: 72px 16px; } }
.rw-cta-card {
	max-width: var(--container); margin: 0 auto; box-sizing: border-box;
	background: var(--lime); color: var(--navy);
	border-radius: var(--radius-card-lg); padding: 76px 56px; text-align: center;
	position: relative; overflow: hidden;
}
@media (max-width: 767px) { .rw-cta-card { padding: 52px 22px; border-radius: 12px; } }
.rw-cta-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: #4A4A4A; display: inline-block; }
.rw-cta-card h2 { color: var(--navy); font-size: clamp(30px, 5vw, 44px); line-height: 1.02; letter-spacing: -0.045em; max-width: 600px; margin: 16px auto 0; text-wrap: balance; }
/* Marker is invisible on the lime CTA card — suppress it so plain text reads normally. */
.rw-cta-card h2 .rw-marker { background: none; padding: 0; }
.rw-cta-sub { max-width: 460px; margin: 16px auto 0; font-size: 15.5px; line-height: 1.6; color: #3C4046; }
.rw-cta-form { margin: 32px auto 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rw-cta-form input[type="email"] { width: 300px; max-width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--navy); font-size: 14.5px; background: #fff; color: var(--navy); font-family: inherit; outline: 0; box-shadow: none; margin: 0; }
.rw-cta-form .rw-btn:hover,
.rw-cta-form .rw-btn:focus,
.rw-cta-form .rw-btn:focus-visible {
	transform: none !important; box-shadow: none !important;
}
.rw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rw-cta-trust { display: flex; gap: 12px; justify-content: center; margin-top: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #4A4A4A; flex-wrap: wrap; }
.rw-cta-trust span:not(:last-child)::after { content: "·"; margin-left: 12px; }

/* =========================================================================
   Shared calculator — SCF Field Reference §K + Motion Spec §6.1.
   Used by Homepage, Service, Industry single, SMB, Pay-Monthly, Free Audit.
   All classes .rw-calc-* live here so drift stays impossible.
   ========================================================================= */
.rw-calc-section { padding: 136px 32px; background: var(--bg-gray); }
@media (max-width: 767px) { .rw-calc-section { padding: 84px 20px; } }
.rw-calc-card {
	max-width: var(--container); margin: 0 auto; box-sizing: border-box;
	background: linear-gradient(165deg, var(--navy), var(--navy-2));
	border-radius: var(--radius-band); padding: 56px; position: relative; overflow: hidden;
}
@media (max-width: 767px) { .rw-calc-card { padding: 40px 24px; } }
.rw-calc-glow { position: absolute; right: -90px; top: -90px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(217, 241, 84, 0.16), transparent 60%); filter: blur(50px); animation: glowDrift 36s ease-in-out infinite alternate; pointer-events: none; }
.rw-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 1100px) { .rw-calc-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.rw-calc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; display: block; }
.rw-calc-eyebrow-chip { background: var(--lime); color: var(--navy); padding: 2px 7px; border-radius: 4px; margin-right: 8px; }
.rw-calc-h2 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; color: #fff; max-width: 440px; }
.rw-calc-note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); max-width: 440px; }
.rw-calc-sliders { margin-top: 40px; max-width: 460px; }
.rw-calc-slider { margin-bottom: 28px; }
.rw-calc-slider:last-child { margin-bottom: 0; }
.rw-calc-slider-labels { display: flex; justify-content: space-between; align-items: baseline; }
.rw-calc-slider-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.rw-calc-slider-value { font-size: 15.5px; font-weight: 700; color: #fff; }
.rw-calc-slider input[type="range"] { width: 100%; margin-top: 12px; cursor: pointer; }
.rw-calc-result { background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: var(--radius-card-lg); padding: 34px; }
.rw-calc-result-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); }
.rw-calc-result-num { font-size: 54px; font-weight: 800; letter-spacing: -0.045em; margin-top: 10px; color: var(--lime); line-height: 1; }
.rw-calc-result-row { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--navy-border); font-size: 13.5px; }
.rw-calc-result-row:first-of-type { margin-top: 26px; }
.rw-calc-result-row-label { color: rgba(255, 255, 255, 0.6); }
.rw-calc-result-row-value { font-family: var(--font-mono); font-size: 12px; color: #fff; }
.rw-calc-result-annual { padding: 13px 0 0; border-top: 1px solid var(--navy-border); font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.rw-calc-result-cta { display: block; text-align: center; background: var(--lime); color: var(--navy); font-size: 14.5px; font-weight: 700; padding: 14px; border-radius: 9px; text-decoration: none; margin-top: 24px; transition: transform var(--dur-fast) ease, background var(--dur-fast) ease; }
.rw-calc-result-cta:hover { transform: translateY(-2px); background: var(--lime-hover); color: var(--navy); }
.rw-calc-result-disclaimer { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 13px; line-height: 1.5; }

/* =========================================================================
   Navy closer (PPC — Theme Guidelines §5.3 alt)
   ========================================================================= */
.rw-navy-closer { padding: 96px 0; background: linear-gradient(165deg, var(--navy), var(--navy-2)); color: #fff; text-align: center; }
.rw-navy-closer .rw-eyebrow { color: rgba(255, 255, 255, 0.7); }
.rw-navy-closer h2 { color: #fff; }
.rw-navy-closer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 32px auto 0; }
.rw-navy-closer-stat { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--navy-border); border-radius: var(--radius-card); padding: 20px; }
@media (max-width: 767px) { .rw-navy-closer-stats { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   JS-driven animation triggers (panelIn / slide fade — Motion Spec §6.2, §6.4)
   ========================================================================= */
.rw-panel-in { animation: panelIn 0.4s var(--ease-out); }
.rw-slide-in { animation: fadeIn 0.5s var(--ease-soft); }

/* Image slot placeholder — matches the reference <image-slot> visual.
   Used everywhere an image field can be empty (hero, service panel, case card,
   testimonial thumb, mega promo). When the field is filled, the img replaces
   the placeholder text but the frame stays. */
.rw-imgslot {
	position: relative;
	background: repeating-linear-gradient(45deg, rgba(14,23,51,0.02) 0 10px, rgba(14,23,51,0.05) 10px 20px);
	border: 1px dashed rgba(14,23,51,0.18);
	display: flex; align-items: center; justify-content: center;
	color: var(--text-3);
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
	text-align: center; padding: 24px;
	overflow: hidden;
}
.rw-imgslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-navy .rw-imgslot, .rw-section-navy .rw-imgslot {
	background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, rgba(255,255,255,0.04) 10px 20px);
	border-color: rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.55);
}

/* Tooltip bubble — Motion Spec §6.6. Desktop hover / mobile tap toggle. */
[data-tooltip] { position: relative; text-decoration: underline dashed; text-underline-offset: 3px; cursor: help; }
.rw-tt-bubble {
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: var(--navy); color: #fff;
	font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.5;
	padding: 8px 12px; border-radius: 8px;
	max-width: min(300px, calc(100vw - 72px));
	white-space: normal;
	box-shadow: 0 12px 24px rgba(14, 23, 51, 0.18);
	z-index: 40;
}
[data-tooltip]:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* =========================================================================
   Utility
   ========================================================================= */
.rw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rw-hidden { display: none !important; }

.rw-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--navy); color: #fff; padding: 12px 18px; text-decoration: none;
}
.rw-skip:focus { left: 8px; top: 8px; }

/* =========================================================================
   Deliverables — per-tab CTA (svc pages)
   ========================================================================= */
.rw-svc-delv-panel-cta {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 24px;
	padding: 12px 22px; border-radius: 999px;
	background: var(--lime); color: var(--navy);
	font-weight: 700; font-size: 14px; text-decoration: none;
	transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.rw-svc-delv-panel-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(179, 227, 78, 0.35); }

/* =========================================================================
   Testimonials — shared component (svc + industry + any template)
   Moved from templates/service.css so hubs render it styled too.
   ========================================================================= */
.rw-svc-test {
	background: linear-gradient(165deg, var(--navy), var(--navy-2));
	padding: 116px var(--pad-x); color: #fff;
}
.rw-svc-test-inner { max-width: var(--container); margin: 0 auto; }
.rw-svc-test-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rw-svc-test-mark {
	font-family: var(--font-mono);
	font-size: 26px; color: var(--navy); background: var(--lime);
	width: 42px; height: 42px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rw-svc-test-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.6);
}
.rw-svc-test-slider { margin-top: 36px; }
.rw-svc-test-slide {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 56px; align-items: center;
}
.rw-svc-test-slide[hidden] { display: none !important; }
.rw-slide.rw-svc-test-slide.rw-slide-in { animation: panelIn 0.45s var(--ease-soft); }
.rw-svc-test-q {
	font-size: 27px; line-height: 1.42; font-weight: 600;
	letter-spacing: -0.02em; color: #fff; text-wrap: pretty;
}
.rw-svc-test-cred { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.rw-svc-test-name { font-size: 15px; font-weight: 700; color: #fff; }
.rw-svc-test-role { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.rw-svc-test-meta {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4);
}
.rw-svc-test-verified {
	font-family: var(--font-mono);
	font-size: 10px; letter-spacing: 0.1em; color: var(--lime);
	border: 1px solid rgba(179, 227, 78, 0.35); border-radius: 999px;
	padding: 4px 10px; margin-left: 12px;
}
.rw-svc-test-visual {
	position: relative;
	height: 300px; border-radius: 14px; overflow: hidden;
	border: 1px solid var(--navy-border);
	background: rgba(255,255,255,0.05);
}
.rw-svc-test-controls { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.rw-svc-test-prev, .rw-svc-test-next {
	width: 44px; height: 44px;
	border-radius: 9px; cursor: pointer;
	font-family: inherit; font-size: 16px;
	transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.rw-svc-test-prev { border: 1px solid var(--navy-border); background: transparent; color: #fff; }
.rw-svc-test-prev:hover { border-color: var(--lime); }
.rw-svc-test-next { border: none; background: var(--lime); color: var(--navy); }
.rw-svc-test-next:hover { transform: translateY(-2px); }
.rw-svc-test-label {
	font-family: var(--font-mono);
	font-size: 11.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.55);
	margin-left: 8px;
}
.rw-svc-test-line { flex: 1; height: 1px; background: var(--navy-border); margin-left: 14px; }
@media (max-width: 900px) {
	.rw-svc-test-slide { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767px) {
	.rw-svc-test { padding: 64px 20px !important; }
	.rw-svc-test-q { font-size: 20px; }
}