/* ==========================================================================
   Rajdeep Roy — Signal : Components
   --------------------------------------------------------------------------
   Every class here is applied from the block editor via the "Additional CSS
   class(es)" field, so page content stays plain, editable Gutenberg blocks and
   all styling lives in the theme. Editing text in WordPress can never break
   the layout, and none of these components depend on a page builder.
   ========================================================================== */

/* ==========================================================================
   1. ICON SYSTEM
   --------------------------------------------------------------------------
   Icons are drawn by CSS, not written into page content. That means:
     - zero HTTP requests and zero file weight (inline SVG data URIs)
     - an editor can never delete or mangle an icon by editing text
     - page content stays clean, readable blocks with no stray markup
   To give an element an icon, add two classes:  "rr-i  rr-i--shield"
   To add a new icon: URL-encode the SVG and add a --i rule below.
   ========================================================================== */

/* The tinted rounded square, drawn as a pseudo-element on the element itself.
   Nothing is added to the page HTML. */
.rr-i::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin-bottom: 14px;
	border-radius: var(--rr-radius-lg);
	background-color: var(--rr-signal-tint);
	background-image: var(--i);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
/* Risk / hazard variant — coral tint, coral glyph. */
.rr-i.is-alert::before { background-color: var(--rr-alert-tint); background-image: var(--i-alert, var(--i)); }
/* Small inline variant used in list rows. */
.rr-i.is-small::before { width: 32px; height: 32px; border-radius: 7px; margin-bottom: 0; background-size: 16px 16px; }
.rr-i.is-38::before     { width: 38px; height: 38px; border-radius: 8px; margin-bottom: 0; background-size: 18px 18px; }
/* Circular outlined variant used for numbered process steps. */
.rr-i.is-step::before {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--rr-signal-dim);
	background-color: var(--rr-signal-tint-soft);
	background-size: 20px 20px;
	margin-bottom: 16px;
}
/* Large, unboxed — for the blog media placeholders. */
.rr-i.is-bare::before { background-color: transparent; border-radius: 0; margin: 0; }

/* Inline variant — the chip sits to the LEFT of the text instead of above it.
   Deliberately NOT flexbox: a flex container would turn every inline element
   in the sentence (a <strong>, a link) into its own flex item, so the words
   would break apart and wrap in columns. Absolute positioning keeps the copy
   as one normal run of text that wraps with a clean hanging indent. */
.rr-i.is-inline {
	position: relative;
	display: block;
	padding-left: 42px;
	min-height: 30px;
}
.rr-i.is-inline::before {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 8px;
	margin-bottom: 0;
	background-size: 17px 17px;
}

/* Standalone glyph element, when an icon is needed inline rather than as a
   pseudo-element. Uses a mask so it inherits colour from currentColor. */
.rr-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--i) no-repeat center / contain;
	mask: var(--i) no-repeat center / contain;
}

