/*
Theme Name: Ros&Ros In-Store Media
Theme URI: https://rosandros.it
Author: Ros&Ros
Author URI: https://rosandros.it
Description: Tema custom Elementor-ready che riproduce fedelmente la homepage Ros&Ros In-Store Media. Ogni sezione della home è costruita con widget Elementor nativi e stilizzata tramite le classi .rr-* di questo foglio.
Version: 1.12.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rosros
*/

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root {
	--rr-purple:        #7C3AED;
	--rr-purple-2:      #9B4DFF;
	--rr-purple-deep:   #6D28D9;
	--rr-eyebrow:       #8C52FF;
	--rr-cyan:          #22D3EE;

	--rr-grad-btn:      linear-gradient(90deg, #7A2BFB 0%, #A855F7 100%);
	--rr-grad-btn-h:    linear-gradient(90deg, #6D1FF0 0%, #9B45F0 100%);
	--rr-grad-text:     linear-gradient(90deg, #8B5CF6 0%, #22D3EE 100%);
	--rr-grad-logo:     linear-gradient(90deg, #B14AE8 0%, #6E7BF0 50%, #22C7E0 100%);

	--rr-dark:          #0A0A10;
	--rr-dark-2:        #0E0E15;
	--rr-dark-card:     #14141C;
	--rr-footer:        #0A0A0A;

	--rr-ink:           #17171F;
	--rr-ink-soft:      #2A2A33;
	--rr-body:          #5F5F6B;
	--rr-body-light:    #C7C7D2;

	--rr-light:         #F6F6F7;
	--rr-lavender:      #F5F0FD;
	--rr-lavender-2:    #EBE2F7;
	--rr-icon-bg:       #EFE8FB;
	--rr-badge-ring:    #C9BAFB;
	--rr-purple-soft:   #8B5CF6;
	--rr-card-border:   #ECEAF1;
	--rr-hairline:      #E6E4EC;

	/* Home page type scale — 4 sizes, everything else on the page snaps to
	   the nearest one instead of picking its own arbitrary value. */
	--rr-fs-xs: 13px;
	--rr-fs-s:  15px;
	--rr-fs-m:  20px;
	--rr-fs-l:  37px;

	--rr-radius:        20px;
	--rr-radius-lg:     28px;

	/* Shape of the "Cosa Facciamo" card photo: rounded rectangle with a stepped
	   notch cut out of the top-right corner and a wide shallow notch at the
	   bottom-left where the badge nests. The 299x257 viewBox is stretched over
	   the image box (mask-size:100% 100%), so the numbers are "at desktop size".
	   Edit it visually with build/card-mask.html — it regenerates this line. */
	--rr-card-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 305 257' preserveAspectRatio='none'%3E%3Cpath d='M0 0H249C253.42 0 257 3.58 257 8V41C257 47.63 262.37 53 269 53H297C301.42 53 305 56.58 305 61V257C305 257 305 257 305 257H97C97 242.7 90.4 231 75 231H18C8.06 231 0 222.94 0 213V0C0 0 0 0 0 0Z' fill='%23000'/%3E%3C/svg%3E");
	--rr-shadow-card:   0 18px 40px -24px rgba(23, 20, 40, .28);
	/* Shape of the "Perché funziona" photo: two rounded blocks, the right one
	   dropped 53px, unioned with soft S-joins (Changes-3 mockup). */
	--rr-shot-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 610 509' preserveAspectRatio='none'%3E%3Cpath d='M28 0H243C271 0 270 53 298 53H582C597.4644 53 610 65.5356 610 81V481C610 496.4644 597.4644 509 582 509H298C270 509 271 471 243 471H28C12.535599999999999 471 0 458.4644 0 443V28C0 12.535599999999999 12.535599999999999 0 28 0Z' fill='%23000'/%3E%3C/svg%3E");
	/* Faint fan of lines decorating the right half of the light CTA banner. */
	--rr-cta-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 122' preserveAspectRatio='none' fill='none' stroke='%23B9A6E8' stroke-width='0.7' opacity='0.45'%3E%3Cpath d='M30 122 C150 78 330 16.0 700 4.0'/%3E%3Cpath d='M43 122 C159 75 346 15.5 700 10.5'/%3E%3Cpath d='M56 122 C168 72 362 15.0 700 17.0'/%3E%3Cpath d='M69 122 C177 69 378 14.5 700 23.5'/%3E%3Cpath d='M82 122 C186 66 394 14.0 700 30.0'/%3E%3Cpath d='M95 122 C195 63 410 13.5 700 36.5'/%3E%3Cpath d='M108 122 C204 60 426 13.0 700 43.0'/%3E%3Cpath d='M121 122 C213 57 442 12.5 700 49.5'/%3E%3Cpath d='M134 122 C222 54 458 12.0 700 56.0'/%3E%3Cpath d='M147 122 C231 51 474 11.5 700 62.5'/%3E%3Cpath d='M160 122 C240 48 490 11.0 700 69.0'/%3E%3Cpath d='M173 122 C249 45 506 10.5 700 75.5'/%3E%3Cpath d='M186 122 C258 42 522 10.0 700 82.0'/%3E%3Cpath d='M199 122 C267 39 538 9.5 700 88.5'/%3E%3Cpath d='M212 122 C276 36 554 9.0 700 95.0'/%3E%3Cpath d='M225 122 C285 33 570 8.5 700 101.5'/%3E%3Cpath d='M238 122 C294 30 586 8.0 700 108.0'/%3E%3C/svg%3E");

	/* The mockups use Inter for headings too (not Sora) — the whole design is Inter. */
	--rr-font-display:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--rr-font-body:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   BASE
   ========================================================================= */
body {
	font-family: var(--rr-font-body);
	color: var(--rr-ink);
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-osx-font-smoothing: grayscale;
}

/* Fallback container cap; each section's own content_width (generated into
   post-10.css) takes precedence, so widths can be tuned per section. */
.elementor-section-boxed > .elementor-container {
	max-width: 1290px;
}

.rr-fallback { max-width: 800px; margin: 60px auto; padding: 0 20px; }

/* Section vertical rhythm (overridable per-section in Elementor) */
.rr-sec { padding-top: 96px; padding-bottom: 96px; }
.rr-sec--tight { padding-top: 64px; padding-bottom: 64px; }

/* =========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================= */
.rr-eyebrow .elementor-heading-title,
.rr-eyebrow { }
.rr-eyebrow .elementor-heading-title,
.rr-eyebrow p,
.rr-eyebrow {
	font-family: var(--rr-font-body);
	font-weight: 700;
	font-size: var(--rr-fs-xs);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rr-eyebrow);
	margin: 0;
}
/* eyebrow with the little underline dash (this Elementor build emits no
   .elementor-widget-container, so the pseudo-element must sit on the widget) */
.rr-eyebrow--dash::after,
.rr-eyebrow--dash .elementor-widget-container::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: var(--rr-purple);
	margin-top: 14px;
}

.rr-h1 .elementor-heading-title,
.rr-h1 {
	font-family: var(--rr-font-display);
	font-weight: 700;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: var(--rr-ink);
	margin: 0;
}
.rr-h2 .elementor-heading-title,
.rr-h2 {
	/* Mockup section headings use a neutral humanist sans (Inter), NOT Sora.
	   !important because the Kit forces Sora 700 and loads after this sheet. */
	font-family: var(--rr-font-body) !important;
	font-weight: 600 !important;
	font-size: var(--rr-fs-l) !important;
	line-height: 1.19 !important;
	letter-spacing: -0.8px !important;
	color: var(--rr-ink);
	margin: 0;
}
.rr-h3 .elementor-heading-title {
	font-family: var(--rr-font-display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.25;
	color: var(--rr-ink);
	margin: 0;
}
.rr-on-dark .elementor-heading-title,
.rr-white .elementor-heading-title { color: #ffffff !important; }

.rr-lead .elementor-widget-container,
.rr-lead {
	font-family: var(--rr-font-body);
	font-size: 14.5px;
	line-height: 24px;
	color: var(--rr-body);
	max-width: 430px;
}
.rr-lead p, .rr-body p { margin: 0; }
.rr-lead.rr-on-dark .elementor-widget-container,
.rr-lead.rr-on-dark { color: var(--rr-body-light) !important; }

.rr-body .elementor-widget-container {
	font-size: var(--rr-fs-s);
	line-height: 1.62;
	color: var(--rr-body);
}
.rr-body.rr-on-dark .elementor-widget-container { color: #B9B9C6; }

/* Gradient accent text (span.rr-g or whole heading) */
.rr-g,
.rr-grad .elementor-heading-title {
	background: var(--rr-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
/* solid purple accent word */
.rr-p { color: var(--rr-purple); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.rr-btn .elementor-button,
.rr-btn a.elementor-button {
	background: var(--rr-grad-btn) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 40px !important;
	font-family: var(--rr-font-body) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: .1px;
	padding: 16px 30px !important;
	box-shadow: 0 14px 26px -12px rgba(124, 58, 237, .6);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rr-btn .elementor-button:hover {
	background: var(--rr-grad-btn-h) !important;
	transform: translateY(-2px);
}
.rr-btn .elementor-button .elementor-button-icon { margin-inline-start: 10px; }

/* Outline gradient pill (header CTA) */
.rr-btn-outline .elementor-button {
	background: transparent !important;
	color: #fff !important;
	border: 1.5px solid transparent !important;
	border-radius: 40px !important;
	font-family: var(--rr-font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 12px 22px !important;
	background-image: linear-gradient(#0a0a12, #0a0a12), var(--rr-grad-btn) !important;
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
	box-shadow: none !important;
	transition: transform .2s ease;
}
.rr-btn-outline .elementor-button:hover { transform: translateY(-2px); }
.rr-header .rr-btn-outline .elementor-button { white-space: nowrap; }
.rr-btn-outline .elementor-button-icon { margin-inline-start: 8px; }

/* Text link with arrow + underline (Scopri le soluzioni) */
.rr-link-arrow a,
.rr-link-arrow .elementor-button {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 15px;
	color: #fff !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* underline sits under the label only; the arrow is separated to the right */
.rr-link-arrow .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 16px; }
.rr-link-arrow .elementor-button-text { border-bottom: 2px solid var(--rr-purple); padding-bottom: 5px; }
.rr-link-arrow.rr-link-dark a,
.rr-link-arrow.rr-link-dark .elementor-button { color: var(--rr-ink) !important; }

/* small purple "Scopri di più" link */
.rr-link-mini a,
.rr-link-mini .elementor-button {
	display: inline-flex; align-items: center;
	color: var(--rr-purple) !important;
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 0 !important; font-weight: 600; font-size: 13px;
}
.rr-link-mini .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; }
/* diagonal ↗ arrow (Elementor renders it as an inline SVG whose fill the Kit
   forces to #fff — invisible on the white card, hence the override) */
.rr-link-mini .elementor-button-icon { transform: rotate(-45deg); font-size: 12px; }
.rr-link-mini .elementor-button-icon svg { fill: var(--rr-purple) !important; }

/* =========================================================================
   HEADER (built as an Elementor section)
   ========================================================================= */
.rr-header {
	position: absolute !important;
	top: 0; left: 0; right: 0;
	z-index: 50;
	padding-top: 26px !important;
	padding-bottom: 26px !important;
	background: transparent;
}
.rr-header > .elementor-container { align-items: center; }
/* logo flush with the container edge, like the hero copy below it */
.rr-header > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { padding-left: 0 !important; }
.rr-header .rr-logo { text-align: left; }
.rr-header .rr-logo img { height: 52px; width: auto; }
/* Header nav = real WP menu (wp_nav_menu) via [rr_menu] shortcode. */
.rr-nav .elementor-widget-container { display: flex; justify-content: center; }
.rr-nav .rr-menu { width: 100%; }
.rr-nav-toggle { display: none; } /* shown only in the mobile breakpoint below */
.rr-nav .rr-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
}
.rr-nav .rr-menu-list > li { position: relative; }
.rr-nav .rr-menu-list a {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	opacity: .92;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}
.rr-nav .rr-menu-list a:hover { opacity: 1; }
/* caret indicator on items that have a dropdown — outline chevron */
.rr-nav .rr-menu-list .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
	opacity: .85;
	margin-left: 9px;
}
/* dropdown submenu */
.rr-nav .rr-menu-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 214px;
	background: var(--rr-dark-card);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 12px;
	box-shadow: 0 22px 50px rgba(0,0,0,.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
	z-index: 60;
}
/* invisible bridge so the pointer can travel from item to submenu */
.rr-nav .rr-menu-list .menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 14px;
}
.rr-nav .rr-menu-list .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; }
.rr-nav .rr-menu-list .sub-menu li { display: block; }
.rr-nav .rr-menu-list .sub-menu a {
	display: block;
	padding: 9px 20px;
	font-size: 14px;
	font-weight: 400;
	opacity: .82;
	white-space: nowrap;
}
.rr-nav .rr-menu-list .sub-menu a::after { content: none; }
.rr-nav .rr-menu-list .sub-menu a:hover { opacity: 1; background: rgba(255,255,255,.05); }
.rr-header-divider .elementor-widget-container {
	border-left: 1px solid rgba(255,255,255,.22);
	height: 26px;
}
/* thin vertical divider between the nav and the outline button (as in mockup) */
.rr-header .rr-btn-outline { position: relative; }
.rr-header .rr-btn-outline::before,
.rr-header .rr-btn-outline .elementor-widget-container::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 26px;
	background: rgba(255,255,255,.22);
}

/* =========================================================================
   HERO
   ========================================================================= */
.rr-hero {
	position: relative;
	background-color: var(--rr-dark);
	overflow: hidden;
	min-height: 720px;
	padding-top: 178px !important;
	padding-bottom: 120px !important;
}
.rr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(46% 70% at 4% 55%, rgba(108,66,214,.10) 0%, rgba(108,66,214,0) 58%),
		linear-gradient(90deg, #07060C 0%, rgba(7,6,12,.95) 32%, rgba(8,8,14,.55) 56%, rgba(8,8,14,0) 80%),
		linear-gradient(180deg, rgba(5,5,10,.55) 0%, rgba(5,5,10,0) 32%);
}
.rr-hero > .elementor-container { position: relative; z-index: 2; }
/* align hero content flush to the container edge (match mockup left margin) */
.rr-hero > .elementor-container > .elementor-column:first-child,
.rr-hero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
	padding-left: 0 !important;
}
.rr-hero-title .elementor-heading-title {
	/* !important: the branded Kit sets Sora 700 on headings at equal specificity
	   but loads after this sheet, so plain values would lose. */
	font-family: var(--rr-font-display) !important;
	font-weight: 600 !important;
	font-size: 42px !important;
	line-height: 1.13 !important;
	letter-spacing: -0.5px !important;
	color: #fff;
	margin: 18px 0 22px;
	max-width: 720px;
}
/* This Elementor build emits no .elementor-widget-container — the <p> is a
   direct child of the widget, which carries the rr-hero-body class. */
.rr-hero-body,
.rr-hero-body p {
	font-size: 16px;
	line-height: 1.62;
}

/* =========================================================================
   PARTNER STRIP
   ========================================================================= */
.rr-partners { background:#fff; padding-top: 46px !important; padding-bottom: 56px !important; }
.rr-partners-label .elementor-heading-title {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #9A9AA6;
	margin-bottom: 34px;
}
/* Client logos scroll on a loop: the track holds the list twice and slides by
   exactly one copy (-50%). The logo files are pre-balanced on a same-height
   transparent canvas, so one height fits all. Hover pauses; reduced-motion
   users get a static, wrapped grid instead. */
.rr-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.rr-marquee-track { display: flex; width: max-content; animation: rr-marquee 55s linear infinite; }
.rr-marquee:hover .rr-marquee-track { animation-play-state: paused; }
@keyframes rr-marquee { to { transform: translateX(-50%); } }
.rr-logos-row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.rr-logos-row li { display: flex; align-items: center; padding: 0 34px; border-right: 1px solid var(--rr-hairline); }
.rr-marquee .rr-logos-row img { display: block; height: 60px; width: auto; max-width: none; filter: grayscale(1); opacity: .72; }
@media (prefers-reduced-motion: reduce) {
	.rr-marquee { -webkit-mask-image: none; mask-image: none; }
	.rr-marquee-track { animation: none; width: auto; }
	.rr-logos-row { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
	.rr-logos-row[aria-hidden] { display: none; }
	.rr-logos-row li { border-right: 0; padding: 0 18px; }
}

/* =========================================================================
   LIGHT SECTIONS (Cosa Facciamo, Retail Media, Assistenza)
   ========================================================================= */
.rr-light { background: var(--rr-light); }

/* Card grids — equal-height columns with real gaps between the cards.
   !important: Elementor's own `.elementor-section .elementor-container{display:flex}`
   has the same specificity but loads AFTER this sheet, so it would win. */
.rr-cards > .elementor-container,
.rr-rcards > .elementor-container {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 21px;
	align-items: stretch;
}
.rr-cards > .elementor-container > .elementor-column,
.rr-rcards > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Cosa Facciamo — header rhythm (gaps measured off the mockup: 22px between
   the eyebrow and the H2 ink, 39px between the H2 and the lead) */
.rr-cosa .rr-eyebrow { margin-bottom: 13px !important; }
.rr-cosa .rr-h2 { margin-bottom: 25px !important; }

/* Cosa Facciamo cards — the photo is full-bleed (it IS the top of the card),
   so the card itself carries no side padding: the text widgets pad themselves. */
.rr-card {
	background:#fff;
	border:1px solid var(--rr-card-border);
	border-radius: var(--rr-radius);
	box-shadow: var(--rr-shadow-card);
	padding: 0 0 27px;
	height: 100%;
}
.rr-card > .elementor-widget-wrap { padding: 0 !important; display: flex; flex-direction: column; height: 100%; }
.rr-card > .elementor-widget-wrap > .elementor-widget:not(.rr-card-img) {
	padding-left: 18px;
	padding-right: 18px;
}
/* badges sit on the left, aligned with the title, dropped into the image notch */
.rr-card-badge, .rr-card-badge .elementor-widget-container,
.rr-rbadge, .rr-rbadge .elementor-widget-container { text-align: left; }
.rr-card-img { margin: 0 !important; line-height: 0; }
.rr-card-img img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 263px !important;
	object-fit: cover;
	border-radius: 20px 20px 20px 20px !important;
	-webkit-mask-image: var(--rr-card-mask);
	mask-image: var(--rr-card-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* badge sits in the bottom-left notch, aligned with the text column */
.rr-card-badge, .rr-card-badge .elementor-icon-wrapper { text-align: left !important; }
.rr-card-badge {
	margin-top: -16px !important;
	margin-bottom: 15px !important;
	position: relative;
	z-index: 2;
	line-height: 0;
}
.rr-badge .elementor-icon {
	width: 50px; height: 50px;
	background: transparent !important;
	border: 1px solid var(--rr-badge-ring) !important;
	border-radius: 50%;
	display: inline-flex; align-items:center; justify-content:center;
	color: var(--rr-purple-soft) !important;
	font-size: 21px;
}
.rr-badge .elementor-icon i,
.rr-badge .elementor-icon svg { color: var(--rr-purple-soft) !important; fill: var(--rr-purple-soft) !important; width:24px; height:24px; }
/* Cosa Facciamo badges use uploaded outline SVGs: they must keep their own
   stroke rendering, so the icon colour is driven by currentColor, not fill. */
.rr-card-badge .elementor-icon svg {
	width: 26px; height: 26px;
	fill: none !important;
	stroke: currentColor;
	color: var(--rr-purple-soft) !important;
	overflow: visible;
}

.rr-card-title { margin-bottom: 12px !important; }
.rr-card-title .elementor-heading-title { font-family: var(--rr-font-body) !important; font-size: var(--rr-fs-m); font-weight: 600 !important; margin: 0; color: var(--rr-ink) !important; letter-spacing: -0.2px; }
.rr-card-text { margin-bottom: 23px !important; }
.rr-card-text, .rr-card-text p { font-size: var(--rr-fs-xs); line-height: 20px; color: var(--rr-body); }
.rr-card-text p { margin: 0; }
/* pins "Scopri di più" flush to the card bottom regardless of description length */
.rr-card .rr-link-mini { margin-bottom: 0 !important; margin-top: auto; }

/* =========================================================================
   PERCHÉ FUNZIONA
   ========================================================================= */
.rr-perche { background:#fff; }
.rr-ctasec { background:#fff; }
/* photo runs edge to edge in its column; the text column keeps the mockup's
   ~56px gutter from the photo */
.rr-perche > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { padding: 0 !important; }
@media (min-width: 1025px) {
	.rr-perche > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap { padding-left: 56px; }
}
.rr-shot {
	margin: 10px 0 0 !important;
	line-height: 0;
	/* drop-shadow (not box-shadow) so the halo follows the masked outline */
	filter: drop-shadow(0 26px 34px rgba(23, 20, 40, .16));
}
.rr-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 610 / 509;
	height: auto;
	object-fit: cover;
	border-radius: 28px;
	-webkit-mask-image: var(--rr-shot-mask);
	mask-image: var(--rr-shot-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* header rhythm of the right column (gaps measured off the Changes-3 mockup) */
.rr-perche .rr-eyebrow { margin-bottom: 27px !important; }
.rr-perche .rr-h2 { margin-bottom: 15px !important; }
.rr-perche-sub { margin-bottom: 27px !important; }
.rr-perche-sub .elementor-widget-container,
.rr-perche-sub {
	font-size: var(--rr-fs-s);
	line-height: 26px;
	background: linear-gradient(90deg, #9CA0C4 0%, #C9B7E6 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	max-width: 540px;
}
.rr-perche-sub p { margin: 0; }

/* Icon-box feature rows */
.rr-feature { }
.rr-feature .elementor-icon-box-wrapper { display: flex; text-align: left; gap: 18px; align-items: flex-start; }
.rr-feature .elementor-icon-box-icon { margin: 0; flex: 0 0 auto; }
.rr-feature .elementor-icon-box-icon .elementor-icon {
	width: 58px; height: 58px;
	background: var(--rr-icon-bg);
	border-radius: 50%;
	display: inline-flex; align-items:center; justify-content:center;
	color: var(--rr-purple);
	font-size: 22px;
	border: 0;
}
.rr-feature .elementor-icon-box-icon .elementor-icon i,
.rr-feature .elementor-icon-box-icon .elementor-icon svg { color: var(--rr-purple); fill: var(--rr-purple); width:24px;height:24px; }
.rr-feature .elementor-icon-box-title { font-family: var(--rr-font-display); font-size: 18px; font-weight: 600; margin: 2px 0 7px; }
/* Perché funziona: bigger badge + outline SVG icon, tighter rows (mockup) */
.rr-perche .rr-feature { margin-bottom: 0 !important; }
.rr-perche .rr-feature .elementor-icon-box-wrapper { align-items: center; }
.rr-perche .rr-feature .elementor-icon-box-icon { margin-right: 25px; }
.rr-perche .rr-feature .elementor-icon-box-icon .elementor-icon { width: 73px; height: 73px; }
.rr-perche .rr-feature .elementor-icon-box-icon .elementor-icon svg {
	width: 34px; height: 34px;
	fill: none !important;
	stroke: currentColor;
	color: var(--rr-purple-soft);
}
.rr-perche .rr-feature .elementor-icon-box-title { font-size: var(--rr-fs-m); margin: 0 0 3px; letter-spacing: -0.2px; }
.rr-perche .rr-feature .elementor-icon-box-description { font-size: var(--rr-fs-xs); line-height: 23px; max-width: 310px; }
.rr-perche .rr-fdiv { margin: 0 !important; }
.rr-perche .rr-fdiv .elementor-divider { padding-block: 17px; }
.rr-feature .elementor-icon-box-title a { color: var(--rr-ink); }
.rr-feature .elementor-icon-box-description { font-size: 14.5px; line-height: 1.55; color: var(--rr-body); margin: 0; }
.rr-feature.rr-on-dark .elementor-icon-box-title a { color:#fff; }
.rr-feature.rr-on-dark .elementor-icon-box-description { color:#B9B9C6; }
/* dashed underline variant under feature titles (retail media) */
.rr-feature--dash .elementor-icon-box-title::after {
	content:""; display:block; width:26px; height:3px; border-radius:3px;
	background: var(--rr-purple); margin-top:9px;
}

/* =========================================================================
   STATS BAR (white bordered card)
   ========================================================================= */
.rr-statcard > .elementor-container {
	background:#fff;
	border:1px solid var(--rr-card-border);
	border-radius: var(--rr-radius);
	/* box-shadow: var(--rr-shadow-card); */
	padding: 30px 50px;
	align-items: center;
}
.rr-statcard > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-block: 0 !important; }
.rr-statcard--lav > .elementor-container {
	background: var(--rr-lavender);
	border:1px solid #ECE3FA;
	box-shadow: none;
}
.rr-statcard--lav .rr-stat-ico .elementor-icon { background:#fff; }
/* leading label cell "Affidabilità che si vede" */
.rr-statlead .elementor-widget-container { display:flex; align-items:center; gap:16px; }
.rr-statlead .elementor-heading-title { font-family:var(--rr-font-display); font-size:18px; font-weight:600; color:var(--rr-ink); line-height:1.25; margin:0; }
.rr-stat .elementor-widget-container { display:flex; align-items:center; gap:18px; padding: 4px 10px; }
.rr-stat-ico .elementor-icon {
	width:64px;height:64px;border-radius:50%;
	background: var(--rr-icon-bg);
	display:inline-flex;align-items:center;justify-content:center;
	color: var(--rr-purple); font-size: 26px;
}
.rr-stat-ico .elementor-icon i, .rr-stat-ico .elementor-icon svg { color:var(--rr-purple); fill:var(--rr-purple); width:26px;height:26px; }
.rr-stat-num .elementor-heading-title { font-family: var(--rr-font-display); font-size: 30px; font-weight: 700; color: var(--rr-purple); line-height: 1; margin:0 0 5px; }
.rr-stat-lbl .elementor-widget-container b, .rr-stat-lbl .elementor-widget-container strong { display:block; font-size:15px; color:var(--rr-ink); font-weight:600; }
.rr-stat-lbl .elementor-widget-container { font-size: 13px; color: var(--rr-body); line-height:1.35; }
.rr-vline .elementor-widget-container { width:1px; height:56px; background: var(--rr-hairline); margin:0 auto; }

/* shared stat markup (used by html widgets) — sizes from the Changes-3 mockup.
   The lavender bar (Changes-5) has 5 narrower cells, so it overrides them below. */
.rr-statinner { display:flex; align-items:center; gap:43px; }
.rr-statico {
	width:78px; height:78px; border-radius:50%; background: var(--rr-icon-bg);
	display:inline-flex; align-items:center; justify-content:center;
	color: var(--rr-purple-soft); flex:0 0 auto;
}
.rr-statico svg { width:40px; height:40px; }
.rr-statnum { font-family: var(--rr-font-display); font-size:36px; font-weight:600; color:var(--rr-purple); line-height:1; margin-bottom:9px; letter-spacing:-0.5px; }
.rr-statinner b { display:block; font-size:var(--rr-fs-m); color:var(--rr-ink); font-weight:600; margin-bottom:3px; }
.rr-statinner > div > span { font-size:var(--rr-fs-xs); color:var(--rr-body); line-height:1.35; display:block; }
.rr-vl { width:1px; height:78px; background: var(--rr-hairline); margin:0 auto; }

/* lavender assistance bar: same markup, smaller scale (Changes-5 mockup) */
.rr-statcard--lav .rr-statinner { gap:16px; }
.rr-statcard--lav .rr-statico { width:52px; height:52px; background:#fff; }
.rr-statcard--lav .rr-statico svg { width:26px; height:26px; }
.rr-statcard--lav .rr-statnum { font-size:25px; margin-bottom:4px; letter-spacing:-0.3px; }
.rr-statcard--lav .rr-statinner > div > span { font-size:var(--rr-fs-xs); line-height:17px; }
.rr-statcard--lav .rr-vl { height:56px; }
.rr-statlead2 { display:flex; align-items:center; gap:14px; }
.rr-statlead2 > div { font-family:var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; color:var(--rr-ink); line-height:1.3; }
.rr-statico2 {
	width:52px; height:52px; border-radius:50%; background:#fff;
	display:inline-flex; align-items:center; justify-content:center;
	color:var(--rr-purple-soft); flex:0 0 auto;
}
.rr-statico2 svg { width:26px; height:26px; }
.rr-statico svg, .rr-statico2 svg { fill:none !important; stroke:currentColor; }

/* =========================================================================
   CTA BANNERS
   ========================================================================= */
.rr-ctabanner > .elementor-container {
	background: var(--rr-lavender);
	border:1px solid #ECE3FA;
	border-radius: var(--rr-radius);
	padding: 26px 34px;
	align-items:center;
	position:relative;
	overflow:hidden;
}
/* light variant (consulenza): near-white panel with the fan of lines on the
   right, exactly as in the Changes-3 mockup */
/* the banner must span its column: Elementor's Kit caps inner sections at its
   own 1140px content width, which is narrower than these sections' container */
.rr-ctabanner > .elementor-container { max-width: 100% !important; }
.rr-ctabanner > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-block: 0 !important; }
.rr-ctabanner:not(.rr-cta-dark) > .elementor-container {
	background-color: #FCFAFE;
	background-image: var(--rr-cta-wave);
	background-repeat: no-repeat;
	background-position: right 30px center;
	background-size: 690px 100%;
	border-color: #F0ECFC;
	padding: 24px 44px;
}
.rr-cta-ico .elementor-icon {
	width:64px;height:64px;border-radius:50%;
	background: var(--rr-grad-btn);
	display:inline-flex;align-items:center;justify-content:center;
	color:#fff; font-size:24px;
}
/* ↗ : the mockup uses a diagonal arrow, drawn by rotating fa-arrow-up */
.rr-cta-ico--diag .elementor-icon { width:69px; height:69px; }
.rr-cta-ico--diag .elementor-icon i,
.rr-cta-ico--diag .elementor-icon svg { transform: rotate(45deg); width:26px; height:26px; }
.rr-cta-ico .elementor-icon, .rr-cta-ico .elementor-icon i, .rr-cta-ico .elementor-icon svg { color:#fff !important; fill:#fff !important; }
.rr-cta-ico .elementor-icon i, .rr-cta-ico .elementor-icon svg { width:24px;height:24px; }
/* Below ~1200px the icon column's 7% is narrower than the 69px disc and it
   spills over the title. Under that width the three columns stop being
   percentages: icon and button hug their content, the text takes the rest. */
@media (max-width: 1200px) {
	.rr-ctabanner > .elementor-container > .elementor-column:first-child,
	.rr-ctabanner > .elementor-container > .elementor-column:last-child {
		width: auto !important; flex: 0 0 auto;
	}
	/* basis 0, not auto: with flex-wrap:wrap a text column sized by its content
	   would push the button onto a second line before anything shrinks */
	.rr-ctabanner > .elementor-container > .elementor-column:nth-child(2) {
		width: auto !important; flex: 1 1 0%;
	}
	.rr-ctabanner > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
		padding-inline: 0 !important;
	}
}

/* Narrower still and the button starves the copy — give it its own row. */
@media (max-width: 900px) {
	.rr-ctabanner > .elementor-container > .elementor-column:last-child {
		flex: 0 0 100%; width: 100% !important; margin-top: 18px;
	}
	.rr-ctabanner > .elementor-container > .elementor-column:last-child .elementor-widget-button {
		text-align: left;
	}
}
/* vertically centre every column's content inside the CTA banner */
.rr-ctabanner > .elementor-container { align-items: center; }
.rr-ctabanner > .elementor-container > .elementor-column > .elementor-widget-wrap { justify-content: center; }
.rr-cta-title .elementor-heading-title { font-family: var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; color:var(--rr-ink); margin:0 0 6px; }
.rr-cta-text .elementor-widget-container,
.rr-cta-text { font-size:var(--rr-fs-s); color:var(--rr-body); margin:0; }
.rr-cta-text p { margin:0; }
.rr-ctabanner:not(.rr-cta-dark) .rr-cta-title { margin-bottom: 0 !important; }
.rr-ctabanner:not(.rr-cta-dark) .rr-cta-title .elementor-heading-title { margin:0 0 7px; letter-spacing:-0.2px; }
.rr-ctabanner:not(.rr-cta-dark) .rr-cta-text,
.rr-ctabanner:not(.rr-cta-dark) .rr-cta-text p { font-size:var(--rr-fs-xs); line-height:20px; }
/* the mockup's pill is taller and wider than the default rr-btn */
.rr-ctabanner:not(.rr-cta-dark) .rr-btn .elementor-button {
	padding: 20px 34px !important;
	font-size: var(--rr-fs-s) !important;
}

/* dark variant (ambienti retail) — bigger circle + type per the Changes-4 mockup */
.rr-ctabanner.rr-cta-dark > .elementor-container { padding: 19px 41px; }
.rr-cta-dark .rr-cta-title { margin-bottom: 0 !important; }
.rr-cta-dark .rr-cta-ico .elementor-icon { width:76px; height:76px; }
.rr-cta-dark .rr-cta-ico .elementor-icon svg { width:26px; height:26px; fill:none !important; stroke:#fff; }
.rr-cta-dark .rr-cta-title .elementor-heading-title { font-size:var(--rr-fs-m); margin:0 0 6px; }
.rr-cta-dark .rr-cta-text .elementor-widget-container,
.rr-cta-dark .rr-cta-text { font-size:var(--rr-fs-s); line-height:24px; }
.rr-cta-dark .rr-btn .elementor-button { padding: 19px 30px !important; }

/* dark variant (ambienti retail) */
.rr-ctabanner.rr-cta-dark > .elementor-container {
	background: linear-gradient(90deg,#15121F 0%,#1A1430 100%);
	border:1px solid rgba(255,255,255,.08);
}
.rr-ctabanner.rr-cta-dark .rr-cta-title .elementor-heading-title { color:#fff; }
.rr-ctabanner.rr-cta-dark .rr-cta-text .elementor-widget-container { color:#B9B9C6; }

/* =========================================================================
   AMBIENTI RETAIL (dark section)
   ========================================================================= */
.rr-dark-sec { background: var(--rr-dark); }
.rr-dark-sec .rr-h2 .elementor-heading-title { color:#fff; }
/* header rhythm + type (Changes-4 mockup) */
.rr-ambienti .rr-eyebrow { margin-bottom: 12px !important; }
.rr-ambienti .rr-h2 { margin-bottom: 0 !important; }
.rr-ambienti-sub .elementor-widget-container,
.rr-ambienti-sub { font-size: var(--rr-fs-s); line-height: 26px; }
.rr-ambienti-sub p { margin: 0; }
/* only the header's right-hand column (the section's other .rr-ambienti
   siblings have a single column, which would match :last-child too) */
.rr-ambienti > .elementor-container > .elementor-column:last-child:not(:first-child) > .elementor-widget-wrap { padding-top: 68px; }

/* cards: photo full-bleed on top, badge overlapping its bottom edge */
.rr-rcards > .elementor-container { gap: 10px; }
.rr-rcard {
	background: #0E1217;
	border:1px solid rgba(255,255,255,.07);
	border-radius: var(--rr-radius);
	padding: 0 0 56px;
	height:100%;
}
.rr-rcard > .elementor-widget-wrap { padding: 0 !important; }
.rr-rcard > .elementor-widget-wrap > .elementor-widget:not(.rr-rcard-img) { padding-left: 22px; padding-right: 22px; }
.rr-rcard-img, .rr-rcard-img .elementor-widget-container { margin:0 !important; line-height:0; }
.rr-rcard-img img {
	display:block;
	width:100% !important; max-width:none !important;
	height: 300px !important; object-fit: cover;
	border-radius: var(--rr-radius) var(--rr-radius) 0 0;
}
.rr-rbadge, .rr-rbadge .elementor-widget-container,
.rr-rbadge .elementor-icon-wrapper { text-align:left !important; }
.rr-rbadge {
	margin-top:-11px !important; margin-bottom:10px !important;
	position: relative; z-index: 2; line-height: 0;
}
.rr-rbadge .elementor-widget-container { margin:0 !important; line-height:0; }
.rr-rbadge .elementor-icon {
	width:50px;height:50px;border-radius:50%;
	background: var(--rr-grad-btn);
	display:inline-flex;align-items:center;justify-content:center; color:#fff;
}
.rr-rbadge .elementor-icon, .rr-rbadge .elementor-icon i { color:#fff !important; fill:#fff !important; }
.rr-rbadge .elementor-icon i { width:22px; height:22px; }
/* uploaded outline SVGs: stroke, never fill */
.rr-rbadge .elementor-icon svg {
	width:24px; height:24px;
	fill:none !important; stroke:#fff; color:#fff;
}
.rr-rcard-title { margin-bottom: 4px !important; }
.rr-rcard-title .elementor-heading-title { color:#fff; font-family:var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; margin:0; letter-spacing:-0.3px; }
.rr-rcard-text .elementor-widget-container,
.rr-rcard-text { color:#C3C5CA; font-size:15px; line-height:23px; }
.rr-rcard-text p { margin:0; }

/* =========================================================================
   RETAIL MEDIA — sector strip
   ========================================================================= */
/* ---- Retail Media block (Changes-5 mockup) ---- */
.rr-assist .rr-eyebrow .elementor-heading-title,
.rr-assist .rr-eyebrow { font-size: 14px; letter-spacing: 0; }
.rr-retail .rr-eyebrow--dash::after,
.rr-assist .rr-eyebrow--dash::after { margin-top: 20px; }
.rr-retail .rr-eyebrow { margin-bottom: 20px !important; }
.rr-retail .rr-h2 { margin-bottom: 22px !important; }
.rr-retail-body .elementor-widget-container,
.rr-retail-body { font-size: var(--rr-fs-s); line-height: 24px; max-width: 405px; }
.rr-retail-body { margin-bottom: 24px !important; }
.rr-retail-body p { margin: 0; }
.rr-retail .rr-feature { margin-bottom: 14px !important; }
.rr-retail .rr-feature:last-child { margin-bottom: 0 !important; }
.rr-retail .rr-feature .elementor-icon-box-icon { margin-right: 32px; }
.rr-retail .rr-feature .elementor-icon-box-icon .elementor-icon { width: 72px; height: 72px; }
.rr-retail .rr-feature .elementor-icon-box-title { font-size: var(--rr-fs-m); margin: 0 0 6px; letter-spacing: -0.1px; }
.rr-retail .rr-feature .elementor-icon-box-description { font-size: var(--rr-fs-xs); line-height: 21px; max-width: 322px; }
.rr-retail .rr-feature--dash .elementor-icon-box-title::after { margin-top: 7px; margin-bottom: 11px; }
.rr-retail-shot img {
	border-radius: 16px;
	width: 100%;
	aspect-ratio: 814 / 707;
	height: auto;
	object-fit: cover;
	box-shadow: 0 24px 44px -34px rgba(23,20,40,.4);
}

/* ---- sector strip ---- */
.rr-sectorstrip { border-top:1px solid var(--rr-hairline); padding-top:26px !important; padding-bottom:26px !important; }
/* !important: Elementor's icon-box CSS top-aligns the text next to the icon */
.rr-sectorstrip .rr-sector .elementor-icon-box-wrapper { display:flex; align-items:center !important; gap:12px; text-align:left; }
.rr-sectorstrip .rr-sector .elementor-icon-box-icon { margin:0; }
.rr-sectorstrip .rr-sector .elementor-icon-box-icon .elementor-icon { font-size:24px; color:var(--rr-purple); background:none; width:auto; height:auto; }
.rr-sectorstrip .rr-sector .elementor-icon-box-icon .elementor-icon i { color:var(--rr-purple); }
.rr-sectorstrip .rr-sector .elementor-icon-box-icon .elementor-icon svg {
	width:36px; height:36px; fill:none !important; stroke:var(--rr-purple); color:var(--rr-purple);
}
.rr-sectorstrip .rr-sector .elementor-icon-box-title { margin:0; font-size:var(--rr-fs-xs); font-weight:500; }
@media (min-width: 1200px) {
	/* below this the last cell would overflow the viewport */
	.rr-sectorstrip .rr-sector .elementor-icon-box-title { white-space:nowrap; }
}
.rr-sectorstrip .rr-sector .elementor-icon-box-title a { color:var(--rr-ink-soft); }
.rr-sector-label .elementor-heading-title { font-family:var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; color:var(--rr-ink); line-height:1.32; }
/* thin dividers between sector items */
.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap { border-left:1px solid var(--rr-hairline); }
.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) .rr-sector { padding-left:13px; }
/* sector cells size to their label instead of a fixed 14% each — a long label
   ("Fitness & Wellness") used to run over the next cell's divider */
@media (min-width: 768px) {
	.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) { width: auto !important; flex: 1 1 auto; }
}

/* =========================================================================
   ASSISTENZA
   ========================================================================= */
.rr-vdivide .elementor-widget-container { border-left:1px solid var(--rr-hairline); height:120px; }
.rr-assist-shot img { border-radius: var(--rr-radius); width:100%; height:313px !important; object-fit:cover; }

/* ---- Assistenza block (Changes-5 mockup) ---- */
.rr-assist .rr-eyebrow { margin-bottom: 20px !important; }
.rr-assist .rr-h2 .elementor-heading-title,
.rr-assist .rr-h2 { font-size: 46px !important; line-height: 52px !important; letter-spacing: -1px !important; }
.rr-assist .rr-h2 { margin-bottom: 25px !important; }
.rr-assist-body .elementor-widget-container,
.rr-assist-body { font-size: 16.5px; line-height: 27px; max-width: 445px; }
.rr-assist-body p { margin: 0; }
.rr-assist-feature .elementor-icon-box-icon { margin-right: 26px; }
.rr-assist-feature .elementor-icon-box-icon .elementor-icon { width: 72px; height: 72px; }
.rr-assist-feature .elementor-icon-box-title { font-size: 17px; margin: 0 0 7px; letter-spacing: -0.1px; }
.rr-assist-feature .elementor-icon-box-description { font-size: 13.5px; line-height: 21px; }
/* uploaded outline SVGs in feature badges: stroke, never fill */
.rr-feature .elementor-icon-box-icon .elementor-icon svg {
	width: 34px; height: 34px;
	fill: none !important;
	stroke: currentColor;
	color: var(--rr-purple-soft);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.rr-footer { background: var(--rr-footer); }
.rr-footer-main { padding-top:56px !important; padding-bottom:0 !important; }

/* The four columns are split by hairlines. They are the columns' own left
   borders: Elementor stretches every column to the tallest one, so the rules
   run edge to edge without any spacer markup. */
.rr-footer-main > .elementor-container > .elementor-column > .elementor-widget-wrap { padding:10px 0 0 !important; }
.rr-footer-main > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap {
	border-left:1px solid rgba(255,255,255,.16); padding:23px 0 0 42px !important;
}
.rr-footer-main > .elementor-container > .elementor-column.rr-fcol > .elementor-widget-wrap { padding-right:34px !important; }
.rr-footer-bar > .elementor-container > .elementor-column > .elementor-widget-wrap { padding:0 !important; }

.rr-footer-logo.elementor-widget-image { margin-bottom:0 !important; text-align:left; }
.rr-footer-logo img { width:220px; height:auto; }

/* Contact list: glyph in a lavender-outlined tile, 30px tall like the line box
   so a two-line address keeps its first line centred on the tile. */
.rr-fc { list-style:none; margin:0; padding:0; }
.rr-fc li {
	display:flex; align-items:flex-start; gap:22px; margin-bottom:21px;
	color:#C9C9D2; font-size:15px;
}
.rr-fc li:last-child { margin-bottom:0; }
.rr-fc li > span:last-child { line-height:30px; }
.rr-fc li b { color:#fff; font-weight:600; }
.rr-fc a { color:inherit; text-decoration:none; }
.rr-fc a:hover { color:#fff; }
.rr-fcontacts { margin-top:36px; }
.rr-fci {
	flex:0 0 30px; width:30px; height:30px; border-radius:8px;
	border:1px solid rgba(139,92,246,.45); color:var(--rr-purple); font-size:13px;
	display:inline-flex; align-items:center; justify-content:center;
}

/* Footer link columns = real WP menus (wp_nav_menu) via [rr_menu] shortcode. */
.rr-fcol-title .elementor-heading-title {
	color:#fff !important; font-family:var(--rr-font-display); font-size:17px; font-weight:500;
	letter-spacing:.2px; text-transform:uppercase; margin:0;
	position:relative; padding-bottom:23px;
}
.rr-fcol-title .elementor-heading-title::after {
	content:""; position:absolute; left:0; bottom:0; width:32px; height:4px; border-radius:3px; background:var(--rr-purple);
}
.rr-fmenu { margin-top:36px; }
.rr-fmenu .rr-menu-list { list-style:none; margin:0; padding:0; }
.rr-fmenu .rr-menu-list li + li { margin-top:52px; }
.rr-fmenu .rr-menu-list a {
	color:#C9C9D2; font-size:15px; line-height:20px; display:flex;
	justify-content:space-between; align-items:center; text-decoration:none;
}
.rr-fmenu .rr-menu-list a::after { content:"\203A"; color:#6b6b7a; font-size:18px; }
.rr-fmenu .rr-menu-list a:hover { color:#fff; }

/* Bottom bar: hairline, copyright with a purple bullet, legal links + LinkedIn. */
.rr-fbottom {
	display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
	border-top:1px solid rgba(255,255,255,.16); margin-top:40px; padding:32px 0 36px;
}
.rr-fcopy { display:flex; align-items:center; gap:20px; color:#B8B8C2; font-size:14px; }
.rr-fcopy .d { width:6px; height:6px; border-radius:50%; background:var(--rr-purple-soft); }
.rr-flegal { display:flex; align-items:center; gap:30px; }
.rr-flegal a { color:#C9C9D2; font-size:15px; text-decoration:none; }
.rr-flegal a:hover { color:#fff; }
.rr-flegal .s { width:1px; height:23px; background:rgba(255,255,255,.18); }
.rr-flegal .rr-in {
	width:36px; height:36px; border:1.5px solid rgba(255,255,255,.3); border-radius:9px;
	display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.rr-flegal .rr-in:hover { border-color:rgba(255,255,255,.6); }
/* footer icons are inline SVG (no icon font) */
.rr-fci svg { width:13px; height:13px; }
.rr-flegal .rr-in svg { width:15px; height:15px; }

/* =========================================================================
   OVERRIDE ELEMENTOR KIT DEFAULTS
   The default Elementor kit paints headings with its "primary" colour and
   Roboto; these rules load after the theme sheet, so we assert brand values.
   ========================================================================= */
.elementor-widget-heading .elementor-heading-title { font-family: var(--rr-font-display) !important; }
.elementor-widget-text-editor,
.elementor-widget-icon-box .elementor-icon-box-description { font-family: var(--rr-font-body); }

.rr-h1 .elementor-heading-title,
.rr-h2 .elementor-heading-title,
.rr-h3 .elementor-heading-title  { color: var(--rr-ink) !important; }
.rr-hero-title .elementor-heading-title { color: #fff !important; }
/* Hero body loses to the Kit text colour/width because the theme sheet loads
   before Elementor's — assert brand values here with !important. */
.rr-hero-body,
.rr-hero-body p { color: #C8C8D4 !important; }
.rr-hero-body  { max-width: 360px !important; }
.rr-eyebrow .elementor-heading-title,
.rr-eyebrow p                    { color: var(--rr-eyebrow) !important; }
.rr-partners-label .elementor-heading-title,
.rr-card-title .elementor-heading-title,
.rr-cta-title .elementor-heading-title,
.rr-sector-label .elementor-heading-title   { color: var(--rr-ink) !important; }
.rr-white .elementor-heading-title,
.rr-on-dark .elementor-heading-title,
.rr-rcard-title .elementor-heading-title { color: #fff !important; }
.rr-feature .elementor-icon-box-title,
.rr-feature .elementor-icon-box-title a       { color: var(--rr-ink) !important; }
.rr-feature.rr-on-dark .elementor-icon-box-title,
.rr-feature.rr-on-dark .elementor-icon-box-title a { color: #fff !important; }
.rr-sector .elementor-icon-box-title,
.rr-sector .elementor-icon-box-title a        { color: var(--rr-ink-soft) !important; }
.rr-cta-dark .rr-cta-title .elementor-heading-title { color: #fff !important; }
.rr-p { color: var(--rr-purple) !important; }
/* Text-editor widgets on dark backgrounds: Elementor's Kit sets the global text
   colour (#5F5F6B) on .elementor-widget-text-editor and loads AFTER this sheet,
   so every "on dark" colour has to be asserted here or it silently fails
   contrast (2.6:1) on the dark sections. */
.rr-body.rr-on-dark,
.rr-body.rr-on-dark p,
.rr-ambienti-sub,
.rr-ambienti-sub p            { color: #B9B9C6 !important; }
.rr-rcard-text,
.rr-rcard-text p              { color: #C3C5CA !important; }
.rr-cta-dark .rr-cta-text,
.rr-cta-dark .rr-cta-text p   { color: #B9B9C6 !important; }
.rr-g { -webkit-text-fill-color: transparent !important; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
html, body { overflow-x: hidden; max-width: 100%; }
/* Allow Elementor flex children to shrink so long text wraps instead of
   forcing the layout wider than the viewport. */
.elementor-column, .elementor-column-wrap, .elementor-widget-wrap,
.elementor-widget, .elementor-widget-container { min-width: 0; }
.elementor-heading-title, .elementor-widget-text-editor,
.elementor-icon-box-title, .elementor-icon-box-description { overflow-wrap: break-word; }

/* small laptops: sections are authored at 1160-1290px, so between the tablet
   breakpoint and ~1280px the flush-left hero copy, logo and footer would
   touch the screen edge — same 24px gutter, desktop widths untouched */
@media (min-width: 1025px) and (max-width: 1279px) {
	/* top-level only: inner sections and the stats bar draw their card on the container */
	.elementor-top-section:not(.rr-statcard) > .elementor-container { padding-left: 24px; padding-right: 24px; }
	/* five menu items + bigger logo: tighter nav so it clears the CTA divider */
	.rr-nav .rr-menu-list { gap: 22px; }
}

@media (max-width: 1024px) {
	/* full-width containers, but never let content touch the screen edge —
	   every section is authored at 1160-1250px, so below that they need a gutter */
	.elementor-section > .elementor-container {
		max-width: 100% !important;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 1024px) {
	.rr-hero-title .elementor-heading-title { font-size: 38px !important; }
	.rr-h1 .elementor-heading-title, .rr-h1 { font-size: 40px; }
	.rr-h2 .elementor-heading-title, .rr-h2 { font-size: 33px; }

	/* Header nav collapses behind a hamburger (.rr-nav-toggle, toggled by
	   rosros_mobile_nav_script() in functions.php) from tablet down — the full
	   desktop nav plus CTA pill doesn't fit down to 1024px, let alone 768px. */
	.rr-header {
		position: relative !important;
		background: var(--rr-dark);
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.rr-header > .elementor-container { flex-wrap: wrap; }
	.rr-header .rr-logo { flex: 1 1 auto; }
	.rr-header .rr-logo img { height: 40px; }

	.rr-nav-toggle {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
	}
	.rr-nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; }

	.rr-nav .rr-menu-list {
		display: none;
		/* fixed (not absolute) so it spans the viewport regardless of the Elementor
		   column's own positioning context; JS sets `top` to the header's height. */
		position: fixed; left: 0; right: 0; top: 0;
		flex-direction: column; align-items: center; text-align: center; gap: 2px;
		background: var(--rr-dark); border-top: 1px solid rgba(255,255,255,.12);
		padding: 12px 20px 16px; margin: 0; z-index: 40;
		max-height: calc(100vh - 60px); overflow-y: auto;
	}
	.rr-menu.is-open .rr-menu-list { display: flex; }
	.rr-nav .rr-menu-list a { padding: 9px 0; font-size: 15px; }
	.rr-nav .rr-menu-list .menu-item-has-children > a::after { display: none; }
	.rr-nav .rr-menu-list .sub-menu {
		position: static; transform: none; opacity: 1; visibility: visible;
		display: flex; flex-direction: column; align-items: center; gap: 2px;
		background: none; border: 0; box-shadow: none; padding: 0; min-width: 0;
	}
	.rr-nav .rr-menu-list .sub-menu a { padding: 6px 0; font-size: 13.5px; opacity: .72; }
	.rr-nav .rr-menu-list .menu-item-has-children::after { content: none; }
	.rr-btn-outline .elementor-button { padding: 10px 16px !important; font-size: 12.5px !important; white-space: nowrap; }
	/* CTA pill doesn't belong next to the hamburger on tablet/mobile — drop the
	   whole column, not just the button, so it stops claiming flex space and
	   pushing the toggle away from the right edge. */
	.rr-header .elementor-column:has(.rr-btn-outline) { display: none; }
	.rr-header > .elementor-container { justify-content: space-between; }
	.rr-header .elementor-column { width: auto !important; }
	.rr-cards > .elementor-container,
	.rr-rcards > .elementor-container { grid-template-columns: repeat(2, 1fr); }

	/* footer columns stay side by side here, so only tighten the gutters */
	.rr-footer-main > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap {
		padding-left: 24px !important;
	}
	.rr-footer-main > .elementor-container > .elementor-column.rr-fcol > .elementor-widget-wrap { padding-right: 16px !important; }
	.rr-footer-logo img { width: 180px; }
	.rr-fmenu .rr-menu-list li + li { margin-top: 30px; }
}

@media (max-width: 767px) {
	.elementor-section > .elementor-container { padding-left: 18px; padding-right: 18px; }

	/* headings must never exceed the viewport */
	.rr-hero-title .elementor-heading-title,
	.rr-h1 .elementor-heading-title, .rr-h1,
	.rr-h2 .elementor-heading-title, .rr-h2 { overflow-wrap: anywhere; }

	.rr-sec { padding-top: 54px; padding-bottom: 54px; }

	.rr-hero { min-height: auto; padding-top: 44px !important; padding-bottom: 56px !important; }
	.rr-hero::before {
		background: linear-gradient(180deg, rgba(6,6,12,.30) 0%, rgba(6,6,12,.72) 50%, rgba(6,6,12,.94) 100%);
	}
	.rr-hero-title .elementor-heading-title { font-size: 30px; max-width: 100%; }
	.rr-h1 .elementor-heading-title, .rr-h1 { font-size: 28px; }
	.rr-h2 .elementor-heading-title, .rr-h2 { font-size: 24px; }
	.rr-hero-body { max-width: 100% !important; }

	/* line breaks authored for the desktop mockup leave orphan words on phones */
	.rr-ambienti-sub br { display: none; }

	/* the stats bar draws its card ON the container, so the gutter has to come
	   from the section (the per-section padding in post-10.css needs !important) */
	.rr-statcard.elementor-section { padding-left: 18px !important; padding-right: 18px !important; }
	.rr-statcard > .elementor-container { padding: 24px 20px; }

	/* card grids collapse to a single column */
	.rr-cards > .elementor-container,
	.rr-rcards > .elementor-container { grid-template-columns: 1fr; gap: 20px; }

	.rr-logos-row li { padding: 0 22px; }
	.rr-marquee .rr-logos-row img { height: 48px; }

	.rr-vl, .rr-vdivide, .rr-header-divider { display: none; }

	/* stat bars stack vertically */
	.rr-statcard > .elementor-container,
	.rr-statcard--lav > .elementor-container { flex-direction: column; align-items: flex-start; gap: 18px; }
	.rr-statcard .rr-vl { display: none; }

	/* sector strip: label on its own row, then the 6 sector icons 3-per-row */
	.rr-sectorstrip > .elementor-container {
		display: grid !important; /* Elementor's own display:flex loads later */
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 12px;
	}
	.rr-sectorstrip > .elementor-container > .elementor-column {
		width: auto !important; max-width: none !important; margin: 0 !important;
	}
	.rr-sectorstrip > .elementor-container > .elementor-column:first-child { grid-column: 1 / -1; }
	.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap { border-left: 0; }
	.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) .rr-sector { padding-left: 0; }
	/* icons on one line even when a label runs to two lines */
	.rr-sectorstrip > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap { align-content: flex-start !important; }

	.rr-perche-sub .elementor-widget-container { max-width: 100%; }

	/* Perché funziona / Retail Media: intro copy, then the photo, then the icon
	   rows. On desktop photo and copy are separate columns, so the columns are
	   dissolved (display:contents) and their widgets re-ordered in one flow. */
	.rr-perche > .elementor-container,
	.rr-retail > .elementor-container { display: flex; flex-direction: column; }
	.rr-perche > .elementor-container > .elementor-column,
	.rr-perche > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.rr-retail > .elementor-container > .elementor-column,
	.rr-retail > .elementor-container > .elementor-column > .elementor-widget-wrap { display: contents; }
	.rr-perche .rr-shot, .rr-retail .rr-retail-shot { order: 1; margin: 6px 0 28px !important; }
	.rr-perche .rr-feature, .rr-perche .rr-fdiv, .rr-retail .rr-feature { order: 2; }
	/* icon rows stack centred (Elementor) — the capped text blocks and the
	   title dash have to follow, or they sit left of the icon on wider phones */
	.rr-feature .elementor-icon-box-description { margin-inline: auto; }
	.rr-feature--dash .elementor-icon-box-title::after { margin-inline: auto; }

	/* comfortable spacing between stacked columns */
	.rr-perche > .elementor-container > .elementor-column,
	.rr-light > .elementor-container > .elementor-column { margin-bottom: 8px; }

	/* stacked footer, everything centred: the column rules would become
	   full-width lines, so they go */
	.rr-footer-main > .elementor-container > .elementor-column:not(:first-child) > .elementor-widget-wrap {
		border-left: 0; padding: 40px 0 0 !important;
	}
	.rr-footer-main > .elementor-container > .elementor-column.rr-fcol > .elementor-widget-wrap { padding-right: 0 !important; }
	.rr-footer-main { text-align: center; }
	.rr-footer-logo.elementor-widget-image { text-align: center; }
	.rr-footer-logo img { width: 170px; }
	.rr-fcol-title .elementor-heading-title::after { left: 50%; transform: translateX(-50%); }
	.rr-fmenu { margin-top: 22px; }
	.rr-fmenu .rr-menu-list li + li { margin-top: 20px; }
	.rr-fmenu .rr-menu-list a { justify-content: center; }
	.rr-fmenu .rr-menu-list a::after { content: none; }
	.rr-fcontacts { margin-top: 22px; }
	.rr-fc li { flex-direction: column; align-items: center; gap: 8px; }
	.rr-fbottom { margin-top: 32px; padding: 24px 0 28px; flex-direction: column; }
	.rr-fcopy { justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
	.rr-flegal { gap: 18px; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================================
   PAGE: ASSISTENZA & SUPPORTO
   Added for the dedicated "Assistenza" page. Reuses the existing design
   tokens/classes (.rr-eyebrow, .rr-h2, .rr-body, .rr-lead, .rr-btn, .rr-p,
   .rr-feature) and introduces a small set of new .rr-* components.
   ========================================================================= */

/* generic inline-icon wrapper used by the html-widget components below */
.rr-ico { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color: var(--rr-purple-soft); }
.rr-ico svg { width:100%; height:100%; fill:none !important; stroke:currentColor; }
.rr-ico--green { color:#046408; }

/* On this page the hero photo must start right below the nav bar, not bleed
   behind it: the header gets a solid background whenever it precedes the
   Assistenza hero (kept scoped so the homepage's transparent overlay header
   is untouched). */
.rr-header:has(+ .rr-ahero) {
	background: var(--rr-dark) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
/* mockup shows this button's label + arrow in brand purple, not white */
.rr-header:has(+ .rr-ahero) .rr-btn-outline .elementor-button,
.rr-header:has(+ .rr-ahero) .rr-btn-outline .elementor-button i,
.rr-header:has(+ .rr-ahero) .rr-btn-outline .elementor-button svg {
	color: var(--rr-purple-2) !important;
	fill: var(--rr-purple-2) !important;
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.rr-ahero {
	position: relative;
	overflow: hidden;
	min-height: 640px;
	padding-top: 170px !important;
	padding-bottom: 76px !important;
}
.rr-ahero::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(46% 70% at 96% 30%, rgba(124,58,237,.10) 0%, rgba(124,58,237,0) 60%),
		linear-gradient(90deg, #07060C 0%, rgba(7,6,12,.82) 30%, rgba(8,8,14,.42) 54%, rgba(8,8,14,0) 76%),
		linear-gradient(180deg, rgba(5,5,10,.28) 0%, rgba(5,5,10,0) 26%, rgba(5,5,10,.2) 100%);
}
.rr-ahero > .elementor-container { position: relative; z-index: 2; align-items: center; }
.rr-ahero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { padding-left: 0 !important; }
/* the photo is the section's own background (full-bleed, edge to edge);
   the second column only reserves the visual space and hosts the badge */
.rr-ahero > .elementor-container > .elementor-column:last-child { position: relative; align-self: stretch; }
.rr-ahero > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap { height: 100%; padding: 0 !important; }
.rr-ah-title .elementor-heading-title { margin: 20px 0 0 !important; max-width: 620px; }
/* hero title's second line uses the same purple as the eyebrow, not the
   home page's purple->cyan gradient */
.rr-ah-title .rr-g {
	background: none !important;
	-webkit-text-fill-color: var(--rr-eyebrow) !important;
	color: var(--rr-eyebrow) !important;
}
.rr-ah-body { margin-top: -22px !important; }
.rr-ah-body, .rr-ah-body p { max-width: 480px !important; margin-bottom: 34px; }

.rr-ah-mini { display:flex; align-items:center; gap:26px; margin-bottom: 34px; flex-wrap: wrap; }
.rr-ah-mini-item { display:flex; align-items:center; gap:12px; }
.rr-ah-mini-item .rr-ico {
	width:40px; height:40px; flex:0 0 auto;
	border: 1.5px solid var(--rr-purple-2); border-radius:50%;
	color: var(--rr-purple-2);
}
.rr-ah-mini-item .rr-ico svg { width:24px; height:24px; }
.rr-ah-mini-item div { line-height:1.3; }
.rr-ah-mini-item b { display:block; font-size:var(--rr-fs-xs); font-weight:600; color:#fff; }
.rr-ah-mini-item span { font-size:var(--rr-fs-xs); color:#9C9CAC; }
.rr-ah-mini-sep { width:1px; height:30px; background: rgba(255,255,255,.16); flex:0 0 auto; }

.rr-ah-phone {
	display:inline-flex; align-items:center; gap:16px;
	background: transparent;
	border: 1.5px solid var(--rr-purple-2);
	border-radius: 14px;
	padding: 14px 26px;
}
.rr-ah-phone .rr-ico {
	width:auto; height:auto; flex:0 0 auto;
	background: none; color: var(--rr-purple-2);
}
.rr-ah-phone .rr-ico svg { width:34px; height:34px; fill:currentColor !important; stroke:none !important; }
.rr-ah-phone span { display:block; font-size:var(--rr-fs-xs); font-weight:700; letter-spacing:1.2px; color: var(--rr-purple-2); margin-bottom:4px; }
.rr-ah-phone a { display:block; font-family: var(--rr-font-display); font-size:36px; line-height:1.05; letter-spacing:.5px; font-weight:700; color:#fff; text-decoration:none; }

/* -------------------------------------------------------------------------
   IL NOSTRO SUPPORTO — 3 numbered steps
   ------------------------------------------------------------------------- */
.rr-support { background: #fff !important; padding-bottom: 15px !important; }
.rr-support-steps { background: #fff !important; padding-bottom: 40px !important; }
.rr-support-head { text-align:left; }
.rr-support-head .rr-eyebrow { margin-bottom:0 !important; }
.rr-support-head .rr-eyebrow--dash::after,
.rr-terr .rr-eyebrow--dash::after,
.rr-reliability .rr-eyebrow--dash::after,
.rr-talk .rr-eyebrow--dash::after { width:60px; margin-bottom:26px; }
.rr-support-head .rr-eyebrow--dash.elementor-widget,
.rr-terr .rr-eyebrow--dash.elementor-widget,
.rr-reliability .rr-eyebrow--dash.elementor-widget,
.rr-talk .rr-eyebrow--dash.elementor-widget { margin-bottom: 0 !important; }
.rr-support-head .rr-h2,
.rr-terr .rr-h2,
.rr-reliability .rr-h2,
.rr-talk .rr-h2 { margin-bottom:16px !important; }
.rr-support-lead.elementor-widget-text-editor, .rr-support-lead { max-width:700px !important; margin-left:0 !important; margin-right:0 !important; text-align:left; }

/* Unify title / body text sizes across the whole Assistenza page with the
   hero's own scale (.rr-ah-title = 42px, .rr-ah-body = 16px/1.62). */
.rr-support-head .rr-h2 .elementor-heading-title,
.rr-support-head .rr-h2,
.rr-terr .rr-h2 .elementor-heading-title,
.rr-terr .rr-h2,
.rr-reliability .rr-h2 .elementor-heading-title,
.rr-reliability .rr-h2,
.rr-talk .rr-h2 .elementor-heading-title,
.rr-talk .rr-h2 {
	font-size: 42px !important;
	line-height: 1.13 !important;
	letter-spacing: -0.5px !important;
}
@media (max-width: 1024px) {
	.rr-support-head .rr-h2 .elementor-heading-title,
	.rr-support-head .rr-h2,
	.rr-terr .rr-h2 .elementor-heading-title,
	.rr-terr .rr-h2,
	.rr-reliability .rr-h2 .elementor-heading-title,
	.rr-reliability .rr-h2,
	.rr-talk .rr-h2 .elementor-heading-title,
	.rr-talk .rr-h2 {
		font-size: 38px !important;
	}
}
.rr-support-lead .elementor-widget-container,
.rr-support-lead,
.rr-terr-lead .elementor-widget-container,
.rr-terr-lead,
.rr-reliability-lead .elementor-widget-container,
.rr-reliability-lead,
.rr-talk-lead .elementor-widget-container,
.rr-talk-lead {
	font-size: 16px !important;
	line-height: 1.62 !important;
}

.rr-support-steps > .elementor-container { gap: 30px; }
.rr-proc { text-align:center; padding: 0 10px; position:relative; }
.rr-proc-icowrap { position:relative; display:inline-block; }
.rr-proc-ico {
	width:190px; height:190px; margin:0 auto;
	background: var(--rr-icon-bg); border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	position:relative;
}
.rr-proc-ico svg { width:92px; height:92px; }
.rr-proc-ico1-doc { position:absolute; left:46px; top:37px; }
.rr-proc-ico1-doc svg { width:84px; height:108px; }
.rr-proc-ico1-gear {
	position:absolute; left:99px; top:99px; width:55px; height:55px;
	border-radius:50%; background: var(--rr-icon-bg);
	display:flex; align-items:center; justify-content:center;
}
.rr-proc-ico1-gear svg { width:51px; height:51px; }
.rr-proc-badge {
	position:absolute; top:8px; right:2px;
	width:44px; height:44px; border-radius:50%;
	background: var(--rr-purple-2);
	display:flex; align-items:center; justify-content:center;
	box-shadow: 0 0 0 5px var(--rr-icon-bg);
}
.rr-proc-badge svg { width:22px; height:22px; }
.rr-proc--badge-bottom .rr-proc-badge { top:auto; bottom:8px; }
.rr-proc-ico2-mon { position:absolute; left:39px; top:58px; }
.rr-proc-ico2-mon svg { width:100px; height:83px; }
.rr-proc-badge--lg {
	top:34px !important; right:28px !important;
	width:47px !important; height:47px !important;
}
.rr-proc-badge--lg svg { width:38px; height:38px; }
.rr-proc-badge--lg3 {
	top:auto !important; bottom:42px !important; right:18px !important;
	width:48px !important; height:48px !important;
}
.rr-proc-badge--lg3 svg { width:28px; height:28px; }
.rr-proc-ico3-hs { position:absolute; left:29px; top:34px; }
.rr-proc-ico3-hs svg { width:132px; height:125px; }
.rr-proc--conn .rr-proc-icowrap::before {
	content:""; position:absolute; top:95px; right:calc(100% + 75px);
	width:100px; height:1px; background:#E2E2EA;
}
.rr-proc-num {
	width:56px; height:56px; margin:-2px auto 8px;
	border-radius:50%; background: var(--rr-lavender-2);
	display:flex; align-items:center; justify-content:center;
}
.rr-proc-num span {
	color: var(--rr-purple); font-family: var(--rr-font-display);
	font-weight:700; font-size:16px; letter-spacing:.3px;
}
.rr-proc-title { text-align:center; margin:0 0 10px; font-size:var(--rr-fs-m); font-weight:700; color: var(--rr-ink); font-family: var(--rr-font-body); }
.rr-proc-text { text-align:center; max-width:280px; margin:0 auto; font-size:var(--rr-fs-s); line-height:1.62; color: var(--rr-body); }

/* -------------------------------------------------------------------------
   PRESENZA SUL TERRITORIO
   ------------------------------------------------------------------------- */
.rr-terr-lead, .rr-terr-lead p { max-width:460px; margin-bottom:30px !important; }
.rr-terr-feature { margin-bottom:22px !important; }
.rr-terr-feature .elementor-icon-box-icon .elementor-icon,
.rr-terr .elementor-icon-box-icon .elementor-icon { width:58px; height:58px; background: var(--rr-icon-bg); border-radius:50%; color:var(--rr-purple-soft); }
.rr-terr .elementor-icon-box-icon .elementor-icon svg { width:26px; height:26px; fill:none !important; stroke:currentColor; }
.rr-terr .elementor-icon-box-title { font-size:var(--rr-fs-m); margin:0 0 4px; }
.rr-terr .elementor-icon-box-description { font-size:var(--rr-fs-xs); line-height:21px; }
/* the two html-based items (pin/clock) reuse the same icon-box visual language */
.rr-feature.rr-terr-feature { display:flex; }
.rr-feature.rr-terr-feature > .rr-ico { width:58px; height:58px; background:var(--rr-icon-bg); border-radius:50%; margin-right:22px; flex:0 0 auto; }
.rr-feature.rr-terr-feature > .rr-ico svg { width:35px; height:35px; }
.rr-feature.rr-terr-feature > div > .elementor-icon-box-title { font-family:var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; color:var(--rr-ink); margin:0 0 4px; }
.rr-feature.rr-terr-feature > div > .elementor-icon-box-description { font-size:var(--rr-fs-xs); line-height:21px; color:var(--rr-body); }

.rr-terr { background: #fff !important; padding-bottom: 30px !important; }
.rr-terr .elementor-col-52 > .elementor-widget-wrap { height:100%; }
.rr-terr .elementor-col-52 > .elementor-widget-wrap > .elementor-widget-html { height:100%; display:flex; }
.rr-terr-mapwrap { position:relative; display:flex; flex:1 1 auto; min-height:0; width:100%; margin:0; }
.rr-terr-map { display:block; width:100%; flex:1 1 auto; min-height:0; height:auto; object-fit:cover; object-position:center top; }

.rr-terr-pillsec { background: #fff !important; border-top:1px solid var(--rr-hairline); padding-bottom: 20px !important; }
.rr-terr-pills { display:grid; grid-template-columns: repeat(3, 1fr); width:100%; }
.rr-terr-pill { display:flex; align-items:center; justify-content:center; gap:14px; position:relative; }
.rr-terr-pill:not(:first-child)::before {
	content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width:1px; height:40px; background: var(--rr-hairline);
}
.rr-terr-pill-ico { width:44px; height:44px; color: var(--rr-purple) !important; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rr-terr-pill-ico svg { width:100%; height:100%; }
.rr-terr-pill b { display:block; font-size:var(--rr-fs-m); font-weight:600; color: var(--rr-purple); }
.rr-terr-pill span { font-size:var(--rr-fs-xs); color:var(--rr-body); }

/* -------------------------------------------------------------------------
   AFFIDABILITÀ CHE SI MISURA — dark KPI row
   ------------------------------------------------------------------------- */
.rr-reliability { text-align:left; padding-top: 65px !important; padding-bottom: 40px !important; }
.rr-reliability .rr-eyebrow { margin-bottom:0 !important; }
.rr-reliability-lead, .rr-reliability-lead p { max-width:560px; margin-bottom:24px !important; }

.rr-kpi-row {
	display:grid; grid-template-columns: repeat(4, 1fr);
	background: var(--rr-dark-card);
	border-radius: var(--rr-radius);
	padding: 32px 20px;
	margin-top: 8px;
	margin-left: -20px;
	margin-right: -20px;
	width: calc(100% + 40px);
}
.rr-kpi { display:flex; align-items:flex-start; gap:14px; border-left:1px solid rgba(255,255,255,.12); padding-left:24px; margin-left:4px; }
.rr-kpi:first-child { border-left:0; padding-left:0; margin-left:0; }
.rr-kpi-ico {
	position: relative;
	width:44px; height:44px; background:rgba(139,92,246,.16); color: var(--rr-purple-2);
	border-radius:50%; flex:0 0 auto;
}
.rr-kpi-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:21px; height:21px; }
.rr-kpi-text { display:flex; flex-direction:column; min-width:0; }
.rr-kpi-num { font-family: var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:700; color: var(--rr-purple-2); line-height:1.2; }
.rr-kpi b { display:block; font-size:var(--rr-fs-s); font-weight:600; color:#fff; margin:2px 0 4px; }
.rr-kpi-desc { font-size:var(--rr-fs-xs); line-height:19px; color:#9C9CAC; }

/* -------------------------------------------------------------------------
   IL SUPPORTO GIUSTO, FIN DAL PRIMO PASSO
   ------------------------------------------------------------------------- */
.rr-talk { padding-top: 65px !important; padding-bottom: 0 !important; }
.rr-talk-lead, .rr-talk-lead p { max-width:480px; }
.rr-talk > .elementor-container { align-items:stretch; gap: 14px; }
.rr-talk .elementor-column:nth-child(2) { align-self: center; }
.rr-talk .elementor-column:nth-child(2) > .elementor-widget-wrap { height:auto; }
.rr-talk .elementor-column:nth-child(2) > .elementor-widget-wrap > .elementor-widget-html { height:auto; display:flex; }
.rr-talk-shotwrap { position:relative; display:flex; height:186px; width:100%; margin:0; }
.rr-talk-shot {
	position:relative; z-index:1; display:block; width:100%; height:100%;
	object-fit:cover; object-position: 82% 12%;
	border-radius: var(--rr-radius-lg);
}

.rr-talk-cards { padding-bottom: 65px !important; }
.rr-talk-cards > .elementor-container { gap: 14px; align-items:stretch; }
.rr-talk-cards .elementor-column > .elementor-widget-wrap { height:100%; display:flex; flex-direction:column; }
.rr-talk-cards .elementor-widget-wrap > .elementor-widget-html { flex:1 1 auto; display:flex; }
.rr-duo { border-radius: var(--rr-radius-lg); padding: 40px 38px 26px; flex: 1 1 auto; }
.rr-duo--light { background: #fff; border:1px solid var(--rr-card-border); }
.rr-duo--purple { background: linear-gradient(135deg,#6D28D9 0%,#7C3AED 60%,#9B4DFF 100%); color:#fff; }
.rr-duo-head { display:flex; align-items:flex-start; gap:18px; margin-bottom:8px; }
.rr-duo-head-ico {
	position: relative;
	width:80px; height:80px; border-radius:50%; background: var(--rr-icon-bg); color: var(--rr-eyebrow);
	flex:0 0 auto;
}
.rr-duo-head-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:auto; height:42px; }
.rr-duo--purple .rr-duo-head-ico { background: rgba(255,255,255,.16); color:#fff; }
.rr-duo-head-text { min-width:0; }
.rr-duo-eyebrow { font-size:var(--rr-fs-xs); font-weight:700; letter-spacing:1.3px; margin-bottom:18px; }
.rr-duo-head-text .rr-duo-eyebrow { margin-bottom:6px; }
.rr-duo--light .rr-duo-eyebrow { color: var(--rr-eyebrow); }
.rr-duo--purple .rr-duo-eyebrow { color:#E7D9FF; }
.rr-duo-head-text h3 { margin:0 0 8px; }
.rr-duo-head-text p { margin:0; }
.rr-duo h3 { font-family: var(--rr-font-display); font-size:var(--rr-fs-m); font-weight:600; margin:0 0 14px; letter-spacing:-0.3px; }
.rr-duo--light h3 { color: var(--rr-ink); }
.rr-duo--purple h3 { color:#fff; }
.rr-duo p { font-size:var(--rr-fs-s); line-height:23px; margin:0 0 26px; }
.rr-duo--light p { color: var(--rr-body); }
.rr-duo--purple p { color:#E7D9FF; }

.rr-duo-phone {
	display:flex; align-items:center; gap:18px;
	background:#EAF8EF; border:0; border-radius:14px;
	padding:20px 22px; margin-bottom:16px;
}
.rr-duo-phone .rr-ico { width:34px; height:34px; background:none; flex:0 0 auto; }
.rr-duo-phone .rr-ico svg { width:34px; height:34px; fill:currentColor !important; stroke:none !important; }
.rr-duo-phone span { display:block; font-size:var(--rr-fs-xs); font-weight:700; letter-spacing:1px; color:#046408; }
.rr-duo-phone a { display:block; font-family:var(--rr-font-display); font-size:38px; font-weight:700; color:#046408; text-decoration:none; margin:4px 0; line-height:1.1; }
.rr-duo-phone em { display:block; font-style:normal; font-size:var(--rr-fs-xs); color:var(--rr-body); }

.rr-duo-cta {
	display:inline-flex; align-items:center; gap:12px;
	background:#fff; color: var(--rr-purple) !important;
	font-weight:600; font-size:15px; text-decoration:none;
	padding:16px 28px; border-radius:40px; margin-top:38px; margin-bottom:47px;
}
.rr-duo-cta-ico { width:18px; height:18px; color: var(--rr-purple); }
.rr-duo-cta-ico svg { width:100%; height:100%; }

.rr-duo-pills { display:flex; flex-direction:row; align-items:flex-start; gap:0; padding-top:14px; border-top:0; }
.rr-duo-pill { display:flex; align-items:flex-start; gap:10px; font-size:var(--rr-fs-xs); line-height:17px; font-weight:500; flex:1 1 0; padding:0 14px; position:relative; }
.rr-duo-pill:first-child { padding-left:0; }
.rr-duo-pill:last-child { padding-right:0; }
.rr-duo-pill:not(:first-child)::before {
	content:""; position:absolute; left:0; top:2px;
	width:1px; height:34px; background: rgba(0,0,0,.1);
}
.rr-duo--purple .rr-duo-pill:not(:first-child)::before { background: rgba(255,255,255,.22); }
.rr-duo--light .rr-duo-pill { color: var(--rr-ink); }
.rr-duo--purple .rr-duo-pill { color:#fff; }
.rr-duo-pill-ico { width:20px; height:20px; flex:0 0 auto; margin-top:1px; }
.rr-duo-pill-ico svg { width:100%; height:100%; }
.rr-duo--light .rr-duo-pill-ico { background:none; color: var(--rr-purple-soft); }
.rr-duo--purple .rr-duo-pill-ico { background:none; color:#fff; }

/* =========================================================================
   CONTATTI PAGE
   ========================================================================= */
.rr-header:has(+ .rr-chero) {
	background: var(--rr-dark) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.rr-header:has(+ .rr-chero) .rr-btn-outline .elementor-button,
.rr-header:has(+ .rr-chero) .rr-btn-outline .elementor-button i,
.rr-header:has(+ .rr-chero) .rr-btn-outline .elementor-button svg {
	color: var(--rr-purple-2) !important;
	fill: var(--rr-purple-2) !important;
}

/* -------------------------------------------------------------------------
   HERO + FORM CARD
   ------------------------------------------------------------------------- */
.rr-chero {
	position: relative;
	overflow: hidden;
	background: var(--rr-dark);
	padding-bottom: 14px !important;
}
.rr-chero::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(46% 70% at 96% 10%, rgba(124,58,237,.16) 0%, rgba(124,58,237,0) 60%),
		linear-gradient(180deg, rgba(5,5,10,.2) 0%, rgba(5,5,10,0) 30%);
}
.rr-chero > .elementor-container { position: relative; z-index: 2; }
.rr-chero > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; }
.rr-ccta-sec > .elementor-container > .elementor-column > .elementor-widget-wrap,
.rr-refs-sec > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; }
/* The wave is a real raster image (2172x724, ~3:1 wide), deliberately
   larger than the visible hero: .rr-chero's own overflow:hidden crops it,
   so most of the graphic bleeds past the top/right edges instead of being
   scaled to fit. */
.rr-chero-wave { position: absolute; top: -68px; left: 50%; right: auto; transform: translateX(-50%); width: 100vw; max-width: none; height: auto; z-index: 1; pointer-events: none; overflow: hidden; }
.rr-chero-wave img { display: block; width: 100%; height: auto; }
.rr-chero .rr-ah-title .elementor-heading-title { max-width: 640px; }
.rr-chero .rr-ah-body, .rr-chero .rr-ah-body p { max-width: 560px !important; margin-bottom: 0; }

/* light card on the dark hero (client's "variante chiara") */
.rr-cform-card {
	position: relative; z-index: 2;
	display: flex; gap: 60px;
	background: #F1EEF8;
	border: 1px solid #F1EEF8;
	border-radius: var(--rr-radius-lg);
	padding: 32px 48px;
	margin-top: 46px;
}
.rr-cform-left { flex: 0 0 260px; }
.rr-cform-left h3 { font-family: var(--rr-font-display); font-weight:600; font-size:var(--rr-fs-m); line-height:1.25; color:var(--rr-ink); margin:0 0 16px; letter-spacing:-0.3px; }
.rr-cform-left p { font-size:var(--rr-fs-s); line-height:23px; color:var(--rr-ink-soft); margin:0; max-width:250px; }
.rr-cform-right { flex: 1 1 auto; min-width: 0; }

.rr-cform-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-bottom: 26px; }
.rr-cform-field { display:flex; flex-direction:column; gap:9px; }
.rr-cform-field.full { grid-column: 1 / -1; }
.rr-cform-field label { font-size:var(--rr-fs-xs); font-weight:600; color:var(--rr-ink); }
.rr-cform-field label .req { color:#E3505A; margin-left:2px; }
.rr-cform-field input,
.rr-cform-field textarea,
.rr-cform-field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background:#fff;
	border:1px solid #D9D3E6;
	border-radius:10px;
	padding:14px 16px;
	font-size:var(--rr-fs-s);
	font-family: var(--rr-font-body);
	color:var(--rr-ink);
	outline:none;
	box-sizing: border-box;
	transition: border-color .2s ease;
}
.rr-cform-field input::placeholder,
.rr-cform-field textarea::placeholder { color:#8A8698; }
.rr-cform-select select:invalid { color:#8A8698; } /* "Seleziona un'opzione" reads as a placeholder */
.rr-cform-field input:focus,
.rr-cform-field textarea:focus,
.rr-cform-field select:focus { border-color: var(--rr-purple-2); }
.rr-cform-field textarea { resize: vertical; min-height: 112px; font-family: var(--rr-font-body); }
.rr-cform-select { position: relative; }
.rr-cform-select select { padding-right: 40px; cursor: pointer; }
.rr-cform-select-ico { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--rr-ink-soft); pointer-events:none; }
.rr-cform-select-ico svg { width:100%; height:100%; }

.rr-cform-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.rr-cform-submit {
	display:inline-flex; align-items:center; gap:12px;
	background: var(--rr-grad-btn); color:#fff !important;
	border:0; border-radius:40px;
	font-family: var(--rr-font-body); font-weight:600; font-size:var(--rr-fs-s);
	padding:16px 30px; cursor:pointer;
	box-shadow: 0 14px 26px -12px rgba(124,58,237,.6);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rr-cform-submit:hover { background: var(--rr-grad-btn-h); transform: translateY(-2px); }
.rr-cform-submit-ico { width:16px; height:16px; }
.rr-cform-submit-ico svg { width:100%; height:100%; }
.rr-cform-note { font-size:var(--rr-fs-xs); color:var(--rr-body); }
.rr-cform-note .req { color:#E3505A; }
/* honeypot: off-screen for people, still a normal field for bots */
.rr-cform-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* privacy consent checkbox */
.rr-cform-privacy label { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:400; line-height:1.5; color:var(--rr-ink-soft); cursor:pointer; }
.rr-cform-privacy .wpcf7-list-item { margin:0; }
.rr-cform-privacy input[type="checkbox"] { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--rr-purple); }
.rr-cform-privacy a { color:var(--rr-purple); text-decoration:underline; }
.rr-cform-submit:disabled { opacity:.55; cursor:not-allowed; transform:none; }
/* reCAPTCHA (active once its keys are set in Contatto → Integrazione): the
   notice in the form replaces Google's floating badge, as Google allows */
.grecaptcha-badge { visibility:hidden; }
.rr-cform-recaptcha { font-size:12px; color:var(--rr-body); margin:14px 0 0; }
.rr-cform-recaptcha a { color:inherit; text-decoration:underline; }
/* Contact Form 7 pieces (field wrappers, error tips, result box, spinner) */
.rr-cform-field .wpcf7-form-control-wrap { display:block; }
.rr-cform-select select:has(option[value=""]:checked) { color:#8A8698; } /* "Seleziona un'opzione" reads as a placeholder */
.rr-cform-field .wpcf7-not-valid { border-color:#E3505A; }
.rr-cform-field .wpcf7-not-valid-tip { display:block; margin-top:6px; font-size:var(--rr-fs-xs); color:#C23A44; }
.rr-cform-select .wpcf7-not-valid-tip { position:absolute; top:100%; }
.rr-cform-select:has(.wpcf7-not-valid-tip) { margin-bottom:26px; }
.rr-cform-actions .wpcf7-spinner { margin:0; background-color:var(--rr-purple-soft); }
.rr-cform-form .wpcf7-response-output {
	margin:22px 0 0 !important; padding:14px 18px !important; border:0 !important; border-radius:10px;
	font-size:var(--rr-fs-s); line-height:1.5; background:#FDECEC; color:#9B1C24;
}
.rr-cform-form.sent .wpcf7-response-output { background:#E6F6EC; color:#0F5B2A; }
.rr-cform-form.spam .wpcf7-response-output { background:#FFF4DE; color:#7A5200; }

/* -------------------------------------------------------------------------
   ASSISTENZA CLIENTI — purple CTA banner
   ------------------------------------------------------------------------- */
.rr-ccta-sec { background: var(--rr-dark) !important; padding-bottom: 14px !important; }
.rr-ccta {
	position: relative; overflow: hidden;
	display:flex; align-items:center;
	background: linear-gradient(120deg,#5B21B6 0%,#7C3AED 55%,#9B4DFF 100%);
	border-radius: var(--rr-radius-lg);
	padding: 30px 54px;
}
.rr-ccta-wave { display: none; }
.rr-ccta-ico, .rr-ccta-div, .rr-ccta-text, .rr-ccta-phone { position: relative; z-index: 1; }
.rr-ccta-ico {
	width:104px; height:104px; border-radius:50%;
	background: rgba(255,255,255,.16); color:#fff;
	display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.rr-ccta-ico-svg svg { width:auto; height:48px; display:block; }
.rr-ccta-div { width:1px; align-self:stretch; background: rgba(255,255,255,.24); margin: 0 42px; flex:0 0 auto; }
.rr-ccta-ico + .rr-ccta-div { display: none; }
.rr-ccta-text + .rr-ccta-div { margin-right: 66px; }
.rr-ccta-text { flex:1 1 auto; min-width:0; margin-left: 34px; }
.rr-ccta-text .rr-ccta-eyebrow { display:block; font-size:var(--rr-fs-xs); font-weight:700; letter-spacing:1.3px; color:#E7D9FF; margin-bottom:8px; }
.rr-ccta-text h3 { font-family: var(--rr-font-display); font-weight:600; font-size:var(--rr-fs-m); color:#fff; margin:0 0 8px; letter-spacing:-0.3px; }
.rr-ccta-text p { font-size:var(--rr-fs-s); line-height:1.62; color:#E7D9FF; margin:0; max-width:420px; }
.rr-ccta-phone { flex:0 0 auto; text-align:left; }
.rr-ccta-phone .num { display:block; font-family: var(--rr-font-display); font-weight:700; font-size:44px; color:#fff; line-height:1.1; }
.rr-ccta-phone .lbl { display:block; font-size:var(--rr-fs-xs); line-height:1.62; color:#E7D9FF; margin-top:8px; }

/* -------------------------------------------------------------------------
   ALTRI CONTATTI — reference card
   ------------------------------------------------------------------------- */
.rr-refs-sec { background: var(--rr-dark) !important; padding-bottom: 40px !important; }
.rr-refs-card {
	background:#fff; border:1px solid var(--rr-card-border);
	border-radius: var(--rr-radius-lg);
	padding: 30px 50px;
}
.rr-refs-eyebrow { display:block; margin-bottom:14px !important; }
.rr-refs-title { font-family: var(--rr-font-display); font-weight:600; font-size:var(--rr-fs-m); letter-spacing:-0.3px; color: var(--rr-ink); margin:0 0 18px; }
.rr-refs-row { display:flex; gap: 70px; }
.rr-ref-item { display:flex; flex-direction:column; flex: 1 1 0; }
.rr-ref-ico { width:32px; height:32px; color: var(--rr-purple); margin-bottom: 8px; }
.rr-ref-ico svg { width:100%; height:100%; fill:currentColor !important; stroke:none !important; }
.rr-ref-item b { display:block; font-size:var(--rr-fs-xs); font-weight:700; color: var(--rr-ink); margin-bottom: 4px; }
.rr-ref-item span:not(.rr-ref-ico) { font-size:var(--rr-fs-xs); color: var(--rr-body); }
.rr-ref-link { font-size:var(--rr-fs-xs); color: var(--rr-body); text-decoration:none; }
.rr-ref-link:hover { color: var(--rr-purple); text-decoration:underline; }
.rr-ref-ico { color: var(--rr-purple) !important; }
.rr-ccta-phone a.num { text-decoration:none; }
.rr-ccta-phone a.num:hover { text-decoration:underline; }

/* =========================================================================
   RESPONSIVE — Assistenza page
   ========================================================================= */
@media (max-width: 1024px) {
	.rr-ahero { padding-top: 150px !important; min-height: 560px; }
	.rr-kpi-row { grid-template-columns: repeat(2, 1fr); row-gap: 34px; column-gap: 24px; }
	.rr-kpi:nth-child(3) { border-left: 0; padding-left: 0; margin-left: 0; }
	.rr-terr-pills { grid-template-columns: 1fr; row-gap: 24px; justify-items: start; }
	.rr-terr-pill { justify-content: flex-start; }
	.rr-terr-pill:not(:first-child)::before { display: none; }

	.rr-support-steps > .elementor-container { flex-direction: column; align-items: center; }
	.rr-support-steps > .elementor-container > .elementor-column { width: 100% !important; max-width: 360px; }
	.rr-proc { margin-bottom: 36px; padding: 0; }
	.rr-proc--conn .rr-proc-icowrap::before { display: none; }

	.rr-terr > .elementor-container { flex-direction: column; }
	.rr-terr .elementor-col-48, .rr-terr .elementor-col-52 { width: 100% !important; }
	.rr-terr .elementor-col-52 > .elementor-widget-wrap,
	.rr-terr .elementor-col-52 > .elementor-widget-wrap > .elementor-widget-html { height: auto; display: block; }
	.rr-terr-mapwrap { margin-top: 34px; max-width: 360px; margin-left: auto; margin-right: auto; }
	.rr-terr-map { flex: none !important; height: auto !important; object-fit: initial; }
}

@media (max-width: 767px) {
	/* the photo becomes a band across the top (technician in view) that fades
	   into the dark behind the copy; the empty photo column goes */
	.rr-ahero {
		min-height: 0; padding-top: 236px !important; padding-bottom: 40px !important;
		background-color: var(--rr-dark) !important;
		background-size: auto 300px !important;
		background-position: 72% 0 !important;
		background-repeat: no-repeat !important;
	}
	.rr-ahero::before { background: linear-gradient(180deg, rgba(7,6,12,.05) 0, rgba(7,6,12,.3) 150px, #07060C 300px); }
	.rr-ahero > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { padding-inline: 0 !important; }
	.rr-ahero > .elementor-container > .elementor-column:last-child { display: none; }
	.rr-ah-title .elementor-heading-title { font-size: 30px !important; }
	.rr-ah-body, .rr-ah-body p { max-width: 100% !important; }
	.rr-ah-mini { gap: 14px 20px; margin-bottom: 24px; }
	.rr-ah-mini-sep { display: none; }

	.rr-proc { margin-bottom: 36px; padding: 0; }
	.rr-support-steps > .elementor-container { flex-direction: column; }

	.rr-kpi-row { grid-template-columns: 1fr; gap: 28px; }
	.rr-kpi { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
	.rr-kpi:first-child { border-top: 0; padding-top: 0; }

	.rr-talk-shot { height: 200px; margin-top: 24px; }
	.rr-talk-cards > .elementor-container { flex-direction: column; }
	.rr-duo { padding: 30px 26px; }
	/* 3 pills at flex:1 1 0 can't shrink below their text's min-content width in
	   one row on a phone screen — each one was forcing the card past the
	   viewport edge. Stacking them removes that width pressure entirely. */
	.rr-duo-pills { flex-direction: column; gap: 14px; }
	.rr-duo-pill { padding: 0; }
	.rr-duo-pill:not(:first-child)::before { display: none; }
}

/* =========================================================================
   RESPONSIVE — Contatti page
   ========================================================================= */
@media (max-width: 1024px) {
	.rr-cform-card { flex-direction: column; gap: 30px; padding: 36px; }
	.rr-cform-left { flex: none; }
	.rr-cform-left p { max-width: 100%; }
	.rr-ccta { flex-wrap: wrap; gap: 20px; padding: 34px; }
	.rr-ccta-div { display: none; }
	.rr-ccta-phone { flex: 1 1 100%; }
	.rr-refs-row { flex-wrap: wrap; gap: 34px; }
	.rr-ref-item { flex: 1 1 220px; }
}
@media (max-width: 767px) {
	/* Shared rhythm for the three stacked modules below the hero: same side
	   gutter (inherited from the generic 24px section padding), same card
	   padding and same section-to-section spacing. */
	.rr-cform-card, .rr-ccta, .rr-refs-card { padding: 24px; border-radius: var(--rr-radius-lg); }
	.rr-chero { padding-top: 32px !important; padding-bottom: 4px !important; }
	.rr-ccta-sec { padding-bottom: 4px !important; }
	.rr-refs-sec { padding-bottom: 32px !important; }

	/* -- HERO: tighter vertical rhythm + a deliberate mobile crop of the
	   wave (not just a scaled-down desktop version) that stays mostly in
	   the top-right corner, out of the way of the eyebrow/title/body text. */
	.rr-chero-wave {
		width: 460px; height: auto;
		top: -125px; right: -190px; left: auto; bottom: auto; transform: none;
	}
	.rr-chero .rr-eyebrow--dash::after { margin-top: 10px; }
	.rr-chero .rr-hero-title { margin-top: 14px; }
	.rr-chero .rr-hero-title .elementor-heading-title { max-width: 100%; }
	.rr-chero .rr-hero-body, .rr-chero .rr-hero-body p { max-width: 100% !important; margin-top: 10px; }

	/* -- FORM CARD: single column, uniform vertical rhythm, larger tap targets */
	.rr-cform-card { flex-direction: column; gap: 20px; margin-top: 26px; }
	.rr-cform-left p { max-width: 100%; }
	.rr-cform-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; }
	.rr-cform-field { gap: 8px; }
	/* Inputs stay 16px here even though the token is 15px: iOS Safari
	   auto-zooms the page on focusing any field smaller than 16px. */
	.rr-cform-field input,
	.rr-cform-field textarea,
	.rr-cform-field select { font-size: 16px; padding: 13px 14px; }
	.rr-cform-field textarea { min-height: 100px; }
	.rr-cform-actions { flex-direction: column; align-items: stretch; gap: 16px; }
	.rr-cform-submit { width: 100%; justify-content: center; padding: 15px 26px; }
	.rr-cform-note { text-align: center; }

	/* -- "ASSISTENZA CLIENTI" card: icon / title block / phone stacked in a
	   clear, evenly-spaced column; the phone number keeps strong emphasis. */
	.rr-ccta { flex-direction: column; align-items: flex-start; gap: 18px; }
	.rr-ccta-ico { width: 60px; height: 60px; margin-left: 0; }
	.rr-ccta-ico-svg svg { height: 26px; }
	.rr-ccta-text { margin-left: 0; width: 100%; }
	.rr-ccta-text p { max-width: 100%; }
	.rr-ccta-phone { width: 100%; }
	.rr-ccta-phone .num { font-size: 32px; }

	/* -- "I NOSTRI RIFERIMENTI": the desktop flex:1 1 220px sets a 220px
	   flex-BASIS which, once the row switches to flex-direction:column,
	   is read as a minimum HEIGHT — that's what was blowing the card up
	   with huge empty gaps between contacts. Reset it to a natural,
	   content-sized row and give the three contacts a compact, regular gap. */
	.rr-refs-title { margin-bottom: 14px; }
	.rr-refs-row { flex-direction: column; gap: 20px; }
	.rr-ref-item { flex: none; height: auto; min-height: 0; }
	.rr-ref-ico { width: 26px; height: 26px; margin-bottom: 6px; }
}

/* =========================================================================
   DIGITAL SIGNAGE PAGE
   ========================================================================= */

/* -- HERO: reuses .rr-hero / .rr-hero-title / .rr-hero-body / .rr-eyebrow / .rr-btn --
   .rr-dshero overrides the generic .rr-hero padding-top (178px, tuned for the
   homepage hero) to match the vertical rhythm already used on the other
   inner pages (Assistenza's .rr-ahero uses 170px). */
.rr-dshero { padding-top: 170px !important; }
/* Tighten the eyebrow/title/body rhythm (same approach as .rr-ah-title/.rr-ah-body
   on Assistenza) and widen the body column so each <br>-separated line fits on
   one row instead of soft-wrapping again inside it. */
.rr-dshero-title .elementor-heading-title { margin: 18px 0 0 !important; max-width: 560px; }
.rr-dshero-body { margin-top: -20px !important; max-width: 500px !important; }
.rr-dshero-body, .rr-dshero-body p { max-width: 500px !important; }
.rr-dshero-btn { margin-top: -8px !important; }
.rr-ds-hero-shotwrap { position: relative; height: 100%; min-height: 440px; border-radius: var(--rr-radius-lg); overflow: hidden; }
.rr-ds-hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rr-radius-lg); }

/* -- 2. VANTAGGI DEL SERVIZIO: very light gray band, white card, 4-up icon row -- */
.rr-ds-vant-sec { background: #fff; padding: 34px 0 !important; }
.rr-ds-vant-card {
	background: var(--rr-light);
	border-radius: var(--rr-radius-lg); padding: 26px 34px;
}
.rr-ds-vant-row { display: flex; align-items: flex-start; }
.rr-ds-vant-item {
	display: flex; align-items: flex-start; gap: 16px;
	flex: 1 1 0; min-width: 0;
	padding: 0 26px;
	position: relative;
}
.rr-ds-vant-item:first-child { padding-left: 0; }
.rr-ds-vant-item:last-child { padding-right: 0; }
.rr-ds-vant-item:not(:first-child)::before {
	content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
	width: 1px; background: var(--rr-hairline);
}
.rr-ds-vant-ico { width: 50px; height: 50px; flex: 0 0 auto; }
.rr-ds-vant-ico svg { width: 100%; height: 100%; }
.rr-ds-vant-item b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: var(--rr-ink); margin-bottom: 4px; }
.rr-ds-vant-item span:not(.rr-ds-vant-ico) { display: block; font-size: var(--rr-fs-xs); line-height: 1.5; color: var(--rr-body); }
.rr-ds-vant-ico { color: var(--rr-purple) !important; }
/* Radio In-Store: only the "Dal brief alla messa in onda" panel should read as
   a box on this page — these two icon rows sit flat on the light section instead. */
.rr-ri-vantrow.rr-ds-vant-sec { padding: 20px 0 !important; background: var(--rr-light) !important; }
.rr-ri-vantrow .rr-ds-vant-card { background: none; padding: 0; border-radius: 0; }
/* Digital Signage: icon centered on the whole title+description block (mockup),
   not pinned to the top line — and each item itself centered in the row, so the
   icon lands at the same vertical center for every item regardless of how many
   lines its own text wraps to. */
.rr-dsvant .rr-ds-vant-row { align-items: center; }
.rr-dsvant .rr-ds-vant-item { align-items: center; }

/* -- 3. IL NOSTRO SERVIZIO: 50/50 duo, tinted left / full-bleed photo right -- */
.rr-ds-servizio-sec { background: var(--rr-light); padding: 0 !important; }
.rr-ds-servizio-sec > .elementor-container { align-items: stretch; }
.rr-ds-servizio-textcol { display: flex; align-items: center; }
.rr-ds-servizio-textcol > .elementor-widget-wrap { padding: 70px 60px 70px 0 !important; max-width: 480px; }
/* Elementor's default column gap gives every column's widget-wrap a 10px
   padding — the text column overrides it above, the photo column never did,
   leaving a thin gap around an image meant to bleed flush to the section. */
.rr-ds-servizio-sec .elementor-column:nth-child(2) > .elementor-widget-wrap { padding: 0 !important; }
/* height:100% needs a chain of definite heights — the Elementor widget/container
   wrappers between the stretched column and our .shotwrap don't set one on their
   own, so the photo was collapsing to its min-height instead of filling the row. */
.rr-ds-servizio-sec .elementor-widget-html,
.rr-ds-servizio-sec .elementor-widget-container { height: 100%; }
.rr-ds-servizio-shotwrap { height: 100%; min-height: 420px; }
/* !important: Elementor's own `.elementor img{height:auto}` is a class+element
   compound selector, which outranks a single class selector on specificity
   alone — it was silently winning and collapsing the photo to its intrinsic
   aspect ratio instead of filling the stretched column. */
.rr-ds-servizio-shot { display: block; width: 100%; height: 100% !important; object-fit: cover; }

/* -- 4. COME FUNZIONA: numbered dotted connector + icon/text pairs -- */
.rr-ds-cf-sec { background: #fff; padding: 70px 0 76px !important; }
.rr-ds-cf-numrow { display: flex; align-items: center; margin: 0 0 34px; }
.rr-ds-cf-numrow .rr-ds-cf-num-wrap { flex: 1 1 0; display: flex; align-items: center; }
.rr-ds-cf-num {
	width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
	border: 1.5px solid var(--rr-purple); color: var(--rr-purple);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--rr-font-display); font-weight: 700; font-size: 14px;
	background: #fff; position: relative; z-index: 2;
}
.rr-ds-cf-numrow .rr-ds-cf-num-wrap::after {
	content: ""; flex: 1 1 auto; height: 0;
	border-top: 2px dotted var(--rr-purple-soft); margin-left: 10px;
}
.rr-ds-cf-numrow .rr-ds-cf-num-wrap:last-child::after { display: none; }
.rr-ds-cf-row { display: flex; gap: 40px; }
.rr-ds-cf-step { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 18px; }
.rr-ds-cf-ico {
	position: relative;
	width: 60px; height: 60px; flex: 0 0 auto; border-radius: 50%;
	background: var(--rr-lavender); color: var(--rr-purple);
}
.rr-ds-cf-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; }
.rr-ds-cf-title { font-size: var(--rr-fs-xs); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--rr-purple); margin: 6px 0 6px; }
.rr-ds-cf-text { font-size: var(--rr-fs-xs); line-height: 1.55; color: var(--rr-body); margin: 0; }
.rr-ds-cf-wrap { display: flex; align-items: flex-start; gap: 48px; }
.rr-ds-cf-headcol { flex: 0 0 300px; padding-top: 4px; }
/* eyebrow and title are raw HTML here, not widgets, so they get no widget
   spacing: the dash needs the same 20px gap the widget-built headings have */
.rr-ds-cf-headcol .rr-eyebrow--dash::after { margin-bottom: 20px; }
.rr-ds-cf-headcol .rr-h2 { margin: 0; }
.rr-ds-cf-stepcol { flex: 1 1 0; min-width: 0; }
.rr-ds-cf-stepcol .rr-ds-cf-numrow { margin: 0 0 34px; }

/* -- 5. LE APPLICAZIONI: dark section, 4-up photo cards -- */
.rr-ds-app-sec { background: var(--rr-dark) !important; }
/* Header (title+intro) and card grid are two separate top-level sections so the
   grid can run full-width below the 58/42 header row instead of being squeezed
   into a third column alongside it. */
.rr-ds-app-headsec { padding: 76px 0 0 !important; }
.rr-ds-app-gridsec { padding: 0 0 76px !important; }
/* Intro paragraph sits in its own column with no eyebrow above it, so aligning
   both columns to "top" leaves it level with the eyebrow instead of the title
   next to it — nudge it down by the eyebrow's own height + gap. */
.rr-ds-app-intro { margin-top: 33px; }
/* Same eyebrow-offset issue as .rr-ds-app-intro: this intro paragraph's column
   has no eyebrow of its own, so "top" alignment left it level with the eyebrow
   next to it instead of the title. */
.rr-ds-serv2-intro { margin-top: 33px; }
.rr-ds-app-grid { display: flex; gap: 26px; margin-top: 44px; }
.rr-ds-app-card { flex: 1 1 0; min-width: 0; }
.rr-ds-app-imgwrap { border-radius: var(--rr-radius); overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: 20px; }
.rr-ds-app-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-ds-app-ico {
	width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
	border: 1.5px solid var(--rr-purple-soft); color: var(--rr-purple-soft);
	display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.rr-ds-app-ico svg { width: 19px; height: 19px; }
.rr-ds-app-title { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-fs-xs); letter-spacing: .3px; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.rr-ds-app-text { font-size: var(--rr-fs-xs); line-height: 1.55; color: #B9B9C6; margin: 0; }

/* -- 6. IL SERVIZIO ROS&ROS: light band, 3 numbered checklist columns -- */
.rr-ds-serv2-sec { background: var(--rr-lavender); padding: 76px 0 16px !important; }
.rr-ds-serv2-sec.rr-ds-serv2-sec--rows { padding: 16px 0 76px !important; }
.rr-ds-serv2-row { display: flex; gap: 26px; margin-top: 44px; }
.rr-ds-serv2-col {
	flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--rr-card-border);
	border-radius: var(--rr-radius-lg); padding: 30px 30px 32px;
}
.rr-ds-serv2-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.rr-ds-serv2-num { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-fs-m); color: var(--rr-purple); line-height: 1; }
.rr-ds-serv2-ico {
	position: relative;
	width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
	background: var(--rr-lavender); color: var(--rr-purple);
}
.rr-ds-serv2-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; }
.rr-ds-serv2-title { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-fs-m); color: var(--rr-ink); margin: 0 0 4px; }
.rr-ds-serv2-sub { font-size: var(--rr-fs-s); font-weight: 600; color: var(--rr-purple); margin: 0 0 14px; }
.rr-ds-serv2-hr { border: 0; border-top: 1px solid var(--rr-hairline); margin: 0 0 16px; }
.rr-ds-serv2-list { list-style: none; margin: 0; padding: 0; }
.rr-ds-serv2-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.8px; line-height: 1.5; color: var(--rr-body); margin-bottom: 12px; }
.rr-ds-serv2-list li:last-child { margin-bottom: 0; }
.rr-ds-serv2-list li b { color: var(--rr-ink); font-weight: 700; }
.rr-ds-serv2-check { width: 16px; height: 16px; flex: 0 0 auto; color: var(--rr-purple); margin-top: 2px; }
.rr-ds-serv2-check svg { width: 100%; height: 100%; }
.rr-ds-serv2-callout {
	display: flex; align-items: flex-start; gap: 12px; margin-top: 18px;
	background: var(--rr-lavender); border-radius: 14px; padding: 14px 16px;
}
.rr-ds-serv2-callout-ico {
	position: relative;
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
	background: #fff; color: var(--rr-purple);
}
.rr-ds-serv2-callout-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; }
.rr-ds-serv2-callout p { margin: 0; font-size: var(--rr-fs-xs); line-height: 1.5; color: var(--rr-body); }

/* ---- responsive baseline (stack to 1 column below tablet width) ---- */
@media (max-width: 1024px) {
	.rr-ds-vant-row { flex-wrap: wrap; row-gap: 22px; }
	.rr-ds-vant-item { flex: 1 1 45%; padding: 0 20px; }
	.rr-ds-vant-item:nth-child(2)::before { display: block; }
	.rr-ds-vant-item:nth-child(odd) { padding-left: 0; }
	.rr-ds-app-grid, .rr-ds-serv2-row { flex-wrap: wrap; row-gap: 26px; }
	.rr-ds-app-card, .rr-ds-serv2-col { flex: 1 1 45%; }

	/* the numbered step row (3-4 items) has no room at tablet width either —
	   same stack-and-drop-the-connector treatment as the phone breakpoint. */
	.rr-ds-cf-numrow { display: none; }
	.rr-ds-cf-row { flex-direction: column; gap: 24px; }
	.rr-ds-cf-wrap { flex-direction: column; gap: 24px; }
}
@media (max-width: 767px) {
	.rr-ds-vant-sec { padding: 26px 0 !important; }
	.rr-ds-vant-card { padding: 22px 20px; }
	.rr-ds-vant-row { flex-direction: column; row-gap: 20px; }
	.rr-ds-vant-item { flex: 1 1 auto; padding: 0 !important; }
	.rr-ds-vant-item::before { display: none !important; }

	.rr-ds-servizio-sec > .elementor-container { flex-wrap: wrap; }
	.rr-ds-servizio-textcol > .elementor-widget-wrap { padding: 40px 24px !important; max-width: 100%; }
	.rr-ds-servizio-shotwrap { min-height: 260px; }

	.rr-ds-cf-sec { padding: 40px 0 44px !important; }
	.rr-ds-cf-numrow { display: none; }
	.rr-ds-cf-row { flex-direction: column; gap: 24px; }
	.rr-ds-cf-wrap { flex-direction: column; gap: 24px; }
	.rr-ds-cf-headcol { flex-basis: auto; padding-top: 0; }

	.rr-ds-app-headsec { padding: 44px 0 0 !important; }
	.rr-ds-app-gridsec { padding: 0 0 44px !important; }
	.rr-ds-app-grid { flex-direction: column; gap: 28px; }

	.rr-ds-serv2-sec { padding: 44px 0 12px !important; }
	.rr-ds-serv2-sec.rr-ds-serv2-sec--rows { padding: 12px 0 44px !important; }
	.rr-ds-serv2-row { flex-direction: column; gap: 20px; }
}

/* =========================================================================
   RADIO IN-STORE PAGE
   (Reuses .rr-hero/.rr-hero-title/.rr-hero-body/.rr-eyebrow/.rr-h2/.rr-body/
   .rr-btn, and the Digital Signage page's .rr-ds-vant-*/.rr-ds-cf-*/
   .rr-ds-servizio-*/.rr-ds-serv2-list component classes wherever the shape
   matches, so type scale and spacing stay identical across pages. Only
   genuinely new components get their own rr-ri-* classes below.)
   ========================================================================= */

/* -- 1. HERO: dark, no bg photo — a raster wave graphic + 3 floating player cards -- */
.rr-rihero { padding: 170px 0 100px !important; min-height: 620px; }
.rr-ri-title .elementor-heading-title { margin: 18px 0 0 !important; max-width: 480px; }
.rr-ri-body, .rr-ri-body p { margin-top: 14px !important; max-width: 440px !important; }
/* Background photo is a real Elementor section background (like the home hero),
   so it's always full-bleed; .rr-ri-heroart just anchors the floating player cards. */
.rr-ri-heroart { position: relative; }
.rr-rihero > .elementor-container { position: relative; z-index: 2; }
.rr-ri-player {
	position: absolute; z-index: 3; width: 240px;
	background: rgba(15, 13, 26, .82); backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px 16px;
	box-shadow: 0 24px 40px -20px rgba(0,0,0,.5);
}
.rr-ri-player--a { top: 6px; right: 34%; }
.rr-ri-player--b { top: 38px; right: 0; width: 220px; }
.rr-ri-player--c { top: 300px; right: 4%; }
.rr-ri-player-ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; background: var(--rr-purple); color: #fff; margin-bottom: 8px;
}
.rr-ri-player-ico svg { width: 16px; height: 16px; }
.rr-ri-player-body b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: #fff; }
.rr-ri-player-body span { display: block; font-size: var(--rr-fs-xs); line-height: 1.4; color: #B9B9C6; margin-top: 3px; }
.rr-ri-player-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rr-ri-player-play {
	width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12);
	color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	border: 0; padding: 0; cursor: pointer;
}
.rr-ri-player-play > span { display: flex; }
.rr-ri-player-play svg { width: 9px; height: 9px; }
/* clickable cards (audio: rosros_site_script() in functions.php) */
.rr-ri-player[data-audio] { cursor: pointer; transition: border-color .2s ease; }
.rr-ri-player[data-audio]:hover,
.rr-ri-player.is-playing { border-color: rgba(139, 92, 246, .6); }
.rr-ri-player.is-playing .rr-ri-player-play { background: var(--rr-purple); }
.rr-ri-player-pauseico,
.rr-ri-player.is-playing .rr-ri-player-playico { display: none !important; }
.rr-ri-player.is-playing .rr-ri-player-pauseico { display: flex !important; }
/* the played part of the waveform (--rr-p, 0-100%) turns white */
.rr-ri-player-wave {
	flex: 1 1 auto; height: 14px; border-radius: 2px;
	background:
		repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px) 0 0 / var(--rr-p, 0%) 100% no-repeat,
		repeating-linear-gradient(90deg, var(--rr-purple-soft) 0 2px, transparent 2px 5px);
	opacity: .8;
}
.rr-ri-player-dur { font-size: var(--rr-fs-xs); color: #9a9aa8; flex: 0 0 auto; }
.rr-ri-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.rr-ri-btn-primary {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--rr-grad-btn); color: #fff !important; text-decoration: none;
	font-weight: 600; font-size: var(--rr-fs-s); padding: 16px 28px; border-radius: 40px;
	box-shadow: 0 14px 26px -12px rgba(124, 58, 237, .6); transition: transform .2s ease;
}
.rr-ri-btn-primary:hover { transform: translateY(-2px); }
.rr-ri-btn-primary .rr-ri-btn-arrow svg { width: 15px; height: 15px; }
.rr-ri-btn-secondary {
	display: inline-flex; align-items: center; gap: 10px;
	color: #fff !important; text-decoration: none; font-weight: 600; font-size: var(--rr-fs-s);
	padding: 14px 22px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 40px;
	transition: border-color .2s ease;
}
.rr-ri-btn-secondary:hover { border-color: rgba(255,255,255,.55); }
.rr-ri-btn-play { display: inline-flex; }
.rr-ri-btn-play svg { width: 10px; height: 10px; }

/* -- 2. COME NASCE: numbered dotted connector (reused) + 4 photo cards -- */
.rr-ri-cn-sec { background: #fff; padding: 96px 0 88px; }
/* numbered connector row must span the same width as the card grid below it
   (it's a bare block by default, but something in the cascade was shrinking
   it to content width) so 01-04 line up over their cards. */
.rr-ri-cn-sec .rr-ds-cf-numrow { width: 100%; }
.rr-ri-cn-grid { display: flex; gap: 24px; margin-top: 10px; }
.rr-ri-cn-card {
	flex: 1 1 0; min-width: 0;
	background: #fff; border: 1px solid var(--rr-card-border); border-radius: var(--rr-radius-lg);
	overflow: hidden; box-shadow: var(--rr-shadow-card);
}
/* height:0 + padding-bottom is a more reliable box than aspect-ratio here:
   it guarantees a definite height for the badge to overlap, regardless of
   how the browser resolves the image's percentage height. */
.rr-ri-cn-imgwrap { position: relative; height: 0; padding-bottom: 75%; overflow: hidden; }
.rr-ri-cn-imgwrap img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-ri-cn-badge {
	position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 10px;
	background: #fff; color: var(--rr-purple); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 20px -10px rgba(0,0,0,.35);
}
.rr-ri-cn-badge-ico svg { width: 21px; height: 21px; }
.rr-ri-cn-title { font-size: var(--rr-fs-m); font-weight: 700; color: var(--rr-ink); margin: 18px 22px 8px; position: relative; padding-top: 12px; }
.rr-ri-cn-title::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--rr-purple); }
.rr-ri-cn-text { font-size: var(--rr-fs-xs); line-height: 1.55; color: var(--rr-body); margin: 0 22px 24px; }

/* -- 3. PORTALE CLIENTE: light card, text + dashboard screenshot -- */
.rr-ri-portal-sec { background: var(--rr-light); border-radius: var(--rr-radius-lg); padding: 54px 0 !important; overflow: hidden; position: relative; }
.rr-ri-portal-textcol > .elementor-widget-wrap { max-width: 400px; }
/* Screenshot bleeds to the panel's true bottom edge (mockup) instead of
   sitting centered with the same padding as the text column. A negative
   bottom margin on the column fights flexbox's own row-height calculation
   (it shrinks the whole row, text column included) — absolute positioning
   sidesteps that: the column keeps its width for layout, but its content
   is taken out of flow so the row's height is set by the text column alone. */
.rr-ri-portal-sec > .elementor-container > .elementor-column:nth-child(2) { position: relative; }
/* Elementor's own .elementor-widget-wrap{position:relative} is a closer
   ancestor than our column, so it — not the column — was becoming .rr-ri-dash's
   containing block for the absolute positioning below. Neutralizing it here
   makes the column (which is the full row height) the reference instead. */
.rr-ri-portal-sec > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap,
.rr-ri-portal-sec > .elementor-container > .elementor-column:nth-child(2) > .elementor-widget-wrap > .elementor-widget { position: static; }
.rr-ri-dash { position: absolute; left: 0; right: 0; bottom: -54px; }
.rr-ri-portal-title .elementor-heading-title { margin: 14px 0 12px !important; }
.rr-ri-portal-feats { display: flex; gap: 26px; margin-top: 22px; }
.rr-ri-portal-feat { display: flex; align-items: flex-start; gap: 10px; }
.rr-ri-portal-feat-ico {
	position: relative;
	width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--rr-purple);
	flex: 0 0 auto;
}
.rr-ri-portal-feat-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; }
.rr-ri-portal-feat b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: var(--rr-ink); }
.rr-ri-portal-feat span { display: block; font-size: var(--rr-fs-xs); color: var(--rr-body); margin-top: 2px; max-width: 150px; }

.rr-ri-dash img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* -- 4. PALINSESTO SU MISURA: dark section, occasion cards + triad + quote -- */
.rr-ri-pal-sec { background: var(--rr-dark) !important; padding: 76px 0 0 !important; }
.rr-ri-pal-sec2 { padding: 0 0 76px !important; }
.rr-ri-pal-body, .rr-ri-pal-body p { margin-top: 18px !important; max-width: 480px !important; }
.rr-ri-pal-note { display: flex; align-items: flex-start; gap: 14px; padding-top: 4px; }
.rr-ri-pal-note-ico {
	position: relative;
	width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--rr-purple-soft);
	color: var(--rr-purple-soft); flex: 0 0 auto;
}
.rr-ri-pal-note-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; }
.rr-ri-pal-note b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: #fff; margin-bottom: 4px; }
.rr-ri-pal-note span { display: block; font-size: var(--rr-fs-xs); line-height: 1.5; color: #9a9aa8; max-width: 190px; }
.rr-ri-occ-grid { display: flex; gap: 14px; }
.rr-ri-occ-card {
	flex: 1 1 0; min-width: 0; background: var(--rr-dark-card); border: 1px solid rgba(255,255,255,.06);
	border-radius: var(--rr-radius); padding: 28px 12px; text-align: center;
}
.rr-ri-occ-ico {
	width: 52px; height: 52px; border-radius: 50%; background: var(--rr-purple); color: #fff;
	display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.rr-ri-occ-ico svg { width: 22px; height: 22px; }
.rr-ri-occ-title { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-fs-xs); letter-spacing: .5px; color: #fff; margin: 0 0 10px; }
.rr-ri-occ-title::after { content: ""; display: block; width: 22px; height: 2px; background: var(--rr-purple-soft); margin: 10px auto 0; }
.rr-ri-occ-text { font-size: var(--rr-fs-xs); line-height: 1.45; color: #9a9aa8; margin: 0; }

.rr-ri-tri-row {
	display: flex; background: var(--rr-dark-card); border: 1px solid rgba(255,255,255,.06);
	border-radius: var(--rr-radius); padding: 26px 30px;
}
.rr-ri-tri-item { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 0 20px; position: relative; }
.rr-ri-tri-item:first-child { padding-left: 0; }
.rr-ri-tri-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: rgba(255,255,255,.08); }
.rr-ri-tri-ico { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rr-purple-soft); color: var(--rr-purple-soft); flex: 0 0 auto; }
.rr-ri-tri-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 19px; height: 19px; }
.rr-ri-tri-item b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: #fff; margin-bottom: 4px; }
.rr-ri-tri-item span { display: block; font-size: var(--rr-fs-xs); line-height: 1.5; color: #9a9aa8; }

.rr-ri-quote {
	display: flex; align-items: center; gap: 18px; background: rgba(139, 92, 246, .08);
	border: 1px solid rgba(139, 92, 246, .2); border-radius: 999px; padding: 16px 30px;
}
.rr-ri-quote-ico {
	position: relative;
	width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--rr-purple-soft);
	color: var(--rr-purple-soft); flex: 0 0 auto;
}
.rr-ri-quote-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 13px; }
.rr-ri-quote p { margin: 0; font-size: var(--rr-fs-s); font-weight: 500; color: #C8C8D4; }
.rr-ri-quote p .rr-p { font-weight: 700; }

/* -- 5. PRODUZIONE CONTENUTI / IL NOSTRO PROCESSO -- */
/* Whole "Ogni messaggio nasce da un progetto" block reads as one continuous
   light-tint section (title/image, both icon rows, this section) — only the
   "Dal brief alla messa in onda" panel is white, lifted off it. */
.rr-ri-prod-sec { background: var(--rr-light) !important; }
.rr-ri-proc-sec { background: var(--rr-light); padding: 0 0 48px; }
.rr-ri-proc-panel { background: #fff; border: 1px solid var(--rr-card-border); border-radius: var(--rr-radius-lg); padding: 40px 44px; }
.rr-ri-proc-top { display: flex; gap: 40px; align-items: flex-start; }
.rr-ri-proc-intro { flex: 0 0 250px; }
.rr-ri-proc-title { font-family: var(--rr-font-body); font-weight: 600; font-size: var(--rr-fs-m); line-height: 1.22; letter-spacing: -.4px; color: var(--rr-ink); margin: 14px 0 10px; }
.rr-ri-proc-text { font-size: var(--rr-fs-xs); line-height: 1.55; color: var(--rr-body); margin: 0; }
.rr-ri-proc-right { flex: 1 1 auto; min-width: 0; }
.rr-ri-proc-right .rr-ds-cf-numrow { margin-bottom: 26px; }
.rr-ri-proc-right .rr-ds-cf-row { gap: 22px; }
.rr-ri-proc-right .rr-ds-cf-ico { width: 48px; height: 48px; }
.rr-ri-proc-right .rr-ds-cf-ico svg { width: 21px; height: 21px; }
.rr-ri-proc-right .rr-ds-cf-title { font-size: var(--rr-fs-xs); margin: 4px 0 4px; }
.rr-ri-proc-right .rr-ds-cf-text { font-size: var(--rr-fs-xs); }

/* -- 6. COSTRUIAMO OGNI DETTAGLIO: 3 sector cards + settori strip -- */
.rr-ri-sector-sec { background: #fff; padding: 96px 0 88px; }
.rr-ri-sector-grid { display: flex; gap: 26px; }
.rr-ri-sector-card {
	flex: 1 1 0; min-width: 0;
	background: #fff; border: 1px solid var(--rr-card-border); border-radius: var(--rr-radius-lg);
	overflow: hidden; box-shadow: var(--rr-shadow-card); padding-bottom: 24px;
	display: flex; flex-direction: column;
}
.rr-ri-sector-imgwrap { position: relative; aspect-ratio: 16 / 10; }
.rr-ri-sector-imgwrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The photos already carry a baked-in badge top-left, but it isn't the same
   size across the three source images (farmacia's is noticeably smaller) —
   this uniform CSS badge sits bottom-left instead, out of its way, so every
   card gets an identically-sized icon regardless of the source asset. */
.rr-ri-sector-badge {
	position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 10px;
	background: #fff; color: var(--rr-purple); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 20px -10px rgba(0,0,0,.35);
}
.rr-ri-sector-badge-ico svg { width: 21px; height: 21px; }
.rr-ri-sector-card > *:not(.rr-ri-sector-imgwrap) { margin-left: 22px; margin-right: 22px; }
.rr-ds-eyebrow-sm { display: block; font-size: var(--rr-fs-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rr-purple); margin: 22px 0 6px; }
.rr-ri-sector-title { font-family: var(--rr-font-display); font-weight: 700; font-size: var(--rr-fs-m); color: var(--rr-ink); margin: 0 0 8px; }
.rr-ri-sector-text { font-size: var(--rr-fs-xs); line-height: 1.55; color: var(--rr-body); margin: 0 0 16px; }
.rr-ri-sector-card .rr-ds-serv2-hr { margin-top: auto; margin-bottom: 14px; }
.rr-ri-sector-card .rr-ds-serv2-list li { font-size: var(--rr-fs-xs); }

.rr-ri-sectors-strip { border: 1px solid var(--rr-card-border); border-radius: var(--rr-radius-lg); padding: 26px 34px; text-align: center; }
.rr-ri-sectors-label { display: block; margin-bottom: 18px; }
.rr-ri-sectors-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 0; }
.rr-ri-sectors-row span {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	flex: 1 1 0; min-width: 100px; padding: 0 12px; position: relative;
	font-size: var(--rr-fs-xs); font-weight: 500; color: var(--rr-ink-soft);
}
.rr-ri-sectors-row span:not(:first-child)::before {
	content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: var(--rr-hairline);
}
.rr-ri-sectors-ico {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px !important; height: 22px !important; color: var(--rr-ink-soft);
}
.rr-ri-sectors-ico svg { width: 20px; height: 20px; }

/* -- 7. LA NOSTRA TECNOLOGIA -- */
.rr-ri-tech-sec { background: #F4F2F9; padding: 96px 0 0; }
.rr-ri-tech-sec2 { padding: 0 0 88px; }
.rr-ri-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; }
.rr-ri-tech-item { display: flex; gap: 14px; align-items: flex-start; }
.rr-ri-tech-ico {
	position: relative;
	width: 54px; height: 54px; border-radius: 50%; background: var(--rr-icon-bg); color: var(--rr-purple);
	flex: 0 0 auto;
}
.rr-ri-tech-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; stroke-width: 1.9; }
.rr-ri-tech-item b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: var(--rr-ink); margin-bottom: 4px; }
.rr-ri-tech-item > div span { display: block; font-size: var(--rr-fs-xs); line-height: 1.5; color: var(--rr-body); }

.rr-ri-tech-caption { text-align: right; font-size: var(--rr-fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #B4AFC2; line-height: 1.5; margin-bottom: 26px; }
.rr-ri-lisa-wrap {
	position: relative; padding-top: 18px;
	background: radial-gradient(60% 60% at 65% 45%, rgba(139,92,246,.16) 0%, rgba(139,92,246,0) 70%);
}
/* The device photo already has its own tilt, wave backdrop and "LISA / LCD
   Ultimate" badge baked in (see Immagini/Tecnologia/LISA.png) — no extra
   rotation or a second CSS badge on top. It bleeds well past its own
   column, toward the section's outer edge, for visual weight. */
.rr-ri-lisa-img { width: 118%; max-width: 118%; height: auto; display: block; }

.rr-ri-techbottom-row { display: flex; align-items: flex-start; gap: 34px; border-top: 1px solid var(--rr-hairline); padding-top: 34px; margin-top: 16px; }
.rr-ri-techbottom-item { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 0; min-width: 0; }
.rr-ri-techbottom-ico {
	position: relative;
	width: 54px; height: 54px; border-radius: 50%; background: var(--rr-icon-bg); color: var(--rr-purple);
	flex: 0 0 auto;
}
.rr-ri-techbottom-ico svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; stroke-width: 1.9; }
.rr-ri-techbottom-item b { display: block; font-size: var(--rr-fs-xs); font-weight: 700; color: var(--rr-ink); margin-bottom: 4px; }
.rr-ri-techbottom-item > div span { display: block; font-size: var(--rr-fs-xs); line-height: 1.5; color: var(--rr-body); }

/* ---- responsive baseline ---- */
@media (max-width: 1024px) {
	.rr-ri-cn-grid, .rr-ri-occ-grid, .rr-ri-sector-grid { flex-wrap: wrap; row-gap: 24px; }
	.rr-ri-cn-card, .rr-ri-sector-card { flex: 1 1 45%; }
	.rr-ri-occ-card { flex: 1 1 30%; }
	.rr-ri-tri-row { flex-wrap: wrap; row-gap: 20px; }
	.rr-ri-tri-item { flex: 1 1 45%; }
	.rr-ri-proc-top { flex-direction: column; }
	/* its desktop flex-basis (250px) would turn into a 250px height once stacked */
	.rr-ri-proc-intro { flex: none; }
	.rr-ri-heroart { display: none; }
	/* 5-step row clipped its text at tablet width once stacked under the intro —
	   same stack-and-drop-the-connector treatment as the phone breakpoint. */
	.rr-ri-proc-right .rr-ds-cf-numrow { display: none; }
	.rr-ri-proc-right .rr-ds-cf-row { flex-direction: column; gap: 18px; }
}
@media (max-width: 767px) {
	.rr-rihero { padding: 150px 0 60px !important; min-height: 0; }
	.rr-ri-player { display: none; }
	.rr-ri-actions { flex-direction: column; align-items: flex-start; gap: 14px; }

	.rr-ri-cn-sec, .rr-ri-sector-sec, .rr-ri-tech-sec { padding: 44px 0 !important; }
	.rr-ri-cn-grid, .rr-ri-occ-grid, .rr-ri-sector-grid { flex-direction: column; }
	.rr-ri-cn-card, .rr-ri-occ-card, .rr-ri-sector-card { flex: 1 1 auto; }

	.rr-ri-portal-sec { padding: 30px 0 !important; }
	.rr-ri-portal-sec > .elementor-container { flex-wrap: wrap; }
	/* Stacked on mobile: back to normal flow, no bottom bleed. */
	.rr-ri-dash { position: static; margin-top: 20px; }
	.rr-ri-dash-body { flex-direction: column; }
	.rr-ri-dash-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
	.rr-ri-dash-main, .rr-ri-dash-cal { border-right: 0; }

	.rr-ri-tri-row { flex-direction: column; padding: 22px; }
	.rr-ri-tri-item { padding: 0 !important; }
	.rr-ri-tri-item::before { display: none !important; }

	.rr-ri-proc-panel { padding: 26px 22px; }
	.rr-ri-proc-right .rr-ds-cf-numrow { display: none; }
	.rr-ri-proc-right .rr-ds-cf-row { flex-direction: column; gap: 18px; }

	.rr-ri-tech-grid { grid-template-columns: 1fr; }
	.rr-ri-techbottom-row { flex-direction: column; gap: 20px; }
}

/* =========================================================================
   FAQ (index + single-question detail page)
   ========================================================================= */
.rr-faq-hero { padding: 150px 0 64px !important; }
.rr-faq-hero-col .elementor-widget-wrap { padding-right: 40px; }
.rr-faq-hero-img img { border-radius: var(--rr-radius-lg); width: 100% !important; height: 260px !important; object-fit: cover; }
.rr-faq-dhero { padding: 150px 0 40px !important; }
.rr-faq-dhero .rr-hero-title .elementor-heading-title { max-width: none; }

.rr-faq-side .elementor-widget-wrap { padding-right: 28px; }

/* -- sidebar category list -- */
.rr-faq-catlist {
	border: 1px solid var(--rr-card-border); border-radius: var(--rr-radius);
	padding: 22px 22px 6px; margin-bottom: 20px;
}
.rr-faq-catlist-title {
	display: block; font-family: var(--rr-font-body); font-weight: 700; font-size: 12px;
	letter-spacing: 1.5px; color: var(--rr-ink-soft); margin-bottom: 14px;
}
.rr-faq-catlist-item {
	display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
	border-top: 1px solid var(--rr-hairline);
}
.rr-faq-catlist-item:first-of-type { border-top: 0; }
a.rr-faq-catlist-item { text-decoration: none !important; }
a.rr-faq-catlist-item:hover b { color: var(--rr-purple); }
.rr-faq-catlist-num { font-family: var(--rr-font-display); font-weight: 700; font-size: 13px; color: var(--rr-purple); padding-top: 2px; }
.rr-faq-catlist-txt { display: flex; flex-direction: column; gap: 3px; }
.rr-faq-catlist-txt b { font-size: 14.5px; font-weight: 600; color: var(--rr-ink); line-height: 1.3; }
.rr-faq-catlist-txt small { font-size: 12.5px; color: var(--rr-body); }

/* -- sidebar CTA cards (lavender on index, dark on detail) -- */
.rr-faq-cta { border-radius: var(--rr-radius); padding: 26px 24px; }
.rr-faq-cta--lav { background: var(--rr-lavender); }
.rr-faq-cta--dark { background: var(--rr-dark); }
.rr-faq-cta-ico {
	display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	border-radius: 50%; background: #fff; color: var(--rr-purple); margin-bottom: 14px;
}
.rr-faq-cta-ico svg { width: 20px; height: 20px; }
.rr-faq-cta h4, .rr-faq-cta-title { font-family: var(--rr-font-display); font-weight: 700; margin: 0 0 10px; }
.rr-faq-cta h4 { font-size: 19px; color: var(--rr-ink); line-height: 1.3; }
.rr-faq-cta--dark h4 { color: #fff; }
.rr-faq-cta-title { display: block; font-size: 12px; letter-spacing: 1.5px; color: var(--rr-purple); margin-bottom: 16px; }
.rr-faq-cta p { font-size: 14px; line-height: 1.55; color: var(--rr-body); margin: 0 0 18px; }
.rr-faq-cta--dark p { color: var(--rr-body-light); }
.rr-faq-cta-btn {
	display: inline-flex; align-items: center; gap: 10px; background: var(--rr-ink); color: #fff !important;
	font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 999px; text-decoration: none !important;
}
.rr-faq-cta-btn--dark { background: var(--rr-grad-btn); }
.rr-faq-cta-arrow { display: inline-flex; width: 15px; height: 15px; }
.rr-faq-cta-arrow svg { width: 100%; height: 100%; }

.rr-faq-related-link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 14.5px; font-weight: 600; color: var(--rr-ink) !important; text-decoration: none !important;
	padding: 14px 0; border-top: 1px solid var(--rr-hairline);
}
.rr-faq-related-link .rr-faq-cta-arrow { color: var(--rr-purple); flex: none; }

/* -- search bar -- */
.rr-faq-search {
	display: flex; align-items: center; gap: 12px; border: 1px solid var(--rr-card-border);
	border-radius: 999px; padding: 15px 22px; margin-bottom: 28px;
}
.rr-faq-search-ico { flex: none; width: 18px; height: 18px; color: var(--rr-body); }
.rr-faq-search-ico svg { width: 100%; height: 100%; }
.rr-faq-search input {
	border: 0; outline: 0; flex: 1; font-size: 15px; font-family: var(--rr-font-body); color: var(--rr-ink); background: transparent;
}
.rr-faq-search input::placeholder { color: #9A9AA6; }
.rr-faq-search-hint { font-size: 12.5px; color: #B3B3BE; white-space: nowrap; }
@media (max-width: 600px) {
	/* the "Es. ..." example has no room next to the input below ~600px — it was
	   clipped off-canvas instead of wrapping, so it's hidden rather than shown half-cut. */
	.rr-faq-search-hint { display: none; }
}

/* -- category accordion -- */
.rr-faq-cats { display: flex; flex-direction: column; }
.rr-faq-cat { border-top: 1px solid var(--rr-hairline); }
.rr-faq-cat:last-child { border-bottom: 1px solid var(--rr-hairline); }
.rr-faq-cat summary {
	display: flex; align-items: center; gap: 18px; padding: 24px 4px; cursor: pointer; list-style: none;
}
.rr-faq-cat summary::-webkit-details-marker { display: none; }
.rr-faq-cat-num { font-family: var(--rr-font-display); font-weight: 700; font-size: 22px; color: var(--rr-purple); width: 40px; flex: none; }
.rr-faq-cat-head { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rr-faq-cat-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--rr-body); }
.rr-faq-cat-title { font-family: var(--rr-font-display); font-weight: 700; font-size: 19px; color: var(--rr-ink); }
.rr-faq-cat-count { font-size: 13.5px; color: var(--rr-body); flex: none; }
.rr-faq-cat-ico-chev { display: inline-flex; width: 17px; height: 17px; color: var(--rr-ink); flex: none; transition: transform .2s ease; }
.rr-faq-cat-ico-chev svg { width: 100%; height: 100%; }
.rr-faq-cat[open] .rr-faq-cat-ico-chev { transform: rotate(180deg); }
.rr-faq-cat-body { padding: 0 4px 26px 58px; display: flex; flex-direction: column; }
.rr-faq-qrow {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 15px; color: var(--rr-ink) !important; text-decoration: none !important;
	padding: 13px 0; border-top: 1px solid var(--rr-hairline);
}
.rr-faq-cat-body .rr-faq-qrow:first-child { border-top: 0; }
.rr-faq-qrow .rr-faq-cta-arrow, .rr-faq-qrow span:last-child { color: var(--rr-purple); flex: none; width: 15px; height: 15px; }
.rr-faq-qempty { font-size: 14px; color: var(--rr-body); margin: 0; }

/* search: questions not matching are hidden */
.rr-faq-cats [hidden], .rr-faq-noresults[hidden] { display: none !important; }
.rr-faq-search input { -webkit-appearance: none; appearance: none; }
.rr-faq-noresults { font-size: 15px; color: var(--rr-body); margin: 0 0 24px; }
.rr-faq-noresults a { color: var(--rr-purple); }

/* -- answer page: the answer uses the article rules (.rr-news-article);
      sidebar = other questions of the category + contact card; below, the form -- */
.rr-faq-answer b { color: var(--rr-ink); }
.rr-faq-related { margin-bottom: 20px; }
.rr-faq-related .rr-faq-related-link:first-of-type { border-top: 0; }
.rr-faq-form { margin-top: 0; }
.rr-faq-embed .rr-faq-related-link { border-top: 0; padding-bottom: 0; }

@media (max-width: 767px) {
	.rr-faq-hero, .rr-faq-dhero { padding-top: 34px !important; padding-bottom: 24px !important; }
	.rr-faq-hero > .elementor-container { flex-wrap: wrap; }
	.rr-faq-hero-col .elementor-widget-wrap { padding-right: 0; }
	.rr-faq-main > .elementor-container { flex-wrap: wrap; }
	.rr-faq-side .elementor-widget-wrap { padding-right: 0; margin-bottom: 30px; }
	.rr-faq-cat-body { padding-left: 4px; }
}

/* =========================================================================
   NEWS & INSIGHTS (listing + article detail)
   ========================================================================= */
.rr-news-hero, .rr-news-dhero { padding: 150px 0 64px !important; }
.rr-news-hero-col .elementor-widget-wrap { padding-right: 40px; }
.rr-news-hero-img img,
.rr-news-hero .rr-news-hero-img img { border-radius: var(--rr-radius-lg); width: 100% !important; height: 380px !important; object-fit: cover; }
.rr-news-dhero .rr-news-hero-img img { height: 300px; }
.rr-news-hero-btn { margin-top: 8px; }

.rr-news-h2 .elementor-heading-title { margin: 0 0 26px; }
.rr-news-h2-soft { color: var(--rr-body); font-weight: 500; }

.rr-news-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.rr-news-filter {
	display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600;
	padding: 11px 20px; border-radius: 999px; border: 1px solid var(--rr-hairline);
	color: var(--rr-ink-soft); background: #fff;
}
.rr-news-filter { text-decoration: none !important; transition: border-color .2s ease; }
.rr-news-filter:hover { border-color: var(--rr-purple-soft); }
.rr-news-filter.is-active { background: var(--rr-grad-btn); border-color: transparent; color: #fff; }
.rr-news-empty { font-size: 15px; color: var(--rr-body); margin: 0; }
/* [rr_news_*] output mimics Elementor widgets; real ones are flex items (their
   own formatting context), so match that or the child margins collapse */
.elementor-shortcode > .elementor-element { display: flow-root; }

.rr-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.rr-news-pager { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:48px; }
.rr-news-page { min-width:40px; padding:9px 14px; border:1px solid var(--rr-card-border); border-radius:999px; text-align:center; font-size:14px; font-weight:600; color:var(--rr-ink) !important; text-decoration:none !important; }
a.rr-news-page:hover { border-color:var(--rr-purple); color:var(--rr-purple) !important; }
.rr-news-page.is-current { background:var(--rr-purple); border-color:var(--rr-purple); color:#fff !important; }
.rr-news-card { display: block; text-decoration: none !important; }
.rr-news-card-img { margin: 0 0 16px; line-height: 0; border-radius: var(--rr-radius); overflow: hidden; }
.rr-news-card-img img { display: block; width: 100% !important; height: 190px !important; object-fit: cover; }
.rr-news-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.rr-news-card-date { color: var(--rr-body); text-transform: uppercase; }
.rr-news-card-cat { color: var(--rr-purple); background: var(--rr-icon-bg); border-radius: 999px; padding: 4px 11px; text-transform: uppercase; }
.rr-news-card-title { font-family: var(--rr-font-display); font-size: 18px; font-weight: 700; line-height: 1.3; min-height: 2.6em; color: var(--rr-ink); margin: 0 0 8px; letter-spacing: -0.2px; }
.rr-news-card-text { font-size: 13.5px; line-height: 20px; color: var(--rr-body); margin: 0 0 14px; }
.rr-news-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--rr-purple) !important; }
.rr-news-card-ico { display: inline-flex; width: 13px; height: 13px; transform: rotate(-45deg); }
.rr-news-card-ico svg { width: 100%; height: 100%; }
.rr-news-grid--related { grid-template-columns: repeat(3, 1fr); gap: 26px; }

.rr-news-ctaband {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
	gap: 24px; background: var(--rr-grad-btn); border-radius: var(--rr-radius); padding: 40px 48px;
}
.rr-news-ctaband-wave {
	position: absolute; inset: 0; background-image: var(--rr-cta-wave); background-repeat: no-repeat;
	background-position: right -40px center; background-size: 620px 100%; opacity: .5;
}
.rr-news-ctaband-text { position: relative; z-index: 1; }
.rr-news-ctaband-text h3 { font-family: var(--rr-font-display); font-size: 26px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.rr-news-ctaband-btn {
	position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 10px;
	background: #fff; color: var(--rr-ink) !important; font-weight: 600; font-size: 15px;
	padding: 17px 26px; border-radius: 999px; text-decoration: none !important;
}
.rr-news-ctaband-ico { display: inline-flex; width: 13px; height: 13px; }
.rr-news-ctaband-ico svg { width: 100%; height: 100%; }

.rr-news-dmeta { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 14px; }
.rr-news-dcat { color: var(--rr-purple-soft); }
.rr-news-dsep { color: var(--rr-body-light); }
.rr-news-ddate { color: var(--rr-body-light); }
.rr-news-dtitle .elementor-heading-title { font-size: 42px; }
.rr-news-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--rr-body-light) !important; font-size: 14px; text-decoration: none !important; }
.rr-news-back-ico { display: inline-flex; width: 15px; height: 15px; }
.rr-news-back-ico svg { width: 100%; height: 100%; }

/* Article body = what the WordPress editor writes (paragraph, heading, list,
   image, gallery, columns, separator, video, audio, quote blocks). Articles
   imported from the old site use the same markup, so both look the same.
   Plain pages (.rr-page-content) share these rules. */
.rr-news-article > :first-child { margin-top: 0; }
.rr-news-article p { font-size: 16px; line-height: 1.75; color: var(--rr-ink-soft); margin: 0 0 20px; }
.rr-news-article h2 { font-family: var(--rr-font-display); font-size: 24px; font-weight: 700; color: var(--rr-ink); line-height: 1.3; margin: 40px 0 14px; }
.rr-news-article h3 { font-family: var(--rr-font-display); font-size: 22px; font-weight: 700; color: var(--rr-ink); margin: 36px 0 14px; }
.rr-news-article h4 { font-family: var(--rr-font-display); font-size: 18px; font-weight: 700; color: var(--rr-ink); margin: 30px 0 12px; }
.rr-news-article ul, .rr-news-article ol { margin: 0 0 20px; padding-left: 22px; }
.rr-news-article li { font-size: 16px; line-height: 1.75; color: var(--rr-ink-soft); margin-bottom: 8px; }
.rr-news-article a:not(.rr-news-card) { color: var(--rr-purple); text-decoration: underline; }
.rr-news-article strong { color: var(--rr-ink); }
.rr-news-article table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.rr-news-article th, .rr-news-article td { border: 1px solid var(--rr-hairline); padding: 10px 12px; text-align: left; vertical-align: top; }
.rr-news-article hr { border: 0; border-top: 1px solid var(--rr-hairline); margin: 36px 0; }
.rr-news-article figure { margin: 30px 0; }
.rr-news-article .wp-block-columns { margin: 30px 0; }
.rr-news-article .wp-block-column > figure:only-child { margin: 0; }
.rr-news-article img { display: block; max-width: 100%; height: auto; border-radius: var(--rr-radius); }
.rr-news-article video { display: block; width: 100%; height: auto; border-radius: var(--rr-radius); }
.rr-news-article audio { display: block; width: 100%; }
/* a link to another article on its own line → news card (rosros_news_embed()) */
.rr-news-article .rr-news-card-title { margin: 0 0 8px; font-size: 18px; }
.rr-news-article .rr-news-card-text { font-size: 13.5px; line-height: 20px; color: var(--rr-body); margin: 0 0 14px; }
.rr-news-article figcaption { font-size: 13px; color: var(--rr-body); margin-top: 8px; }

.rr-news-article blockquote { position: relative; background: var(--rr-lavender); border-radius: var(--rr-radius); padding: 32px 40px; margin: 30px 0; border: 0; }
.rr-news-article blockquote::before { content: "\201C"; position: absolute; top: 14px; left: 32px; font-family: Georgia, serif; font-size: 56px; line-height: 1; color: var(--rr-purple-soft); opacity: .5; }
.rr-news-article blockquote p { position: relative; font-size: 19px; font-style: italic; font-weight: 600; color: var(--rr-ink); line-height: 1.45; margin: 10px 0 16px; }
.rr-news-article blockquote cite { display: flex; align-items: center; gap: 12px; font-size: 14px; font-style: normal; color: var(--rr-body); }
.rr-news-article blockquote cite::before { content: ""; width: 20px; height: 2px; background: var(--rr-purple); }

.rr-news-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--rr-hairline); }
.rr-news-tags-label { font-size: 13px; font-weight: 700; color: var(--rr-ink); margin-right: 4px; }
.rr-news-tag { font-size: 12.5px; color: var(--rr-body); background: var(--rr-light); border-radius: 999px; padding: 6px 14px; }

.rr-news-relatedsec { background: var(--rr-light); }

/* -- plain pages written in the WordPress editor (Privacy, Cookie Policy…),
      template "rr-pagina": the body uses the .rr-news-article rules above -- */
.rr-page-updated { font-size: 14px; color: var(--rr-body-light); margin: 14px 0 0; }
/* 404 page and search results (same layout, see rosros_page_special_content()) */
.rr-search-form { display:flex; gap:10px; margin:24px 0 28px; max-width:560px; }
.rr-search-form input { flex:1; min-width:0; border:1px solid var(--rr-card-border); border-radius:999px; padding:13px 20px; font:15px var(--rr-font-body); color:var(--rr-ink); background:#fff; outline:0; }
.rr-search-form input:focus { border-color:var(--rr-purple-2); }
.rr-search-form button { flex:none; border:0; border-radius:999px; padding:13px 24px; background:var(--rr-grad-btn); color:#fff; font:600 14px var(--rr-font-body); cursor:pointer; }
.rr-search-item { padding:22px 0; border-top:1px solid var(--rr-hairline); }
.rr-search-item:first-child { border-top:0; padding-top:0; }
.rr-special .rr-search-item h2 { font-size:20px; margin:6px 0 8px; }
.rr-special .rr-search-item h2 a { color:var(--rr-ink); text-decoration:none; }
.rr-special .rr-search-item h2 a:hover { color:var(--rr-purple); }
.rr-search-item p { margin:0; font-size:15px; }
.rr-search-type { font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--rr-purple); }
.rr-search-pages { display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
.rr-search-pages .page-numbers { padding:8px 14px; border:1px solid var(--rr-card-border); border-radius:999px; font-size:14px; text-decoration:none !important; color:var(--rr-ink) !important; }
.rr-search-pages .page-numbers.current { background:var(--rr-purple); border-color:var(--rr-purple); color:#fff !important; }

/* sample-text fields still to fill in (Privacy Policy) */
.rr-da-compilare { background: #FFF1B8; color: #6B4E00; padding: 1px 4px; border-radius: 4px; font-weight: 600; }
.rr-news-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; }
.rr-news-related-head .rr-link-mini { display: inline-flex; align-items: center; gap: 8px; color: var(--rr-purple); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.rr-news-related-head h3 { font-family: var(--rr-font-display); font-size: 24px; font-weight: 700; color: var(--rr-ink); margin: 0; }

@media (max-width: 767px) {
	.rr-news-hero, .rr-news-dhero { padding-top: 34px !important; padding-bottom: 24px !important; }
	.rr-news-hero > .elementor-container, .rr-news-dhero > .elementor-container { flex-wrap: wrap; }
	.rr-news-hero-col .elementor-widget-wrap { padding-right: 0; }
	.rr-news-hero-img { margin-top: 24px; }
	.rr-news-body-sec > .elementor-container { flex-wrap: wrap; }
	.rr-news-grid, .rr-news-grid--related { grid-template-columns: 1fr; }
	.rr-news-ctaband { flex-direction: column; align-items: flex-start; }
}