/*
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.6.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;

	--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: 13px;
	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: 37px !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 { 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: 15px;
	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-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; }
.rr-header .rr-logo img { height: 40px; 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 .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;
}
.rr-logos .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap;
}
.rr-logos img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .78;
}
.rr-logo-sep .elementor-widget-container {
	width: 1px; height: 46px; background: var(--rr-hairline); margin: 0 auto;
}

/* single logo cell helper */
.rr-plogo { text-align: center; }
.rr-plogo img { max-height: 44px; width:auto; filter: grayscale(1); opacity:.72; }

/* =========================================================================
   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 .elementor-heading-title,
.rr-cosa .rr-eyebrow { font-size: 14px; letter-spacing: 0; }
.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; }
.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: 18px; 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: 13px; line-height: 20px; color: var(--rr-body); }
.rr-card-text p { margin: 0; }
.rr-card .rr-link-mini { margin-bottom: 0 !important; }

/* =========================================================================
   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 .elementor-heading-title,
.rr-perche .rr-eyebrow { font-size: 14px; letter-spacing: 0; }
.rr-perche .rr-eyebrow { margin-bottom: 27px !important; }
.rr-perche .rr-h2 .elementor-heading-title,
.rr-perche .rr-h2 {
	font-size: 39px !important;
	line-height: 49px !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: 15.5px;
	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: 19px; margin: 0 0 3px; letter-spacing: -0.2px; }
.rr-perche .rr-feature .elementor-icon-box-description { font-size: 13.5px; 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:17px; color:var(--rr-ink); font-weight:600; margin-bottom:3px; }
.rr-statinner > div > span { font-size:11.5px; 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:12.5px; 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:17px; 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:22px; font-weight:600; color:var(--rr-ink); margin:0 0 6px; }
.rr-cta-text .elementor-widget-container,
.rr-cta-text { font-size:14.5px; 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:13.5px; 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: 15px !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:24px; margin:0 0 6px; }
.rr-cta-dark .rr-cta-text .elementor-widget-container,
.rr-cta-dark .rr-cta-text { font-size:15.5px; 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 .elementor-heading-title,
.rr-ambienti .rr-eyebrow { font-size: 14px; letter-spacing: 0; }
.rr-ambienti .rr-eyebrow { margin-bottom: 12px !important; }
.rr-ambienti .rr-h2 .elementor-heading-title,
.rr-ambienti .rr-h2 { font-size: 50px !important; line-height: 59px !important; letter-spacing: -1.2px !important; }
.rr-ambienti .rr-h2 { margin-bottom: 0 !important; }
.rr-ambienti-sub .elementor-widget-container,
.rr-ambienti-sub { font-size: 18px; line-height: 30px; }
.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:22px; 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-retail .rr-eyebrow .elementor-heading-title,
.rr-retail .rr-eyebrow,
.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 .elementor-heading-title,
.rr-retail .rr-h2 { font-size: 44px !important; line-height: 54px !important; letter-spacing: -0.8px !important; }
.rr-retail .rr-h2 { margin-bottom: 22px !important; }
.rr-retail-body .elementor-widget-container,
.rr-retail-body { font-size: 15.5px; 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: 17px; margin: 0 0 6px; letter-spacing: -0.1px; }
.rr-retail .rr-feature .elementor-icon-box-description { font-size: 13px; 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; }
.rr-sectorstrip .rr-sector .elementor-icon-box-wrapper { display:flex; align-items:center; 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:14px; 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:17.5px; 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; }
/* divider inside the GenioTek support block */
.rr-geniotek-desccol > .elementor-widget-wrap { border-left:1px solid var(--rr-hairline); padding-left:34px; }

/* =========================================================================
   ASSISTENZA — GenioTek block
   ========================================================================= */
.rr-geniotek-label .elementor-heading-title { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; }
.rr-geniotek-logo img { max-height:none; width:275px; max-width:100%; height:auto; }
.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-geniotek-desc .elementor-widget-container,
.rr-geniotek-desc { font-size: 15.5px; line-height: 25px; }
.rr-geniotek-desc 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; }
/* 4px tighter than the other columns: it lines the GenioTek block up with the
   mockup and buys the paragraph the width its last line needs. */