.rr-i--shield, .rr-icon--shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 3v6c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V5l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.rr-i--radar, .rr-icon--radar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 3v9l6 3'/%3E%3C/svg%3E"); }
.rr-i--flag, .rr-icon--flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='21' x2='5' y2='3'/%3E%3Cpath d='M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E"); }
.rr-i--cloud-lock, .rr-icon--cloud-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16a4 4 0 010-8 5 5 0 019.5-1.5A4.5 4.5 0 0117 16H7z'/%3E%3Crect x='10' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M11.5 16v-1.5a1.5 1.5 0 013 0V16'/%3E%3C/svg%3E"); }
.rr-i--clipboard, .rr-icon--clipboard { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3a1 1 0 011-1h4a1 1 0 011 1v1'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.rr-i--database, .rr-icon--database { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='7' ry='2.5'/%3E%3Cpath d='M5 5v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V5'/%3E%3Cpath d='M5 11v6c0 1.4 3.1 2.5 7 2.5'/%3E%3Crect x='14' y='14' width='6' height='5' rx='1'/%3E%3Cpath d='M15.5 14v-1.2a1.5 1.5 0 013 0V14'/%3E%3C/svg%3E"); }
.rr-i--search, .rr-icon--search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='20' y1='20' x2='14.7' y2='14.7'/%3E%3C/svg%3E"); }
.rr-i--scales, .rr-icon--scales { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='5' y1='7' x2='19' y2='7'/%3E%3Cpath d='M5 7l-3 6a3 3 0 006 0l-3-6z'/%3E%3Cpath d='M19 7l-3 6a3 3 0 006 0l-3-6z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); }
.rr-i--cloud-off, .rr-icon--cloud-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18a4 4 0 010-8 5 5 0 019.5-1.5A4.5 4.5 0 0118 18H6z'/%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3C/svg%3E"); }
.rr-i--chat, .rr-icon--chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2h-3l-4 4v-4H6a2 2 0 01-2-2V6a2 2 0 012-2h13a2 2 0 012 2v9z'/%3E%3C/svg%3E"); }
.rr-i--layers, .rr-icon--layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z'/%3E%3Cline x1='9' y1='4' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='20'/%3E%3C/svg%3E"); }
.rr-i--cog, .rr-icon--cog { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 00.3 1.9l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.9-.3 1.7 1.7 0 00-1 1.6V21a2 2 0 01-4 0v-.2a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.9.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.9 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.2a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.9l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.9.3H9a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.2a1.7 1.7 0 001 1.5 1.7 1.7 0 001.9-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.9V9a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.2a1.7 1.7 0 00-1.5 1z'/%3E%3C/svg%3E"); }
.rr-i--users, .rr-icon--users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c0-3 2.5-5.2 5.5-5.2S14.5 16 14.5 19'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M20.5 19c0-2.4-1.6-4.3-3.6-4.9'/%3E%3C/svg%3E"); }
.rr-i--chart, .rr-icon--chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M20 20v-7'/%3E%3C/svg%3E"); }
.rr-i--bell, .rr-icon--bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 10-12 0c0 6-2 7-2 7h16s-2-1-2-7'/%3E%3Cpath d='M10 20a2 2 0 004 0'/%3E%3C/svg%3E"); }
.rr-i--document, .rr-icon--document { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E"); }
.rr-i--key, .rr-icon--key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l8-8'/%3E%3Cpath d='M16 5l2.5 2.5'/%3E%3Cpath d='M13 8l2.5 2.5'/%3E%3C/svg%3E"); }
.rr-i--lock, .rr-icon--lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.rr-i--clock, .rr-icon--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.rr-i--pin, .rr-icon--pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.rr-i--tag, .rr-icon--tag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 011-1h8l9 9-9 9-9-9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.rr-i--check, .rr-icon--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.rr-i--globe, .rr-icon--globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c2.4 2.6 3.6 5.6 3.6 9S14.4 18.4 12 21c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z'/%3E%3C/svg%3E"); }
.rr-i--badge, .rr-icon--badge { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.4 1.7 2.9-.2.9 2.8 2.4 1.7-1.1 2.8 1.1 2.7-2.4 1.7-.9 2.8-2.9-.2L12 19.9l-2.4-1.7-2.9.2-.9-2.8-2.4-1.7 1.1-2.7-1.1-2.8 2.4-1.7.9-2.8 2.9.2z'/%3E%3Cpath d='M9.2 11.8l2 2 3.6-3.6'/%3E%3C/svg%3E"); }

/* Coral variants — only the three icons that appear on risk/hazard cards. */
.rr-i--search.is-alert   { --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='20' y1='20' x2='14.7' y2='14.7'/%3E%3C/svg%3E"); }
.rr-i--scales.is-alert   { --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='5' y1='7' x2='19' y2='7'/%3E%3Cpath d='M5 7l-3 6a3 3 0 006 0l-3-6z'/%3E%3Cpath d='M19 7l-3 6a3 3 0 006 0l-3-6z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); }
.rr-i--cloud-off.is-alert{ --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18a4 4 0 010-8 5 5 0 019.5-1.5A4.5 4.5 0 0118 18H6z'/%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3C/svg%3E"); }

/* Signal-bright variants for icons that sit on dark panels. */
.rr-dark .rr-i::before,
.rr-trust-bar .rr-i::before,
.rr-info-panel .rr-i::before,
.rr-featured-media.rr-i::before,
.rr-media-placeholder.rr-i::before { filter: brightness(1.45) saturate(1.15); }

/* Icon chip — the rounded tinted square an icon sits in. */
.rr-icon-chip {
	width: 44px;
	height: 44px;
	border-radius: var(--rr-radius-lg);
	background: var(--rr-signal-tint);
	color: var(--rr-signal-dim);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.rr-icon-chip.is-alert { background: var(--rr-alert-tint); color: var(--rr-alert); }
.rr-icon-chip.is-small { width: 32px; height: 32px; border-radius: 7px; margin-bottom: 0; }
.rr-icon-chip.is-small .rr-icon { width: 16px; height: 16px; }

/* Circular step marker used in the process sections. */
.rr-step-marker {
	width: 48px;
	height: 48px;
	border: 1px solid var(--rr-signal-dim);
	border-radius: 50%;
	background: var(--rr-signal-tint-soft);
	color: var(--rr-signal);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.rr-step-marker .rr-icon { width: 20px; height: 20px; }


/* ==========================================================================
   2. TYPOGRAPHIC UTILITIES
   ========================================================================== */

.rr-mono {
	font-family: var(--rr-font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
}

/* Small uppercase label with a leading rule — used above every headline. */
.rr-eyebrow {
	font-family: var(--rr-font-mono);
	font-size: 12px;
	color: var(--rr-signal-dim);
	letter-spacing: var(--rr-tracking-mono);
	text-transform: uppercase;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.rr-eyebrow::before {
	content: "";
	width: 16px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}
/* On dark backgrounds the eyebrow brightens for contrast.
   .rr-page-header is a dark surface too, and was missing from this list — which
   left the eyebrow on --rr-signal-dim (#1B7A46) over charcoal at 3.32:1. Below
   the 4.5:1 AA threshold, and at 12px uppercase it reads muddy. Fixed 4 Oct 2026. */
.rr-dark .rr-eyebrow,
.rr-hero .rr-eyebrow,
.rr-page-header .rr-eyebrow { color: var(--rr-signal); } /* 8.84:1 */
/* Variant without the leading rule, for section heads on light. */
.rr-eyebrow.is-plain::before { display: none; }

.rr-lede {
	font-size: var(--rr-text-lg);
	line-height: 1.6;
	max-width: 560px;
	color: var(--rr-ink-soft);
}
/* Same omission, and far more visible: every page header's lede was rendering
   in --rr-ink-soft (#565B61, the *light*-mode secondary) on charcoal — 2.60:1.
   That is the greyed-out body copy reported on /get-in-touch/, and it affected
   all 17 pages, not one. --rr-on-dark-soft measures 6.81:1. */
.rr-dark .rr-lede,
.rr-hero .rr-lede,
.rr-page-header .rr-lede { color: var(--rr-on-dark-soft); }

/* Catch-all for any other paragraph dropped into a page header, so a new block
   cannot reintroduce the same bug. Mirrors the `.rr-dark p` rule below. */
.rr-page-header p:not(.rr-eyebrow) { color: var(--rr-on-dark-soft); }

/* Small print used under illustrative figures. */
.rr-footnote {
	font-size: 11.5px;
	color: var(--rr-ink-soft);
}
.rr-dark .rr-footnote,
.rr-hero .rr-footnote,
.rr-page-header .rr-footnote { color: var(--rr-on-dark-soft); }


/* ==========================================================================
   3. SECTIONS
   --------------------------------------------------------------------------
   Apply one of these to a Group block set to full width.
   ========================================================================== */

.rr-section { padding-block: var(--rr-section-y); }
.rr-section.is-tight { padding-block: var(--rr-section-y-sm); }

.rr-light  { background: var(--rr-off-white); color: var(--rr-ink); }
.rr-paper  { background: var(--rr-paper);     color: var(--rr-ink); }

.rr-dark {
	background: var(--rr-charcoal);
	color: var(--rr-on-dark);
}
.rr-dark :is(h1, h2, h3, h4) { color: var(--rr-on-dark); }
.rr-dark p { color: var(--rr-on-dark-soft); }

/* Section intro block: eyebrow + h2 + optional paragraph. */
.rr-section-head {
	max-width: 600px;
	margin-bottom: 48px;
}
.rr-section-head h2 {
	font-family: var(--rr-font-display);
	font-size: var(--rr-h2);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
.rr-section-head p { margin: 14px 0 0; font-size: 16px; }

/* Hairline divider between stacked sections of the same tone. */
.rr-rule { border: 0; border-top: 1px solid var(--rr-line); margin: 0; }
.rr-dark .rr-rule { border-color: var(--rr-line-dark); }


/* --------------------------------------------------------------------------
   Section measure.
   On a Kadence "fullwidth" page, theme.json's contentSize resolves to the full
   viewport, so a constrained Group block has no max-width to inherit. These
   rules put the design's own measure back: the section stays edge-to-edge so
   its background bleeds, while its contents are capped and centred.
   -------------------------------------------------------------------------- */
/* Full-width bands butt directly against one another. WordPress applies its
   default block gap to every top-level block, which leaves a strip of page
   background showing between each dark and light section. */
body.wp-child-theme-rajdeeproy-kadence .entry-content > .wp-block-group.alignfull { margin-block: 0; }

body.wp-child-theme-rajdeeproy-kadence .rr-hero,
body.wp-child-theme-rajdeeproy-kadence .rr-page-header,
body.wp-child-theme-rajdeeproy-kadence .rr-section,
body.wp-child-theme-rajdeeproy-kadence .rr-trust-bar,
body.wp-child-theme-rajdeeproy-kadence .rr-stats-strip,
body.wp-child-theme-rajdeeproy-kadence .rr-filter-bar,
body.wp-child-theme-rajdeeproy-kadence .rr-cta {
	padding-inline: var(--rr-gutter);
}
.rr-hero > *,
.rr-page-header > *,
.rr-section > *,
.rr-trust-bar > *,
.rr-stats-strip > *,
.rr-filter-bar > *,
.rr-cta > * {
	max-width: var(--rr-maxw);
	margin-inline: auto;
}
/* Service pages use the narrower measure. */
.rr-page-header > *,
.rr-faq > * {
	max-width: var(--rr-maxw-narrow);
}

/* ==========================================================================
   4. HERO
   ========================================================================== */

.rr-hero {
	position: relative;
	overflow: hidden;
	padding: 88px 0 64px;
	color: var(--rr-on-dark);
	border-bottom: 1px solid var(--rr-line-dark);
	background:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(62, 207, 126, 0.22) 0%, rgba(62, 207, 126, 0) 60%),
		radial-gradient(ellipse 700px 500px at 100% 0%, rgba(36, 154, 92, 0.16) 0%, rgba(36, 154, 92, 0) 55%),
		linear-gradient(160deg, #101214 0%, #191C1F 45%, #16211B 100%);
	background-color: var(--rr-charcoal);
}
.rr-hero :is(h1, h2, h3) { color: var(--rr-on-dark); }
.rr-hero h1 {
	font-family: var(--rr-font-display);
	font-size: var(--rr-h1-home);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	max-width: 640px;
	margin: 0;
}
.rr-hero h1 em,
.rr-accent { color: var(--rr-signal); font-style: normal; }

/* Smaller hero for interior pages. */
.rr-page-header {
	padding: 64px 0 48px;
	color: var(--rr-on-dark);
	border-bottom: 1px solid var(--rr-line-dark);
	background:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(62, 207, 126, 0.20) 0%, rgba(62, 207, 126, 0) 60%),
		linear-gradient(160deg, #101214 0%, #191C1F 45%, #16211B 100%);
	background-color: var(--rr-charcoal);
}
.rr-page-header :is(h1, h2) { color: var(--rr-on-dark); }
.rr-page-header h1 {
	font-family: var(--rr-font-display);
	font-size: var(--rr-h1);
	font-weight: 600;
	line-height: 1.12;
	max-width: 680px;
	margin: 0;
}

/* The animated sweep across the hero. Drawn as a pseudo-element so there is
   no decorative markup in page content. Purely decorative; hidden for anyone
   who has asked for reduced motion (see design-system.css). */
.rr-hero::after,
.rr-scanline {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--rr-signal), transparent);
	opacity: 0.5;
	animation: rr-scan 6s linear infinite;
}
@keyframes rr-scan {
	0%   { top: 0;    opacity: 0; }
	10%  { opacity: 0.6; }
	90%  { opacity: 0.6; }
	100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rr-hero::after, .rr-scanline { display: none; } }

/* Status panel in the hero — the "audit log" motif. */
.rr-status-panel {
	background: var(--rr-panel);
	border: 1px solid var(--rr-line-dark);
	border-radius: var(--rr-radius);
	padding: 20px;
	font-family: var(--rr-font-mono);
	font-size: 12px;
	color: var(--rr-on-dark-soft);
}
.rr-status-panel > p:first-child {
	color: var(--rr-on-dark-soft);
	margin: 0 0 14px;
	letter-spacing: 0.05em;
}
.rr-status-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rr-status-panel li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--rr-line-dark);
	color: var(--rr-on-dark-soft);
}
.rr-status-panel li:first-child { border-top: 0; }
/* The value after the pipe is picked out in signal green. */
.rr-status-panel li strong {
	color: var(--rr-signal);
	font-weight: 400;
	text-align: right;
}


/* ==========================================================================
   5. TRUST BAR & STATS
   ========================================================================== */

.rr-trust-bar {
	background: var(--rr-panel);
	border-bottom: 1px solid var(--rr-line-dark);
	color: var(--rr-on-dark-soft);
	font-family: var(--rr-font-mono);
	font-size: 12.5px;
	padding-block: 18px;
}
.rr-trust-bar p { margin: 0; color: var(--rr-on-dark-soft); }
.rr-trust-bar strong { color: var(--rr-on-dark); font-weight: 500; }
/* Each item is an icon chip followed by its line of copy. The columns keep an
   even rhythm and the text wraps under itself, not under the icon. */
/* The columns hug their own copy and spread across the bar, so the longest
   proof point keeps its single line instead of wrapping under a fixed third.
   Body-prefixed because WordPress's own layout CSS (.wp-block-columns
   .is-layout-flex { align-items: normal }) is printed inline after this file
   and would otherwise win on equal specificity. The zeroed margin matters
   most: WordPress gives every top-level block a 32px bottom gap, which was
   padding the bar out underneath the row and pinning the items to the top. */
body.wp-child-theme-rajdeeproy-kadence .rr-trust-bar .wp-block-columns {
	margin-block: 0;
	gap: var(--rr-gap);
	align-items: center;
	justify-content: space-between;
}
body.wp-child-theme-rajdeeproy-kadence .rr-trust-bar .wp-block-column { flex: 0 1 auto; }
/* Nothing inside the bar carries a trailing margin into the padding. */
.rr-trust-bar .wp-block-group__inner-container > *:last-child,
.rr-trust-bar .wp-block-column > *:last-child { margin-bottom: 0; }
.rr-trust-bar p.rr-i { line-height: 1.45; }
.rr-trust-bar p.rr-i::before { background-color: var(--rr-signal-tint); }

.rr-stat .rr-stat-num,
.rr-stat-num {
	font-family: var(--rr-font-display);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--rr-signal);
	margin: 0;
}
.rr-stat-label {
	font-size: 13px;
	color: var(--rr-on-dark-soft);
	margin: 4px 0 0;
}
.rr-light .rr-stat-label,
.rr-paper .rr-stat-label { color: var(--rr-ink-soft); }
.rr-light .rr-stat-num,
.rr-paper .rr-stat-num { color: var(--rr-signal-dim); }

/* Bordered strip of stats used on the About page. */
.rr-stats-strip {
	background: var(--rr-panel);
	border-bottom: 1px solid var(--rr-line-dark);
	padding: 0;
}
.rr-stats-strip .wp-block-column {
	padding: 22px 32px;
	border-right: 1px solid var(--rr-line-dark);
}
.rr-stats-strip .wp-block-column:last-child { border-right: 0; }
.rr-stats-strip .rr-stat-num { font-size: 28px; }
.rr-stats-strip .rr-stat-label { font-family: var(--rr-font-mono); font-size: 11.5px; }


/* ==========================================================================
   6. CARDS
   ========================================================================== */

.rr-card {
	background: var(--rr-paper);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	padding: 26px;
	height: 100%;
}
.rr-card h3 {
	font-family: var(--rr-font-display);
	font-size: var(--rr-h3);
	font-weight: 600;
	margin: 10px 0 0;
	line-height: 1.3;
}
.rr-card p { margin: 8px 0 0; font-size: 14.5px; color: var(--rr-ink-soft); }
.rr-card .rr-link { margin-top: 16px; display: inline-block; }

/* Risk / hazard card — sits on white, tinted alert accent. */
.rr-card.is-risk { background: var(--rr-off-white); }
.rr-card.is-risk .rr-tag-mono { color: var(--rr-alert); }

/* Service card — lifts on hover. */
.rr-card.is-service { padding: 28px; transition: border-color var(--rr-dur) var(--rr-ease), transform var(--rr-dur) var(--rr-ease); }
.rr-card.is-service:hover,
.rr-card.is-service:focus-within {
	border-color: var(--rr-signal-dim);
	transform: translateY(-2px);
	box-shadow: var(--rr-shadow-card);
}
.rr-card.is-service h3 { font-size: 18px; margin-top: 12px; }

/* Equal-height cards across a row. :has() lets the column become a flex
   context without adding a wrapper class to page content; browsers without
   :has() simply fall back to natural card heights, which still reads fine. */
.wp-block-column:has(> .rr-card),
.wp-block-column:has(> .rr-step.is-boxed) { display: flex; flex-direction: column; }
.wp-block-column > .rr-card,
.wp-block-column > .rr-step.is-boxed { flex: 1; }
/* Push the "Learn more" link to the bottom so links align across a row. */
.rr-card.is-service { display: flex; flex-direction: column; align-items: stretch; }
/* A flex item with margin-inline:auto centres itself; themes and the editor
   both set that on block children, so neutralise it explicitly. */
.rr-card.is-service > * { margin-inline: 0; max-width: none; }
.rr-card.is-service > :last-child { margin-top: auto; padding-top: 16px; }

/* Card on a dark section. */
.rr-dark .rr-card {
	background: var(--rr-panel);
	border-color: var(--rr-line-dark);
}
.rr-dark .rr-card p { color: var(--rr-on-dark-soft); }

.rr-tag-mono {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rr-signal-dim);
	margin: 0;
}

.rr-link {
	font-size: var(--rr-text-sm);
	font-weight: 600;
	color: var(--rr-signal-dim);
	text-decoration: none;
}
.rr-link:hover, .rr-link:focus { text-decoration: underline; }

/* Pull-quote / testimonial card. */
.rr-quote {
	background: var(--rr-panel);
	border: 1px solid var(--rr-line-dark);
	border-radius: var(--rr-radius);
	padding: 28px;
	font-size: 15.5px;
	color: var(--rr-on-dark);
}
.rr-quote p { color: var(--rr-on-dark); margin: 0; }
.rr-quote cite,
.rr-quote .rr-quote-who {
	display: block;
	margin-top: 16px;
	font-family: var(--rr-font-mono);
	font-size: 13px;
	font-style: normal;
	color: var(--rr-on-dark-soft);
}


/* ==========================================================================
   7. CHECK LIST ("Is this you?")
   ========================================================================== */

.rr-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rr-gap-sm); }
@media (min-width: 700px) { .rr-checklist { grid-template-columns: 1fr 1fr; } }
/* One column regardless of width — for a checklist sitting in a narrow
   column beside body copy, where two columns leave every item four lines
   deep and unreadable. */
.rr-checklist.is-stacked { grid-template-columns: 1fr !important; }

.rr-checklist li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px;
	background: var(--rr-off-white);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	font-size: 14.5px;
	color: var(--rr-ink);
}
.rr-checklist li::before {
	content: "";
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rr-signal-tint);
	/* the tick itself, drawn with a nested mask on a pseudo-element background */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23249A5C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
.rr-paper .rr-checklist li { background: var(--rr-off-white); }


/* ==========================================================================
   8. PROCESS STEPS
   ========================================================================== */

.rr-step { padding-right: 24px; }
.rr-step h3 {
	font-family: var(--rr-font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0;
}
.rr-step p { margin: 8px 0 0; font-size: 14.5px; color: var(--rr-ink-soft); }
.rr-step-num {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-xs);
	color: var(--rr-signal-dim);
	letter-spacing: var(--rr-tracking-mono);
	text-transform: uppercase;
	margin: 0 0 6px;
}

/* Boxed variant used on service pages. */
.rr-step.is-boxed {
	padding: 22px;
	background: var(--rr-off-white);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	height: 100%;
}
.rr-step.is-boxed h3 { font-size: 15.5px; margin-top: 10px; }
.rr-step.is-boxed p { font-size: 13.5px; }


/* ==========================================================================
   9. TIMELINE (About page)
   ========================================================================== */

.rr-timeline {
	list-style: none;
	position: relative;
	margin: 40px 0 0;
	padding-left: 28px;
	border-left: 1px solid var(--rr-line-strong);
}
.rr-timeline > li { position: relative; padding-bottom: 36px; }
.rr-timeline > li:last-child { padding-bottom: 0; }
.rr-timeline > li::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 2px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rr-signal);
	box-shadow: 0 0 0 4px rgba(62, 207, 126, 0.18);
}
.rr-timeline .rr-year {
	display: block;
	font-family: var(--rr-font-mono);
	font-size: 12px;
	color: var(--rr-signal-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.rr-timeline strong {
	display: block;
	font-family: var(--rr-font-display);
	font-size: 16.5px;
	font-weight: 600;
	margin-top: 6px;
}
.rr-timeline p { margin: 6px 0 0; font-size: 14px; color: var(--rr-ink-soft); max-width: 560px; }

/* Specialty list in the About sidebar. */
.rr-specialties {
	background: var(--rr-off-white);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	padding: 24px;
}
.rr-specialties h3 {
	font-family: var(--rr-font-mono);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rr-ink-soft);
	margin: 0 0 16px;
	font-weight: 500;
}
.rr-specialties ul { list-style: none; margin: 0; padding: 0; }
.rr-specialties li {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--rr-line);
	font-size: 13.5px;
}
.rr-specialties li:first-child { border-top: 0; padding-top: 0; }

/* Placeholder portrait frame. Replace with a real headshot when available:
   swap the group block for an Image block and delete this class. */
.rr-avatar {
	width: 220px;
	height: 220px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #1C2620 0%, #16181B 100%);
	border: 1px solid var(--rr-line-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rr-avatar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 160px 160px at 30% 20%, rgba(62, 207, 126, 0.25) 0%, rgba(62, 207, 126, 0) 70%);
}
.rr-avatar p {
	position: relative;
	font-family: var(--rr-font-display);
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rr-signal);
	margin: 0;
}


/* ==========================================================================
   10. FAQ — built on the native Details block, so it is keyboard accessible
       and needs no JavaScript.
   ========================================================================== */

.rr-faq .wp-block-details {
	border: 0;
	border-top: 1px solid var(--rr-line-strong);
	border-radius: 0;
	padding: 22px 0;
	background: transparent;
}
.rr-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--rr-line-strong); }
.rr-faq summary {
	font-family: var(--rr-font-display);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.rr-faq summary::-webkit-details-marker { display: none; }
.rr-faq summary::after {
	content: "+";
	font-family: var(--rr-font-mono);
	font-size: 20px;
	font-weight: 400;
	color: var(--rr-signal-dim);
	flex-shrink: 0;
}
.rr-faq details[open] summary::after { content: "\2013"; }
.rr-faq summary:focus-visible { outline: 2px solid var(--rr-signal-dim); outline-offset: 3px; }
.rr-faq .wp-block-details p {
	margin: 12px 0 0;
	font-size: 14.5px;
	color: var(--rr-ink-soft);
	max-width: var(--rr-prose);
}


/* ==========================================================================
   11. CONTACT
   ========================================================================== */

.rr-info-panel {
	background: var(--rr-charcoal);
	color: var(--rr-on-dark);
	border-radius: var(--rr-radius-lg);
	padding: 34px;
}
.rr-info-panel :is(h2, h3) { color: var(--rr-on-dark); }
.rr-info-panel > p { color: var(--rr-on-dark-soft); font-size: 14.5px; }
.rr-info-panel ul { list-style: none; margin: 24px 0 0; padding: 0; }
/* Grid rather than flex: the icon pseudo-element spans both rows so the
   label sits above the value instead of beside it, with no extra markup. */
.rr-info-panel li {
	display: grid;
	grid-template-columns: 38px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	align-items: start;
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px solid var(--rr-line-dark);
}
.rr-info-panel li::before { grid-column: 1; grid-row: 1 / span 2; }
.rr-info-panel .rr-info-label { grid-column: 2; grid-row: 1; }
.rr-info-panel .rr-info-value { grid-column: 2; grid-row: 2; }
.rr-info-panel li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rr-info-panel .rr-icon-chip {
	width: 38px; height: 38px; margin: 0;
	background: var(--rr-signal-tint);
	color: var(--rr-signal);
}
.rr-info-panel .rr-icon-chip .rr-icon { width: 18px; height: 18px; }
.rr-info-panel .rr-info-label {
	display: block;
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rr-on-dark-soft);
}
.rr-info-panel .rr-info-value { display: block; font-size: 14.5px; margin-top: 4px; color: var(--rr-on-dark); }

