/* ==========================================================================
   SITEWIDE CONSISTENCY LAYER

   Loads last on every page (functions.php). A handful of properties the
   page stylesheets had each set differently -- heading weights, the accent
   green on light backgrounds, button corners -- restated once, so every page
   reads as the same site.

   Specificity: selectors carry :not(#rcn-ds), which matches everything but
   counts as an id. Several page sheets set these properties with class-level
   !important rules, and some of them load after this file; the id weight is
   what lets one rule here settle each property without depending on order.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Accent green on light backgrounds

   The brand green (#26d07c) is 1.91:1 on the cream page and 2.02:1 on white
   cards -- under the 3:1 WCAG AA asks even of large headings. On light
   sections the heading accent takes a deeper emerald instead: #139c57,
   3.37:1 on the page and 3.55:1 on white, still unmistakably the brand green.

   Light mode only; dark mode keeps #26d07c, which passes there. Left alone:
   h1s (the heroes sit on photographs and video, where the bright green is
   what reads), the dark CTA panels, and the sector-card titles, which set
   their own darker green over their photographs.
   -------------------------------------------------------------------------- */
html:not([data-theme="dark"]) #main-content :is(h2, h3):not(.sector-card-title):not(.inner-cta-box *):not([class*="cta-3col"] *) .accent:not(#rcn-ds) {
	color: #139c57 !important;
}

/* Small text needs 4.5:1, which the heading emerald does not reach, so the
   role labels (brand teal, 3.1:1) and the one accented body paragraph take
   darker shades of their own hue. */
html:not([data-theme="dark"]) #main-content .impact-card-desc .accent:not(#rcn-ds) {
	color: #007f76 !important; /* 4.88:1 */
}
html:not([data-theme="dark"]) #main-content #who-we-are p .accent:not(#rcn-ds) {
	color: #0b6b3c !important; /* 6.27:1 -- the shade the sector cards already use */
}


/* --------------------------------------------------------------------------
   2. Page titles

   Inner-page titles ran 54-72px at weights 600, 700 and 800 depending on the
   page. One treatment now: 700, tight tracking, and on desktop one size that
   scales with the window. Phones keep each page's own size, which was tuned
   to that title's length. The homepage hero keeps its own design.
   -------------------------------------------------------------------------- */
#main-content h1:not(.hero-title):not(#rcn-ds) {
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.08 !important;
}
@media (min-width: 1025px) {
	#main-content h1:not(.hero-title):not(#rcn-ds) {
		font-size: clamp(3rem, 4.4vw, 4rem) !important;
	}
}


/* --------------------------------------------------------------------------
   3. Section headings

   600 on Home, How We Work and the service pages; 800 on About, Our Team and
   Careers. 700 everywhere. Sizes are left alone -- they already sit in a
   narrow band and each was set against its own layout.
   -------------------------------------------------------------------------- */
#main-content h2:not(#rcn-ds) {
	font-weight: 700 !important;
	letter-spacing: -0.022em !important;
}


/* --------------------------------------------------------------------------
   4. Buttons

   The hero, sector-card and newsletter buttons were pills; "Contact Us",
   "Talk to Our Team", "Apply Today!" and the CTA-panel buttons had 8px
   corners, and the header button was 6px on some pages. All pills.
   -------------------------------------------------------------------------- */
:is(.btn-contact, .btn-hero, .btn-outline, .wp-block-button__link):not(#rcn-ds) {
	border-radius: 999px !important;
}


/* --------------------------------------------------------------------------
   5. Header on the service pages

   main.css pins the header (position: fixed) so it can hide on scroll down
   and come back on scroll up. The service-page stylesheets still carry an
   older rule that sets it to position: absolute, so on those pages it
   scrolled away with the page instead. Same header everywhere.
   -------------------------------------------------------------------------- */
.site-header:not(#rcn-ds) {
	position: fixed;
}