.rr-footer-main > .elementor-container > .elementor-column.rr-fcol4 > .elementor-widget-wrap { padding-left:38px !important; }
.rr-footer-bar > .elementor-container > .elementor-column > .elementor-widget-wrap { padding:0 !important; }

/* !important: Elementor's .elementor-widget:not(:last-child) margin outranks a
   single class, and the logo needs a much deeper gap before the contact list. */
.rr-footer-logo.elementor-widget-image { margin-bottom:94px !important; text-align:left; }
.rr-footer-logo img { width:266px; 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-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,
.rr-footer-col-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,
.rr-footer-col-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; }

.rr-fg { display:block; width:238px; height:auto; margin:30px 0 41px; }
/* 14px, not the mockup's ~15px: Inter is wider than the font the mockup was
   rendered with, and this is what keeps the paragraph at five lines. */
.rr-fgd { color:#B0B0B8; font-size:13.5px; line-height:29px; margin:0; }

/* 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); }

/* =========================================================================
   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,
.rr-footer-col-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; }

@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: 42px; }
	.rr-h1 .elementor-heading-title, .rr-h1 { font-size: 40px; }
	.rr-h2 .elementor-heading-title, .rr-h2 { font-size: 33px; }
	.rr-nav nav { gap: 20px; }
	.rr-geniotek-desccol > .elementor-widget-wrap { border-left: 0; padding-left: 0; }
	.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.elementor-widget-image { margin-bottom: 48px !important; }
	.rr-footer-logo img { width: 210px; }
	.rr-fmenu .rr-menu-list li + li { margin-top: 30px; }
	.rr-fg { width: 190px; margin-bottom: 24px; }
	.rr-fgd { font-size: 13px; line-height: 24px; }
	.rr-fgd br { display: none; }
}

@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; }

	/* Mobile header: solid dark bar in normal flow, nav collapsed */
	.rr-header {
		position: static !important;
		background: var(--rr-dark);
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.rr-header > .elementor-container { flex-wrap: wrap; }
	/* The menu used to be hidden with no replacement — the site had no
	   navigation at all on phones. It now wraps onto its own row, and the
	   "Soluzioni" dropdown is shown inline because touch devices can't hover. */
	.rr-nav {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		order: 3;
		margin-top: 14px;
		border-top: 1px solid rgba(255,255,255,.12);
		padding-top: 12px;
	}
	.rr-nav .rr-menu-list { flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
	.rr-nav .rr-menu-list a { padding: 7px 0; font-size: 14.5px; }
	.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-wrap: wrap; justify-content: center; gap: 2px 16px;
		background: none; border: 0; box-shadow: none; padding: 0; min-width: 0;
	}
	.rr-nav .rr-menu-list .sub-menu a { padding: 5px 0; font-size: 13px; opacity: .72; }
	.rr-nav .rr-menu-list .menu-item-has-children::after { content: none; }
	.rr-header .rr-logo { flex: 1 1 auto; }
	.rr-header .rr-logo img { height: 34px; }
	.rr-btn-outline .elementor-button { padding: 10px 16px !important; font-size: 12.5px !important; }

	.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; }

	/* partner logos wrap into a centered grid */
	.rr-logos-row { flex-wrap: wrap !important; justify-content: center !important; gap: 22px 30px !important; }
	.rr-logos-row .rr-sep { display: none !important; }

	.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 stacks; drop the dividers */
	.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; }

	.rr-geniotek-desccol > .elementor-widget-wrap { border-left: 0; padding-left: 0; }

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

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

	/* stacked footer: 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-logo.elementor-widget-image { margin-bottom: 34px !important; }
	.rr-footer-logo img { width: 200px; }
	.rr-fmenu { margin-top: 22px; }
	.rr-fmenu .rr-menu-list li + li { margin-top: 20px; }
	.rr-fbottom { margin-top: 32px; padding: 24px 0 28px; }
	.rr-flegal { gap: 18px; flex-wrap: wrap; }
}