/* Wrapper for the booking embed (Calendly / Cal.com). Keeps the widget on
   brand and stops it collapsing before the script loads. */
.rr-booking {
	background: var(--rr-paper);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-lg);
	padding: 8px;
	min-height: 716px;
}
.rr-booking iframe { border-radius: var(--rr-radius); display: block; width: 100%; }
.rr-booking-fallback {
	padding: 32px;
	text-align: center;
	color: var(--rr-ink-soft);
	font-size: 14.5px;
}

/* The Calendly container. Height is reserved up front so the page does not
   jump when the widget arrives; Calendly's own iframe fills it. */
.rr-calendly {
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rr-calendly.is-loaded { display: block; }
.rr-calendly .calendly-inline-widget,
.rr-calendly iframe { width: 100%; min-height: 700px; }
.rr-calendly-loading {
	margin: 0;
	color: var(--rr-ink-soft);
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-sm);
	letter-spacing: var(--rr-tracking-mono);
}
/* Shown when the widget cannot load — a blocked script, an ad blocker, or a
   visitor who declined cookies. Booking still works, on Calendly's own site. */
.rr-calendly.is-fallback {
	flex-direction: column;
	gap: 14px;
	text-align: center;
	padding: 32px;
}
.rr-calendly.is-fallback .rr-footnote { margin: 0; max-width: 34ch; }