/* --------------------------------------------------------------------------
   6. CTA panel buttons

   One look for the button in every CTA panel -- the About page's: green-to-
   teal gradient, soft green glow, uppercase label and a trailing arrow. The
   About button is theme markup (a.btn-contact with an inline SVG); every
   other page's is an editor button (.wp-block-button__link), which came out
   flat green with a harder shadow and no arrow. The arrow is drawn with a
   CSS mask in currentColor, so it follows the label colour.

   The editor wrapper (.wp-block-button.btn-contact) also picks up the
   .btn-contact panel rules, so it is flattened to a plain container: the
   link inside is the button.
   -------------------------------------------------------------------------- */
:is(.inner-cta-box, [class*="cta-3col"]) .wp-block-button.btn-contact:not(#rcn-ds) {
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
}
:is(.inner-cta-box, [class*="cta-3col"]) .wp-block-button__link:not(#rcn-ds) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #26d07c 0%, #00a499 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 24px -8px rgba(38, 208, 124, 0.45) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
:is(.inner-cta-box, [class*="cta-3col"]) .wp-block-button__link:not(#rcn-ds)::after {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s ease;
}
:is(.inner-cta-box, [class*="cta-3col"]) .wp-block-button__link:not(#rcn-ds):hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -8px rgba(38, 208, 124, 0.55) !important;
}
:is(.inner-cta-box, [class*="cta-3col"]) .wp-block-button__link:not(#rcn-ds):hover::after {
	transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   7. Hero copy over photographs

   The How We Work and Careers heroes set their intro paragraph in regular-
   weight brand green straight onto the photo, and it disappeared into the
   busier parts of the image. It now matches the Our Team hero subtitle:
   the same green, bold, with that subtitle's soft shadow plus a tight one
   that holds the letter edges against light patches of the photo.
   -------------------------------------------------------------------------- */
:is(.hww-hero, .careers-hero) .page-hero-desc:not(#rcn-ds) {
	color: #26d07c !important;
	font-weight: 700 !important;
	font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
	line-height: 1.7 !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.7),
		0 2px 16px rgba(0, 0, 0, 0.55) !important;
}

/* Phones and tablets in portrait: the page sheets stack these heroes
   (max-width 900px, portrait), so the copy leaves the photo and sits on the
   page background. No shadow there. On the cream page the brand green is
   under 2:1, so light mode takes a deeper emerald (#0b7a44, 5.2:1); dark
   mode keeps the brand green, which passes on the dark page. */
@media (max-width: 900px) and (orientation: portrait) {
	:is(.hww-hero, .careers-hero) .page-hero-desc:not(#rcn-ds) {
		text-shadow: none !important;
		font-size: 1rem !important;
	}
	html:not([data-theme="dark"]) :is(.hww-hero, .careers-hero) .page-hero-desc:not(#rcn-ds) {
		color: #0b7a44 !important;
	}
}


/* --------------------------------------------------------------------------
   8. Header on tablets

   Up to 1200px the desktop nav is hidden and the hamburger shows. The header
   is a space-between row of logo, actions and hamburger, so with the nav
   gone the actions (region, theme, Contact Us) floated to the middle of the
   bar, well away from the menu button on an iPad. They now sit at the right
   beside the hamburger as one group.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.site-header .header-actions:not(#rcn-ds) {
		margin-left: auto;
		margin-right: clamp(12px, 1.8vw, 20px);
	}
}


/* --------------------------------------------------------------------------
   9. Chat assistant: links in replies, and room for five quick replies

   Replies now link to the page they are drawn from. The brand green is too
   pale on the white bubble for body-size text, so light mode uses the deep
   emerald the stacked hero copy uses (5.2:1).
   -------------------------------------------------------------------------- */
.chatbot-msg .chatbot-link:not(#rcn-ds) {
	color: #0b7a44;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
[data-theme="dark"] .chatbot-msg .chatbot-link:not(#rcn-ds) { color: #26d07c; }
.chatbot-msg .chatbot-link:not(#rcn-ds):hover { text-decoration-thickness: 2px; }
/* Quick replies: one row that scrolls sideways, fading at the right edge to
   show there is more, so five chips don't eat the conversation area. */
.chatbot-quick-replies:not(#rcn-ds) {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.chatbot-quick-replies:not(#rcn-ds)::-webkit-scrollbar { display: none; }
.chatbot-quick-replies:not(#rcn-ds) .chatbot-quick-btn { flex: 0 0 auto; white-space: nowrap; }


/* --------------------------------------------------------------------------
   10. Logo shimmer

   The logo used to be an animated GIF: 300px wide, 256 colours and hard-
   edged transparency, so it blurred on high-density screens. It is now a
   sharp 480px WebP, and the GIF's only motion -- a light sweeping across
   the mark every few seconds -- is redrawn here, masked to the logo's own
   shape. Scoped to the bundled logo so a Customizer logo is left alone.
   -------------------------------------------------------------------------- */
:is(.header-logo, .drawer-logo):has(img[src*="realcognita-logo-480"]) {
	position: relative;
}
:is(.header-logo, .drawer-logo):has(img[src*="realcognita-logo-480"])::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%) no-repeat;
	background-size: 250% 100%;
	-webkit-mask: url("../assets/logo/realcognita-logo-480.webp") left center / contain no-repeat;
	mask: url("../assets/logo/realcognita-logo-480.webp") left center / contain no-repeat;
	animation: rcn-logo-shimmer 5.7s ease-in-out infinite;
}
@keyframes rcn-logo-shimmer {
	0%, 12% { background-position: 130% 0; }
	45%, 100% { background-position: -30% 0; }
}
/* background-position repaints every frame; held while the page scrolls (js/main.js) */
html.is-scrolling :is(.header-logo, .drawer-logo)::after { animation-play-state: paused; }
/* No hover while the page is moving (js/main.js clears it 150ms after). The
   wheel still scrolls: with nothing under the cursor it goes to the page. */
html.is-scrolling body { pointer-events: none; }

/* The back-to-top progress ring: js/chatbot.js writes it once per frame, so
   a transition (main.css and the per-page sheets' copies) only restarted on
   every frame and repainted the SVG. */
.ring-progress:not(#rcn-ds) { transition: none; }
@media (prefers-reduced-motion: reduce) {
	:is(.header-logo, .drawer-logo)::after { animation: none; display: none; }
}

/* Light-wordmark logo where the background is dark: dark mode, and in light
   mode wherever the header sits transparent over a hero photo or video with
   white nav links -- the homepage at the top, and How We Work / Careers
   except in the stacked phone/tablet-portrait layout (the page sheets'
   own rule), where the header is on the cream page. Both images are in the
   markup; this shows one. */
.rcn-logo-light { display: none !important; }
[data-theme="dark"] .rcn-logo-ink,
.site-header:not(.light-header) .header-logo .rcn-logo-ink { display: none !important; }
[data-theme="dark"] .rcn-logo-light,
.site-header:not(.light-header) .header-logo .rcn-logo-light { display: block !important; }
@media not all and (max-width: 900px) and (orientation: portrait) {
	:is(.page-how-we-work:has(.hww-hero-media), .page-careers:has(.careers-hero-media)) .site-header:not(.scrolled-solid) .header-logo .rcn-logo-ink { display: none !important; }
	:is(.page-how-we-work:has(.hww-hero-media), .page-careers:has(.careers-hero-media)) .site-header:not(.scrolled-solid) .header-logo .rcn-logo-light { display: block !important; }
}


/* --------------------------------------------------------------------------
   11. Homepage hero video

   The video fades in once it is actually playing (js/main.js adds
   .is-playing), over the dark backdrop, instead of flashing in over black;
   playlist swaps fade out and back in the same way. .js-fade limits the
   hidden state to pages where the script ran.
   -------------------------------------------------------------------------- */
.hero-video-wrap:not(#rcn-ds) { background: radial-gradient(ellipse at 60% 40%, #1b2320 0%, #0a0d0c 70%); }
.hero-video.js-fade:not(#rcn-ds) { opacity: 0; transition: opacity 0.9s ease; }
.hero-video.js-fade.is-playing:not(#rcn-ds) { opacity: 1; }


/* --------------------------------------------------------------------------
   12. Splash screen: a quicker reveal (was 1.1s)
   -------------------------------------------------------------------------- */
.preloader:not(#rcn-ds) { transition: clip-path 0.65s cubic-bezier(.76, 0, .24, 1); }


/* --------------------------------------------------------------------------
   13. No hairlines between page sections

   Several page sheets drew a 1px border above and/or below alternate full-
   width sections (About Us, How We Work, Our Team, Careers, service-page
   FAQ and support blocks). The spacing and background shifts already
   separate the sections; the lines only cut across the page. The footer's
   own top edge is left as it is.
   -------------------------------------------------------------------------- */
#main-content :is(.hww-section, .wwa-capability, .wwa-models, .wwa-markets, [class*="wwa-"], .inner-section, .careers-section, .faq-section, .business-support-section):not(#rcn-ds),
#main-content > section:not(#rcn-ds) {
	border-top: 0 !important;
	border-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   14. Hidden for launch

   Sections the client asked to hide until their content is ready (How We
   Work: Case Studies and Testimonials). Add or remove the class under the
   block's Advanced > Additional CSS class(es) to bring a section back.
   -------------------------------------------------------------------------- */
.rcn-hide-for-launch:not(#rcn-ds) { display: none !important; }


/* --------------------------------------------------------------------------
   15. Sector links in the Services menu

   "Residential Services" / "Commercial Services" are links to the sector
   pages: hovering a tab still shows its services, clicking opens the page.
   An arrow slides in to say so. Same for the drawer's sector titles.
   -------------------------------------------------------------------------- */
a.sector-tab-btn:not(#rcn-ds) {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	text-decoration: none !important;
}
.sector-tab-arrow {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.sector-tab-btn:hover .sector-tab-arrow,
.sector-tab-btn.active .sector-tab-arrow { opacity: 1; transform: none; }
.sector-tab-btn:hover .sector-tab-arrow { transform: translateX(3px); }
a.drawer-sector-title:not(#rcn-ds) {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}
a.drawer-sector-title:not(#rcn-ds)::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   16. Single-link dropdowns

   A menu item with one child (Resources & Insights, now just News) opens a
   single feature card rather than a teaser beside a one-tile list, which
   said the same thing twice. The whole card is the link.
   -------------------------------------------------------------------------- */
.standard-dropdown.profile-dropdown-box.is-single {
	width: 470px !important;
	padding: 0.65rem !important;
}
.dropdown-feature {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 1.15rem;
	align-items: center;
	padding: 0.45rem;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
.dropdown-feature:hover { background-color: rgba(var(--ink-rgb), 0.035); }
.dropdown-feature-media {
	position: relative;
	display: block;
	height: 116px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--color-surface);
}
.dropdown-feature-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-feature:hover .dropdown-feature-media img { transform: scale(1.06); }
/* the same green hairline the other teasers draw in on hover */
.dropdown-feature-media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32%;
	height: 2px;
	background: linear-gradient(90deg, var(--color-accent), transparent);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-feature:hover .dropdown-feature-media::after { width: 100%; }
.dropdown-feature-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding-right: 0.5rem;
}
.dropdown-feature-title {
	color: var(--color-text);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.dropdown-feature-text {
	color: var(--color-text-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}
.dropdown-feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.35rem;
	color: var(--color-accent);
	font-size: 0.82rem;
	font-weight: 700;
}
.dropdown-feature-cta svg {
	width: 14px;
	height: 14px;
	transition: transform 0.3s ease;
}
.dropdown-feature:hover .dropdown-feature-cta svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.dropdown-feature-media img,
	.dropdown-feature-cta svg { transition: none; }
	.dropdown-feature:hover .dropdown-feature-media img,
	.dropdown-feature:hover .dropdown-feature-cta svg { transform: none; }
}


/* --------------------------------------------------------------------------
   17. No page scrollbar

   The page still scrolls (wheel, touch, keys, the back-to-top button); only
   the bar down the right edge is hidden. main.css styled it green with
   !important, so these carry the same weight. Scrolling panels inside the
   page (chat, mobile menu) keep their own thin bars.
   -------------------------------------------------------------------------- */
html:not(#rcn-ds) { scrollbar-width: none !important; }
html:not(#rcn-ds)::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}


/* --------------------------------------------------------------------------
   18. Gaps without inline styles

   The Spacer block writes style="height:..." into the page, and the AWS WAF
   in front of the site rejects editor saves whose content carries inline
   styles (its cross-site-scripting rule), which shows in the editor as
   "Updating failed. The response is not a valid JSON response." Gaps on
   the homepage are an empty group with this class instead.
   -------------------------------------------------------------------------- */
.wp-block-group.rcn-gap-40:not(#rcn-ds) {
	height: 40px;
	margin: 0;
	padding: 0;
}


/* --------------------------------------------------------------------------
   19. Cookie consent banner

   SEOPress (Analytics > Cookie banner) holds Google Analytics, Clarity and
   the Tag Manager snippet back until a visitor accepts. Its default bar ran
   the full width of the screen and covered the chat button; this restyles
   it as a floating card at the bottom left in the site's own language, and
   the "Cookie preferences" button as a small glass chip. The plugin's
   .seopress-user-consent-hide still hides both (display is left alone).
   -------------------------------------------------------------------------- */
.seopress-user-consent.seopress-user-message:not(#rcn-ds) {
	left: 20px;
	right: auto;
	bottom: 20px;
	width: min(520px, calc(100vw - 40px));
	max-width: none;
	flex-direction: column;
	align-items: stretch;
	gap: 1.1rem;
	padding: 1.4rem 1.5rem 1.5rem 4.6rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background:
		radial-gradient(circle at 0% 0%, rgba(38, 208, 124, 0.2), transparent 55%),
		rgba(14, 24, 27, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
	animation: rcn-consent-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the cookie mark */
.seopress-user-consent.seopress-user-message:not(#rcn-ds)::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: 1.4rem;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%202a10%2010%200%201%200%2010%2010%204%204%200%200%201-5-5%204%204%200%200%201-5-5%22/%3E%3Cpath%20d=%22M8.5%208.5v.01M16%2015.5v.01M12%2012v.01M11%2017v.01M7%2014v.01%22/%3E%3C/svg%3E") center / 20px no-repeat, linear-gradient(135deg, #26d07c, #00a499);
	box-shadow: 0 8px 18px -8px rgba(38, 208, 124, 0.8);
}
@keyframes rcn-consent-in { from { opacity: 0; transform: translateY(18px); } }
.seopress-user-consent.seopress-user-message:not(#rcn-ds) p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9rem;
	line-height: 1.6;
}
.seopress-user-consent.seopress-user-message:not(#rcn-ds) p:last-child {
	justify-content: flex-start;
	gap: 0.6rem;
}
.seopress-user-consent.seopress-user-message:not(#rcn-ds) a { color: #26d07c; font-weight: 600; }
.seopress-user-consent.seopress-user-message:not(#rcn-ds) button {
	min-width: 0;
	padding: 0.7rem 1.4rem;
	border-radius: 100px;
	font-size: 0.88rem;
	font-weight: 700;
}
.seopress-user-consent.seopress-user-message:not(#rcn-ds) #seopress-user-consent-accept {
	background: linear-gradient(135deg, #26d07c, #00a499);
	color: #04120b;
	box-shadow: 0 12px 26px -12px rgba(38, 208, 124, 0.8);
}
.seopress-user-consent.seopress-user-message:not(#rcn-ds) #seopress-user-consent-accept:hover { color: #ffffff; }
.seopress-user-consent.seopress-user-message:not(#rcn-ds) #seopress-user-consent-close {
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	background: transparent;
	color: #ffffff;
}
.seopress-user-consent.seopress-user-message:not(#rcn-ds) #seopress-user-consent-close:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
	background: rgba(255, 255, 255, 0.06);
}

/* "Cookie preferences": a quiet chip, not a second call to action */
.seopress-edit-choice:not(#rcn-ds) button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.45rem 0.85rem 0.45rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 100px;
	background: rgba(14, 24, 27, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.74rem;
	font-weight: 600;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
	opacity: 0.85;
}
.seopress-edit-choice:not(#rcn-ds) button::before {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2326d07c'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%202a10%2010%200%201%200%2010%2010%204%204%200%200%201-5-5%204%204%200%200%201-5-5%22/%3E%3Cpath%20d=%22M8.5%208.5v.01M16%2015.5v.01M12%2012v.01M11%2017v.01M7%2014v.01%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.seopress-edit-choice:not(#rcn-ds) button:hover {
	transform: none;
	opacity: 1;
	background: rgba(14, 24, 27, 0.9);
	color: #ffffff;
}

@media (max-width: 600px) {
	.seopress-user-consent.seopress-user-message:not(#rcn-ds) {
		left: 12px;
		bottom: 12px;
		width: calc(100vw - 24px);
		padding: 1.2rem 1.2rem 1.25rem;
	}
	.seopress-user-consent.seopress-user-message:not(#rcn-ds)::before { display: none; }
	.seopress-user-consent.seopress-user-message:not(#rcn-ds) p:first-child { text-align: left; }
	.seopress-edit-choice:not(#rcn-ds) { left: 12px !important; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.seopress-user-consent.seopress-user-message:not(#rcn-ds) { animation: none; }
}


/* --------------------------------------------------------------------------
   20. CTA banner ("Built Around the Way You Work" and the like)

   The shared closing banner on 25 pages. It was a flat slate box with the
   blueprint photo screen-blended over it at 15% -- which read as grey
   blotches. Now: a plain deep green-black panel, a
   larger headline with a gradient accent line, a hairline before the
   description and a bigger button with a light sweeping across it. The
   three parts rise in when the section reveals (.is-visible from main.js).
   Overrides the per-page rules, several of which carry !important.
   -------------------------------------------------------------------------- */
.inner-cta-box:not(#rcn-ds) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 5vw, 4rem) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 28px !important;
	background: linear-gradient(135deg, #11221f 0%, #0d1719 55%, #0b1416 100%) !important;
	box-shadow: 0 40px 80px -40px rgba(4, 18, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* no texture: the old blueprint photo layer is switched off on every page */
.inner-cta-box:not(#rcn-ds)::before {
	content: none !important;
	display: none !important;
}
/* no glow either: the panel is a plain dark gradient */
.inner-cta-box:not(#rcn-ds)::after {
	content: none !important;
	display: none !important;
}

/* ---- the three columns */
.inner-cta-box:not(#rcn-ds) .cta-3col {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto !important;
	gap: clamp(1.75rem, 4vw, 3rem) !important;
}
.inner-cta-box:not(#rcn-ds) .cta-3col__heading,
.inner-cta-box:not(#rcn-ds) .cta-3col__desc { padding-right: 0 !important; }
.inner-cta-box:not(#rcn-ds) :is(.cta-3col__heading, .inner-cta-box-content) h2 {
	margin: 0 !important;
	color: #ffffff !important;
	font-size: clamp(1.75rem, 2.7vw, 2.4rem) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
}
.inner-cta-box:not(#rcn-ds) :is(.cta-3col__heading, .inner-cta-box-content) h2 .accent {
	display: block;
	margin-top: 0.15em;
	background: linear-gradient(100deg, #26d07c 0%, #7ff0b6 55%, #26d07c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-size: inherit;
	font-weight: inherit;
}
.inner-cta-box:not(#rcn-ds) .cta-3col__desc {
	padding-left: clamp(1.5rem, 3vw, 2.5rem) !important;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.inner-cta-box:not(#rcn-ds) :is(.cta-3col__desc, .inner-cta-box-content) p {
	color: rgba(255, 255, 255, 0.74) !important;
	font-size: 1rem !important;
	line-height: 1.75 !important;
}

/* ---- the button: bigger, with a light sweeping across it */
.inner-cta-box:not(#rcn-ds) .wp-block-button__link {
	position: relative;
	overflow: hidden;
	padding: 16px 30px !important;
	font-size: 13.5px !important;
	letter-spacing: 0.06em !important;
	box-shadow: 0 16px 34px -14px rgba(38, 208, 124, 0.75) !important;
}
.inner-cta-box:not(#rcn-ds) .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: translateX(-150%) skewX(-20deg);
	animation: rcn-cta-sweep 4.5s ease-in-out infinite;
	pointer-events: none;
}
/* transform, not left: the GPU runs it, so it costs nothing while scrolling */
@keyframes rcn-cta-sweep {
	0%, 60% { transform: translateX(-150%) skewX(-20deg); }
	100%    { transform: translateX(325%) skewX(-20deg); }
}
.inner-cta-box:not(#rcn-ds) .wp-block-button__link:hover {
	box-shadow: 0 22px 44px -14px rgba(38, 208, 124, 0.9) !important;
}

/* ---- arrival */
.inner-cta.is-visible .inner-cta-box:not(#rcn-ds) :is(.cta-3col__heading, .cta-3col__desc, .cta-3col__action) {
	animation: rcn-cta-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.inner-cta.is-visible .inner-cta-box:not(#rcn-ds) .cta-3col__desc { animation-delay: 0.1s; }
.inner-cta.is-visible .inner-cta-box:not(#rcn-ds) .cta-3col__action { animation-delay: 0.2s; }
@keyframes rcn-cta-rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 900px) {
	.inner-cta-box:not(#rcn-ds) .cta-3col {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.4rem !important;
		text-align: left !important;
	}
	.inner-cta-box:not(#rcn-ds) .cta-3col__heading,
	.inner-cta-box:not(#rcn-ds) .cta-3col__desc { padding-bottom: 0 !important; }
	.inner-cta-box:not(#rcn-ds) .cta-3col__desc {
		padding-left: 0 !important;
		padding-top: 1.2rem !important;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.inner-cta-box:not(#rcn-ds) .cta-3col__action { justify-content: flex-start !important; }
}
@media (max-width: 560px) {
	.inner-cta-box:not(#rcn-ds) .cta-3col__action .wp-block-buttons,
	.inner-cta-box:not(#rcn-ds) .cta-3col__action .wp-block-button,
	.inner-cta-box:not(#rcn-ds) .cta-3col__action .wp-block-button__link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.inner-cta-box:not(#rcn-ds) .wp-block-button__link::before,
	.inner-cta.is-visible .inner-cta-box:not(#rcn-ds) :is(.cta-3col__heading, .cta-3col__desc, .cta-3col__action) { animation: none; }
}


/* --------------------------------------------------------------------------
   21. Legal pages (Privacy Policy, Cookie Policy, Terms of Service)

   The footer opens these in a dialog (css/policy-modal.css), but visitors
   from search land on the pages themselves, which had a full-screen hero
   and the text running edge to edge. Here they read as a document: a
   compact title band, then one centred column with spaced sections.
   The page hero's line is the page's Excerpt.
   -------------------------------------------------------------------------- */
.rcn-legal-page .page-hero:not(#rcn-ds) {
	height: auto !important;
	min-height: 0 !important;
	padding: clamp(8rem, 13vw, 10rem) 0 clamp(2rem, 4vw, 3rem) !important;
	border-bottom: 1px solid var(--color-border);
}
.rcn-legal-page .page-hero:not(#rcn-ds) .container {
	width: 100% !important;
	max-width: 820px !important;
	margin: 0 auto !important;
	padding: 0 24px !important; /* the same gutter as the text column */
}
.rcn-legal-page .page-hero:not(#rcn-ds) h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(2.3rem, 5vw, 3.4rem);
	letter-spacing: -0.035em;
}
.rcn-legal-page .page-hero:not(#rcn-ds) p {
	max-width: 60ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.rcn-legal-page .page-content-wrap:not(#rcn-ds) {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 3rem) 24px clamp(4rem, 8vw, 6rem);
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.8;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) h2 {
	margin: 2.4rem 0 0.8rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) p { margin: 0 0 1rem; }
.rcn-legal-page .page-content-wrap:not(#rcn-ds) ul {
	margin: 0 0 1.2rem;
	padding-left: 1.25rem;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) li { margin: 0 0 0.45rem; padding-left: 0.25rem; }
.rcn-legal-page .page-content-wrap:not(#rcn-ds) li::marker { color: var(--color-accent); }
.rcn-legal-page .page-content-wrap:not(#rcn-ds) strong { color: var(--color-text); }
.rcn-legal-page .page-content-wrap:not(#rcn-ds) a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) .policy-lead {
	color: var(--color-text);
	font-size: 1.15rem;
	line-height: 1.7;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) .policy-updated {
	margin-bottom: 1.4rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}
.rcn-legal-page .page-content-wrap:not(#rcn-ds) .policy-note {
	margin-top: 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(var(--color-accent-rgb), 0.35);
	border-radius: 12px;
	background: rgba(var(--color-accent-rgb), 0.06);
}