/* --------------------------------------------------------------------------
   Booking confirmation page
   -------------------------------------------------------------------------- */

/* The success banner. Grid rather than flex so the icon can sit in its own
   column spanning both text rows — with flex, the heading and the paragraph
   would become separate flex items and sit side by side. */
.rr-confirm-banner {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: start;
	background: var(--rr-signal-tint);
	border: 1px solid rgba(36, 154, 92, 0.3);
	border-left: 3px solid var(--rr-signal-dim);
	border-radius: var(--rr-radius);
	padding: 20px 24px;
	margin-bottom: 44px;
}
.rr-confirm-banner.rr-i::before {
	grid-row: 1 / span 2;
	width: 34px;
	height: 34px;
	margin-bottom: 0;
	border-radius: 8px;
	background-size: 19px 19px;
	background-color: rgba(36, 154, 92, 0.16);
}
/* signal-ink, not signal-dim: this is text, and it needs to clear 4.5:1
   against the tinted panel behind it. */
.rr-confirm-banner .rr-confirm-title {
	font-size: 20px;
	line-height: 1.25;
	color: var(--rr-signal-ink);
	margin: 0 0 5px;
}
.rr-confirm-banner p {
	margin: 0;
	color: var(--rr-ink-prose);
	font-size: var(--rr-text-base);
}

/* The confirmed-booking header. Same dark band as every other page header,
   with the accent pulled forward so arriving here feels like an arrival. */
.rr-page-header.is-confirm .rr-eyebrow { color: var(--rr-signal); }
.rr-page-header.is-confirm .rr-eyebrow.rr-i::before {
	background-color: var(--rr-signal-tint);
	filter: brightness(1.45) saturate(1.15);
}

/* Card whose heading is a link — used for the "while you wait" reading list.
   The whole card lifts on hover, but only the heading is the hit target, so
   the card stays readable to a screen reader as a heading plus a paragraph. */
.rr-card.is-link { transition: border-color var(--rr-dur) var(--rr-ease), transform var(--rr-dur) var(--rr-ease); }
.rr-card.is-link h3 { margin-bottom: 8px; }
.rr-card.is-link h3 a {
	color: var(--rr-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--rr-signal-dim), var(--rr-signal-dim));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--rr-dur) var(--rr-ease), color var(--rr-dur) var(--rr-ease);
}
.rr-card.is-link:hover { border-color: var(--rr-signal-dim); transform: translateY(-2px); }
.rr-card.is-link:hover h3 a { color: var(--rr-signal-dim); background-size: 100% 1px; }
.rr-card.is-link h3 a:focus-visible { outline: 2px solid var(--rr-signal-dim); outline-offset: 3px; border-radius: 2px; }

/* A single button centred under a grid of cards. */
.rr-center-buttons { justify-content: center; margin-top: 36px; }


/* ==========================================================================
   12. NEWSLETTER STRIP + FINAL CTA
   ========================================================================== */

.rr-cta {
	text-align: center;
	color: var(--rr-on-dark);
	border-top: 1px solid var(--rr-line-dark);
	background:
		radial-gradient(ellipse 800px 400px at 50% 0%, rgba(62, 207, 126, 0.14) 0%, rgba(62, 207, 126, 0) 60%),
		linear-gradient(160deg, #14161A 0%, #191F1B 100%);
}
.rr-cta :is(h2, h3) { color: var(--rr-on-dark); max-width: 600px; margin-inline: auto; }
.rr-cta p { color: var(--rr-on-dark-soft); margin-top: 14px; }
.rr-cta .wp-block-buttons { justify-content: center; margin-top: 28px; }

.rr-newsletter form,
.rr-newsletter .wp-block-group { justify-content: center; }
.rr-newsletter input[type="email"],
.rr-newsletter input[type="text"] {
	padding: 13px 16px;
	border-radius: 4px;
	border: 1px solid var(--rr-line-dark);
	background: var(--rr-panel);
	color: var(--rr-on-dark);
	font-family: var(--rr-font-body);
	font-size: 14px;
	min-width: 260px;
}
.rr-newsletter input::placeholder { color: var(--rr-on-dark-soft); }


/* ==========================================================================
   13. BLOG
   ========================================================================== */

/* Category filter pills above the post grid. */
.rr-filter-bar {
	background: var(--rr-paper);
	border-bottom: 1px solid var(--rr-line);
	padding-block: 20px;
}
.rr-filter-bar ul,
.rr-filter-bar .wp-block-categories-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.rr-filter-bar li { margin: 0; }
.rr-filter-bar a,
.rr-pill {
	display: inline-block;
	font-family: var(--rr-font-mono);
	font-size: 12.5px;
	padding: 8px 16px;
	border-radius: var(--rr-radius-pill);
	border: 1px solid var(--rr-line-strong);
	color: var(--rr-ink-soft);
	text-decoration: none;
}
.rr-filter-bar a:hover,
.rr-filter-bar a:focus { border-color: var(--rr-signal-dim); color: var(--rr-signal-dim); }
.rr-filter-bar .current-cat > a,
.rr-pill.is-active { background: var(--rr-signal); border-color: var(--rr-signal); color: #fff; }

/* Query Loop wrappers — the block adds no styling of its own, these just
   stop the loop introducing extra vertical rhythm of its own. */
.rr-featured-query, .rr-post-grid { margin: 0; }
.rr-featured-query .wp-block-post-template { margin: 0; padding: 0; list-style: none; }

/* Icon sizes for the two placeholder tiles. */
.rr-featured .rr-featured-media.rr-i::before { width: 56px; height: 56px; background-size: 56px 56px; }
.rr-media-placeholder.rr-i::before { width: 34px; height: 34px; background-size: 34px 34px; }

/* Inline pill row (service page headers) — no band, light on dark. */
.rr-filter-bar.is-inline {
	background: transparent;
	border: 0;
	padding: 0;
	gap: 10px;
}
.rr-filter-bar.is-inline .rr-pill {
	color: var(--rr-signal);
	border-color: var(--rr-line-dark);
	margin: 0;
}

/* Post cards rendered by the Query Loop block. */
.rr-post-grid .wp-block-post {
	background: var(--rr-paper);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--rr-dur) var(--rr-ease), border-color var(--rr-dur) var(--rr-ease);
}
.rr-post-grid .wp-block-post:hover { transform: translateY(-3px); border-color: var(--rr-signal-dim); }
.rr-post-grid .wp-block-post > * { padding-inline: 22px; }
.rr-post-grid .wp-block-post > :first-child { padding-top: 22px; }
.rr-post-grid .wp-block-post > :last-child { padding-bottom: 22px; }
.rr-post-grid .wp-block-post-title { font-family: var(--rr-font-display); font-size: 16.5px; line-height: 1.3; margin: 10px 0 0; }
.rr-post-grid .wp-block-post-title a { text-decoration: none; color: var(--rr-ink); }
.rr-post-grid .wp-block-post-title a:hover { color: var(--rr-signal-dim); }
.rr-post-grid .wp-block-post-excerpt { font-size: 14px; color: var(--rr-ink-soft); }
.rr-post-grid .wp-block-post-terms,
.rr-post-grid .wp-block-post-date {
	font-family: var(--rr-font-mono);
	font-size: 11.5px;
	color: var(--rr-signal-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.rr-post-grid .wp-block-post-date { color: var(--rr-ink-soft); text-transform: none; letter-spacing: 0; }

/* Featured post — wide card at the top of the listing. */
.rr-featured {
	background: var(--rr-paper);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	overflow: hidden;
}
.rr-featured .rr-featured-media {
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rr-signal);
	background:
		radial-gradient(ellipse 400px 300px at 30% 20%, rgba(62, 207, 126, 0.35) 0%, rgba(62, 207, 126, 0) 70%),
		linear-gradient(150deg, #16181B 0%, #1C2620 100%);
}
.rr-featured .rr-featured-media .rr-icon { width: 56px; height: 56px; }
.rr-featured .rr-featured-body { padding: 36px; }
.rr-featured h2, .rr-featured h3 {
	font-family: var(--rr-font-display);
	font-size: 24px;
	line-height: 1.25;
	margin: 12px 0 0;
}

/* Placeholder tile shown where a featured image would go. Delete the class
   once real images are uploaded and the Featured Image block takes over. */
.rr-media-placeholder {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rr-signal);
	background: linear-gradient(150deg, #1C1F22 0%, #20302A 100%);
}
.rr-media-placeholder .rr-icon { width: 34px; height: 34px; }

.rr-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--rr-font-mono);
	font-size: 12px;
	color: var(--rr-ink-soft);
	margin-top: 20px;
}


/* ==========================================================================
   14. SINGLE POST — long-form reading
   ========================================================================== */

.single-post .entry-content { max-width: var(--rr-prose); font-size: var(--rr-text-md); }
.single-post .entry-content > p { margin-bottom: 22px; color: var(--rr-ink-prose); }
.single-post .entry-content > h2 { font-size: 23px; font-weight: 600; margin: 44px 0 16px; }
.single-post .entry-content > h3 { font-size: 18.5px; font-weight: 600; margin: 32px 0 12px; }
.single-post .entry-content li { margin-bottom: 10px; color: var(--rr-ink-prose); }
.single-post .entry-content li strong { color: var(--rr-ink); }

/* Block style: "Signal pull quote" */
.wp-block-quote.is-style-rr-pull {
	border: 0;
	border-left: 3px solid var(--rr-signal);
	padding: 6px 0 6px 22px;
	margin: 32px 0;
	font-family: var(--rr-font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--rr-ink);
	font-style: normal;
}

/* Block style: "Signal callout" — applied to a Group block. */
.rr-callout,
.wp-block-group.is-style-rr-callout {
	background: var(--rr-off-white);
	border: 1px solid var(--rr-line);
	border-radius: 8px;
	padding: 22px 24px;
	margin: 28px 0;
}
.rr-callout > p:first-child,
.wp-block-group.is-style-rr-callout > p:first-child {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-xs);
	color: var(--rr-signal-dim);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
}
.rr-callout > p:last-child { margin-bottom: 0; font-size: 15px; }

/* Image slot — marks where a photo belonged in a migrated post. Deliberately
   loud, so an unfinished post is obvious rather than quietly wrong. Delete the
   paragraph once a real Image block is in place. */
.rr-image-slot {
	font-family: var(--rr-font-mono);
	font-size: 12.5px;
	color: var(--rr-ink-soft);
	background: var(--rr-off-white);
	border: 1px dashed var(--rr-line-strong);
	border-radius: var(--rr-radius);
	padding: 18px 20px;
	margin: 24px 0;
	text-align: center;
}
.rr-image-slot::before { content: "\2610\00a0\00a0"; color: var(--rr-signal-dim); }

/* Code blocks in the JavaScript tutorials. */
.single-post .entry-content .wp-block-code {
	background: var(--rr-charcoal);
	color: var(--rr-on-dark);
	border: 1px solid var(--rr-line-dark);
	border-radius: var(--rr-radius);
	padding: 18px 20px;
	overflow-x: auto;
}
.single-post .entry-content .wp-block-code code {
	font-family: var(--rr-font-mono);
	font-size: 13px;
	line-height: 1.7;
	white-space: pre;
}

/* Data tables inside posts. */
.single-post .entry-content .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.single-post .entry-content .wp-block-table th {
	background: var(--rr-off-white);
	font-family: var(--rr-font-mono);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rr-ink-soft);
	text-align: left;
}
.single-post .entry-content .wp-block-table :is(th, td) {
	border: 1px solid var(--rr-line);
	padding: 10px 14px;
}

/* Author card at the foot of a post. */
.rr-author-card {
	margin-top: 40px;
	padding: 28px;
	background: var(--rr-off-white);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-lg);
}
.rr-author-card h3 { font-size: 15.5px; font-weight: 600; margin: 0; }
.rr-author-card .rr-role {
	font-family: var(--rr-font-mono);
	font-size: 11.5px;
	color: var(--rr-signal-dim);
	text-transform: uppercase;
	margin: 2px 0 0;
}
.rr-author-card p { font-size: 13.5px; color: var(--rr-ink-soft); }


/* ==========================================================================
   14a. SITE HEADER
   --------------------------------------------------------------------------
   The design calls for a dark header with a green-accented logo dot. Doing it
   in CSS rather than Customizer settings means it travels with the theme and
   survives a Customizer reset. Structure (what sits left/right) is still the
   Kadence header builder's job.
   ========================================================================== */

body.wp-child-theme-rajdeeproy-kadence .site-header-wrap,
body.wp-child-theme-rajdeeproy-kadence .site-main-header-wrap,
body.wp-child-theme-rajdeeproy-kadence .site-mobile-header-wrap,
body.wp-child-theme-rajdeeproy-kadence #mobile-drawer .drawer-inner,
body.wp-child-theme-rajdeeproy-kadence #masthead {
	background: var(--rr-charcoal);
	border-bottom: 1px solid var(--rr-line-dark);
}
.site-header-wrap .site-container { max-width: var(--rr-maxw); }

/* Site title / logo */
body.wp-child-theme-rajdeeproy-kadence .site-branding a,
body.wp-child-theme-rajdeeproy-kadence .site-mobile-header-wrap .site-title a,
body.wp-child-theme-rajdeeproy-kadence .site-title,
body.wp-child-theme-rajdeeproy-kadence .site-title a,
body.wp-child-theme-rajdeeproy-kadence .site-branding .site-title a {
	font-family: var(--rr-font-display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	color: var(--rr-on-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
body.wp-child-theme-rajdeeproy-kadence .site-title a::before,
body.wp-child-theme-rajdeeproy-kadence .site-title > span::before,
body.wp-child-theme-rajdeeproy-kadence .site-branding .site-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rr-signal);
	box-shadow: 0 0 8px var(--rr-signal);
	flex-shrink: 0;
}

/* Top-level navigation */
body.wp-child-theme-rajdeeproy-kadence .header-navigation .header-menu-container > ul > li > a,
body.wp-child-theme-rajdeeproy-kadence .main-navigation .primary-menu-container > ul > li > a {
	font-family: var(--rr-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--rr-on-dark-soft);
	transition: color var(--rr-dur) var(--rr-ease);
}
body.wp-child-theme-rajdeeproy-kadence .header-navigation .header-menu-container > ul > li > a:hover,
body.wp-child-theme-rajdeeproy-kadence .header-navigation .header-menu-container > ul > li > a:focus-visible,
body.wp-child-theme-rajdeeproy-kadence .header-navigation .header-menu-container > ul > li.current-menu-item > a,
body.wp-child-theme-rajdeeproy-kadence .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a {
	color: var(--rr-signal);
}

/* --- Dropdown ------------------------------------------------------------
   Kadence's default dropdown is ~200px wide, which truncates longer service
   names. Widened, and given a hairline and a real shadow so it separates from
   the page rather than blending into it. */
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.sub-menu,
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.submenu {
	background: var(--rr-panel);
	border: 1px solid var(--rr-line-dark);
	border-radius: var(--rr-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	padding: 6px;
	min-width: 288px;
	overflow: visible;
}
.header-navigation ul ul.sub-menu li { width: 100%; }
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.sub-menu li a {
	display: block;
	width: 100%;
	white-space: normal;      /* long service names wrap instead of clipping */
	line-height: 1.35;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--rr-on-dark-soft);
	border: 0;
	transition: background-color var(--rr-dur) var(--rr-ease), color var(--rr-dur) var(--rr-ease);
}
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.sub-menu li a:hover,
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.sub-menu li a:focus-visible,
body.wp-child-theme-rajdeeproy-kadence .header-navigation ul ul.sub-menu li.current-menu-item > a {
	background: var(--rr-signal-tint);
	color: var(--rr-signal);
}
/* The parent item keeps its highlight while the dropdown is open. */
.header-navigation li.menu-item-has-children:hover > a,
.header-navigation li.menu-item-has-children:focus-within > a { color: var(--rr-signal); }
/* Kadence's dropdown arrow */
.header-navigation .dropdown-nav-toggle svg,
.header-navigation .menu-item-has-children > a > .kadence-svg-iconset { color: currentColor; }

/* Header CTA button */
.site-header-item .header-button,
.site-header .kadence-button,
.header-navigation .header-button {
	background: var(--rr-signal);
	color: var(--rr-charcoal);
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 20px;
	border: 0;
}
.site-header-item .header-button:hover,
.header-navigation .header-button:hover {
	background: var(--rr-signal-dim);
	color: #fff;
}

/* Mobile drawer */
.mobile-navigation ul li a { color: var(--rr-on-dark-soft); font-size: 15px; }
.mobile-navigation ul li a:hover { color: var(--rr-signal); }
.mobile-toggle-open-container .menu-toggle-open { color: var(--rr-on-dark); }
#mobile-drawer .drawer-inner { background: var(--rr-charcoal); }

/* ==========================================================================
   14b. SITE FOOTER
   --------------------------------------------------------------------------
   Kadence builds the footer from its own rows and widget areas, so the markup
   is Kadence's. These rules dress it to match the design. Structure is edited
   in Appearance > Customize > Footer; the four columns are ordinary widget
   areas, so their contents are edited in Appearance > Widgets.
   ========================================================================== */

body.wp-child-theme-rajdeeproy-kadence .site-footer,
body.wp-child-theme-rajdeeproy-kadence .site-footer-wrap {
	background: var(--rr-charcoal);
	color: var(--rr-on-dark-soft);
}
.site-footer .site-container,
.site-footer .site-footer-row-container-inner { max-width: var(--rr-maxw); }

/* --- the four-column row --- */
.site-middle-footer-wrap {
	padding-block: 56px;
	border-bottom: 1px solid var(--rr-line-dark);
}
.site-footer .widget-title,
.site-footer .footer-widget-area h2,
.site-footer .footer-widget-area h3 {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rr-on-dark-soft);
	margin: 0 0 16px;
}

/* Identity column */
.rr-footer-identity .rr-footer-name {
	font-family: var(--rr-font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--rr-on-dark);
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
/* The logo dot, drawn rather than marked up. */
.rr-footer-identity .rr-footer-name::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rr-signal);
	box-shadow: 0 0 8px var(--rr-signal);
	flex-shrink: 0;
}
.rr-footer-identity p {
	font-size: 14px;
	color: var(--rr-on-dark-soft);
	max-width: 30ch;
	margin: 0 0 14px;
}
.rr-footer-identity a { color: var(--rr-signal); text-decoration: none; }
.rr-footer-identity a:hover { text-decoration: underline; }

/* --- footer menus --- */
.site-footer .menu,
.site-footer .footer-widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .menu li,
.site-footer .footer-widget-area li { margin: 0 0 10px; }
body.wp-child-theme-rajdeeproy-kadence .site-footer .menu a,
body.wp-child-theme-rajdeeproy-kadence .site-footer .footer-widget-area a {
	font-size: 14px;
	color: var(--rr-on-dark-soft);
	text-decoration: none;
	transition: color var(--rr-dur) var(--rr-ease);
}
body.wp-child-theme-rajdeeproy-kadence .site-footer .menu a:hover,
body.wp-child-theme-rajdeeproy-kadence .site-footer .menu a:focus-visible,
body.wp-child-theme-rajdeeproy-kadence .site-footer .footer-widget-area a:hover { color: var(--rr-signal); }

/* --- bottom bar --- */
.site-bottom-footer-wrap {
	padding-block: 22px;
	font-size: 13px;
	color: var(--rr-on-dark-soft);
}
.site-bottom-footer-wrap p { margin: 0; }
.rr-footer-legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	font-family: var(--rr-font-mono);
	font-size: 12px;
}
.rr-footer-legal a { color: var(--rr-on-dark-soft); text-decoration: none; }
.rr-footer-legal a:hover { color: var(--rr-signal); }

@media (max-width: 782px) {
	.site-middle-footer-wrap { padding-block: 40px; }
	.site-footer .footer-widget-area { margin-bottom: 28px; }
	.rr-footer-legal { justify-content: flex-start; gap: 12px; }
}

/* ==========================================================================
   15. BUTTONS — layered on top of Kadence's button styles
   ========================================================================== */

.wp-block-button.is-style-rr-primary .wp-block-button__link {
	background: var(--rr-signal);
	color: var(--rr-charcoal);
	border-radius: var(--rr-radius);
	padding: 14px 26px;
	font-weight: 600;
	font-size: var(--rr-base, 15px);
	border: 1px solid var(--rr-signal);
	transition: transform var(--rr-dur) var(--rr-ease), background-color var(--rr-dur) var(--rr-ease);
}
.wp-block-button.is-style-rr-primary .wp-block-button__link:hover,
.wp-block-button.is-style-rr-primary .wp-block-button__link:focus {
	transform: translateY(-1px);
	background: var(--rr-signal-dim);
	color: #fff;
}
.wp-block-button.is-style-rr-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--rr-line-dark);
	color: var(--rr-on-dark);
	border-radius: var(--rr-radius);
	padding: 14px 26px;
	font-weight: 500;
	font-size: 15px;
}
.wp-block-button.is-style-rr-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-rr-ghost .wp-block-button__link:focus {
	border-color: var(--rr-signal);
	color: var(--rr-signal);
}
/* Ghost button on a light background needs a light border and dark text. */
.rr-light .wp-block-button.is-style-rr-ghost .wp-block-button__link,
.rr-paper .wp-block-button.is-style-rr-ghost .wp-block-button__link {
	border-color: var(--rr-line-strong);
	color: var(--rr-ink);
}

/* Visible focus ring everywhere — required for accessibility. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--rr-signal-dim);
	outline-offset: 2px;
}


/* ==========================================================================
   16. RESPONSIVE
   --------------------------------------------------------------------------
   The gutter is a single token so every section, the header and the footer
   breathe consistently at each size. Changing --rr-gutter changes all of them.
   ========================================================================== */

@media (max-width: 1024px) {
	:root { --rr-section-y: 64px; }
}

@media (max-width: 900px) {
	.rr-hero { padding-block: 64px 48px; }
	.rr-avatar { margin-inline: auto; }

	/* The About page's stats block carries `is-not-stacked-on-mobile`, so core's
	   781px stacking rule never fires and the four columns kept splitting the
	   width right down to a single character per line. The old rule here only
	   swapped the borders — it assumed a reflow that never happened.
	   Force a 2x2 grid instead. The selector has to out-specify core's
	   `.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column`.
	   Gap goes to 0 because the hairline borders are the dividers. */
	.rr-stats-strip .wp-block-columns.is-not-stacked-on-mobile,
	.rr-stats-strip .wp-block-columns {
		/* `is-not-stacked-on-mobile` ships `flex-wrap: nowrap !important` in core,
		   so no amount of specificity wins here — it has to be !important back. */
		flex-wrap: wrap !important;
		gap: 0;
	}
	.rr-stats-strip .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column,
	.rr-stats-strip .wp-block-columns > .wp-block-column {
		flex-basis: 50% !important;
		flex-grow: 0;
		min-width: 0;
		padding: 20px 24px;
		border-right: 1px solid var(--rr-line-dark);
		border-bottom: 1px solid var(--rr-line-dark);
	}
	.rr-stats-strip .wp-block-columns > .wp-block-column:nth-child(2n) { border-right: 0; }
	.rr-stats-strip .wp-block-columns > .wp-block-column:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Below ~400px the 2x2 still beats stacking (measured: 308px tall vs 510px,
   with the numbers on one line either way) — it just needs tighter padding. */
@media (max-width: 400px) {
	.rr-stats-strip .wp-block-columns > .wp-block-column { padding: 16px 14px; }
	.rr-stats-strip .rr-stat-num { font-size: 24px; }
}

/* ---- Policy page banners ---------------------------------------------------
   The privacy/cookie plates are 1200x675 with their headline set into the art.
   Scaled to a 375px screen that type lands at roughly 5px and reads as
   illegible fine print. Nothing is lost — the page h1 and lede repeat it — so
   crop to the art panel on the right and drop the baked-in text entirely. */
@media (max-width: 767px) {
	.rr-policy-banner img {
		height: 190px;
		width: 100%;
		object-fit: cover;
		object-position: right center;
	}
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 782px) {
	:root {
		--rr-gutter: 20px;
		--rr-section-y: 48px;
		--rr-section-y-sm: 36px;
		--rr-h1-home: clamp(28px, 7.5vw, 40px);
		--rr-h1: clamp(26px, 7vw, 36px);
		--rr-h2: clamp(22px, 5.5vw, 28px);
	}

	.rr-section-head { margin-bottom: 28px; }
	.rr-step { padding-right: 0; }
	.rr-featured .rr-featured-body { padding: 24px; }
	.rr-info-panel { padding: 24px; }
	.rr-card { padding: 22px; }

	/* Stacked columns need their own vertical rhythm — the grid gap does not
	   apply once WordPress wraps them. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { margin-bottom: 20px; }
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child { margin-bottom: 0; }

	/* The hero status rail is decoration on a phone; it sits below the copy
	   rather than competing with it. */
	.rr-hero .wp-block-column[style*="flex-basis"] { flex-basis: 100% !important; }
	.rr-status-panel { margin-top: 8px; }

	/* Buttons go full width so they are comfortably tappable. */
	.rr-hero .wp-block-buttons .wp-block-button,
	.rr-cta .wp-block-buttons .wp-block-button,
	.rr-page-header .wp-block-buttons .wp-block-button { width: 100%; }
	.rr-hero .wp-block-button__link,
	.rr-cta .wp-block-button__link,
	.rr-page-header .wp-block-button__link { display: block; text-align: center; }

	/* The trust bar is set not-stacked so the three proof points stay on one
	   line on desktop; with icons in front of them that is far too tight on a
	   phone, so they stack here regardless. */
	body.wp-child-theme-rajdeeproy-kadence .rr-trust-bar .wp-block-columns {
		flex-wrap: wrap;
		gap: 14px;
		align-items: flex-start;
		justify-content: flex-start;
	}
	body.wp-child-theme-rajdeeproy-kadence .rr-trust-bar .wp-block-column {
		flex: 0 0 100%;
		margin-bottom: 0;
	}

	/* Checklist drops to one column. */
	.rr-checklist { grid-template-columns: 1fr; }

	/* Blog: one card per row, media placeholder shorter. */
	.rr-post-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
	.rr-media-placeholder { height: 110px; }
	.rr-featured .rr-featured-media { min-height: 160px; }

	/* Filter pills scroll horizontally instead of stacking into a tall wall. */
	.rr-filter-bar ul,
	.rr-filter-bar .wp-block-categories-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.rr-filter-bar ul::-webkit-scrollbar { display: none; }
	.rr-filter-bar li { flex: 0 0 auto; }

	/* Timeline pulls in so it does not eat the gutter. */
	.rr-timeline { padding-left: 20px; }
	.rr-timeline > li::before { left: -25px; }

	/* Long-form and tables. */
	.single-post .entry-content { font-size: 16px; }
	.wp-block-table { overflow-x: auto; display: block; }
	.wp-block-table table { min-width: 480px; }

	/* Footer columns stack with real separation. */
	body.wp-child-theme-rajdeeproy-kadence .site-footer .footer-widget-area { margin-bottom: 26px; }
	body.wp-child-theme-rajdeeproy-kadence .site-footer .footer-widget-area:last-child { margin-bottom: 0; }
	.site-middle-footer-wrap { padding-block: 36px; }
	.rr-footer-legal { justify-content: flex-start; gap: 10px; flex-direction: column; align-items: flex-start; }

	/* Booking embed should not reserve a screen and a half of empty space. */
	.rr-booking { min-height: 1010px; padding: 4px; }
	.rr-booking-fallback { padding: 22px; }
	/* Calendly stacks the month and the time list on a phone, so it needs the
	   taller frame; anything shorter scrolls inside its own iframe. */
	.rr-calendly,
	.rr-calendly .calendly-inline-widget,
	.rr-calendly iframe { min-height: 1000px; }
	.rr-calendly.is-fallback { min-height: 0; }
}

/* ---- Small phone ------------------------------------------------------- */
@media (max-width: 400px) {
	:root { --rr-gutter: 16px; }
	.rr-avatar { width: 180px; height: 180px; }
	.rr-avatar p { font-size: 52px; }
	.rr-stat-num { font-size: 32px; }
}

/* Every interactive target stays comfortably tappable. */
@media (pointer: coarse) {
	.rr-filter-bar a,
	.rr-pill,
	.site-footer .menu a,
	.rr-faq summary { min-height: 44px; display: flex; align-items: center; }
	.rr-faq summary { justify-content: space-between; }
}

/* Print: drop the decorative dark panels so the page is readable on paper. */
@media print {
	.rr-hero, .rr-page-header, .rr-dark, .rr-cta, .rr-trust-bar {
		background: none !important;
		color: #000 !important;
		border: 0;
	}
	.rr-hero::after, .rr-scanline, .rr-media-placeholder, .rr-booking { display: none !important; }
}