/* =====================================================================
   style.css – Landing Google Ads "Pronto Intervento"
   Unico foglio di stile della pagina (sostituisce custom-landing1.css).
   ===================================================================== */

/* ---------- Font ---------- */
@font-face {
	font-family: 'Basier Circle';
	src: url('../fonts/basiercircle-regular-webfont.woff2') format('woff2'),
	     url('../fonts/basiercircle-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Basier Circle';
	src: url('../fonts/basiercircle-medium-webfont.woff2') format('woff2'),
	     url('../fonts/basiercircle-medium-webfont.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Basier Circle';
	src: url('../fonts/basiercircle-semibold-webfont.woff2') format('woff2'),
	     url('../fonts/basiercircle-semibold-webfont.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Basier Circle';
	src: url('../fonts/basiercircle-bold-webfont.woff2') format('woff2'),
	     url('../fonts/basiercircle-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Colori e misure ---------- */
:root {
	--orange: #FF5100;
	--orange-dark: #DB4500;
	--ink: #1A1A1A;
	--text: #4A4D55;
	--muted: #6E717A;
	--line: #E4E5EA;
	--soft: #F5F6F8;
	--white: #FFFFFF;
	--star: #FFB400;

	--radius-lg: 20px;
	--radius-md: 14px;
	--header-h: 76px;
	--bar-h: 62px;

	--icon-phone-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--icon-phone-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5100' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5100' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}
body {
	margin: 0;
	font-family: 'Basier Circle', 'Helvetica Neue', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
h1, h2, h3 {
	margin: 0;
	color: var(--ink);
	font-weight: 600;
	line-height: 1.2;
}
p {
	margin: 0;
}
a {
	color: inherit;
}
strong {
	font-weight: 600;
	color: var(--ink);
}
:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
	border-radius: 4px;
}
::selection {
	background: var(--ink);
	color: var(--white);
}
[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.section {
	padding: 96px 0;
}
.section--soft {
	background: var(--soft);
}
.section-title {
	font-size: clamp(26px, 3.2vw, 40px);
	max-width: 22em;
}

/* ---------- Pulsanti ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: center / contain no-repeat;
}

.btn-call,
.btn-call:visited {
	background: var(--orange);
	color: var(--white);
	box-shadow: 0 8px 20px rgba(255, 81, 0, .28);
}
.btn-call::before {
	background-image: var(--icon-phone-white);
}
.btn-call:hover {
	background: var(--orange-dark);
	color: var(--white);
}

.btn-secondary,
.btn-secondary:visited {
	background: var(--white);
	border-color: var(--line);
	color: var(--ink);
}
.btn-secondary::before {
	display: none;
}
.btn-secondary:hover {
	border-color: var(--orange);
	color: var(--orange);
}
.btn-prices::before {
	display: block;
	background-image: var(--icon-tag);
}

.btn-white,
.btn-white:visited {
	background: var(--white);
	color: var(--orange);
	min-height: 64px;
	padding: 0 34px;
	font-size: 22px;
}
.btn-white::before {
	width: 20px;
	height: 20px;
	background-image: var(--icon-phone-orange);
}
.btn-white:hover {
	background: var(--ink);
	color: var(--white);
}
.btn-white:hover::before {
	background-image: var(--icon-phone-white);
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--header-h);
}
.logo img {
	width: auto;
	height: 44px;
}
.main-nav {
	display: flex;
	gap: 32px;
	margin-left: auto;
}
.main-nav a {
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
}
.main-nav a:hover {
	color: var(--orange);
}
.header-call,
.header-call:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--orange);
	color: var(--white);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.header-call::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--icon-phone-white) center / contain no-repeat;
}
.header-call:hover {
	background: var(--orange-dark);
}

/* ---------- Banner ---------- */
.hero {
	background: var(--soft);
	padding: 72px 0 88px;
}
.hero-inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 56px;
	align-items: center;
}
.hero h1 {
	font-size: clamp(28px, 4.4vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.hero h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 22px;
	border-radius: 2px;
	background: var(--orange);
}
.hero-sub {
	margin-top: 20px;
	max-width: 32em;
	font-size: clamp(16px, 1.6vw, 21px);
	font-weight: 400;
	line-height: 1.45;
	color: var(--text);
}
.hero-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 16px;
	color: var(--text);
}
.hero-stars {
	color: var(--star);
	font-size: 19px;
	letter-spacing: 2px;
	line-height: 1;
}
.hero-score {
	font-weight: 600;
	color: var(--ink);
}
.hero-sep {
	color: #B1B3BA;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--ink);
}
.hero-points li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-points li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: var(--icon-check) center / contain no-repeat;
}
.hero-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 48px rgba(26, 26, 26, .14);
}

/* ---------- Scelta rapida del servizio ---------- */
.service-nav {
	padding: 56px 0;
	border-bottom: 1px solid var(--line);
}
.service-nav h2 {
	margin-bottom: 20px;
	font-size: clamp(22px, 2.4vw, 30px);
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.chips a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.chips a:hover {
	border-color: var(--orange);
	color: var(--orange);
}

/* ---------- Testo + immagine ---------- */
.split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: center;
}
.split-text p {
	margin-top: 18px;
	max-width: 36em;
	font-size: 18px;
}
.split-text .btn {
	margin-top: 30px;
}
.split-media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

/* ---------- Sezioni servizio ---------- */
.service {
	padding: 80px 0;
	background: var(--white);
}
.service--soft {
	background: var(--soft);
}
.service-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.service h2 {
	font-size: clamp(24px, 3vw, 38px);
}
.lead {
	margin-top: 16px;
	max-width: 32em;
	font-size: 18px;
}
.service-panel {
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--white);
}
.service:not(.service--soft) .service-panel {
	border-color: transparent;
	background: var(--soft);
}
.checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.checklist li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 30px;
	font-size: 17px;
	color: var(--ink);
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	background: var(--icon-check) center / contain no-repeat;
}
.service-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 26px;
}
.link-prices,
.link-prices:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--orange);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}
.link-prices::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--icon-tag) center / contain no-repeat;
}
.link-prices:hover {
	color: var(--orange-dark);
}

/* ---------- Fascia CTA ---------- */
.cta-band {
	padding: 64px 0;
	background: var(--orange);
}
.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.cta-inner p {
	max-width: 36em;
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--white);
}
.cta-inner .btn {
	flex-shrink: 0;
}

/* ---------- Prezzi ---------- */
.pricing .intro {
	margin-top: 14px;
	max-width: 40em;
	font-size: 18px;
}
.price-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.price-card {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--white);
}
.price-card .label {
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
}
.price-card .value {
	margin-top: 10px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}
.price-card .sub {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
}
.price-note {
	margin-top: 24px;
	max-width: 56em;
	font-size: 14px;
	line-height: 1.65;
	color: var(--muted);
}
.pricing .btn-secondary {
	margin-top: 28px;
}

/* ---------- Come funziona ---------- */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}
.step {
	padding-top: 22px;
	border-top: 3px solid var(--orange);
}
.step-nr {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--orange);
}
.step h3 {
	margin: 6px 0 8px;
	font-size: 22px;
}
.step p {
	font-size: 16px;
}

/* ---------- Recensioni (da attivare con recensioni reali) ---------- */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.review {
	margin: 0;
	padding: 28px;
	border-radius: var(--radius-md);
	background: var(--white);
}
.review blockquote {
	margin: 0 0 14px;
	font-size: 17px;
	color: var(--ink);
}
.review figcaption {
	font-size: 14px;
	color: var(--muted);
}

/* ---------- Domande frequenti ---------- */
.faq-list {
	max-width: 860px;
	margin-top: 32px;
}
.faq-item {
	margin-bottom: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--white);
}
.faq-item summary {
	position: relative;
	display: block;
	padding: 20px 56px 20px 22px;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	color: var(--orange);
}
.faq-item[open] summary::after {
	content: "–";
}
.faq-item p {
	padding: 0 22px 20px;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Zone ---------- */
.zone-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.zone-list li {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--soft);
	font-size: 15px;
	color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
	padding: 56px 0 32px;
	border-top: 1px solid var(--line);
	background: var(--soft);
}
.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
}
.footer-about img {
	width: auto;
	height: 44px;
	margin-bottom: 18px;
}
.footer-about p {
	max-width: 34em;
	font-size: 15px;
}
.footer-links h2 {
	margin-bottom: 12px;
	font-size: 18px;
}
.footer-links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-links li {
	margin-bottom: 6px;
	font-size: 15px;
}
.footer-links a {
	color: var(--text);
	text-decoration: none;
}
.footer-links a:hover {
	color: var(--orange);
}
.footer-bottom {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

/* ---------- Barra chiamata (mobile) ---------- */
.call-bar {
	display: none;
}

/* =====================================================================
   TABLET
   ===================================================================== */
@media (max-width: 1100px) {
	.main-nav {
		gap: 22px;
	}
	.hero-inner,
	.split,
	.service-inner {
		gap: 40px;
	}
}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 899px) {
	:root {
		--header-h: 64px;
	}
	body {
		font-size: 16px;
		padding-bottom: var(--bar-h);
	}
	[id] {
		scroll-margin-top: 12px;
	}
	.container {
		padding: 0 20px;
	}
	.section {
		padding: 56px 0;
	}

	.btn {
		min-height: 54px;
		font-size: 17px;
	}

	/* Header: non fisso, la barra chiamata in basso è sempre visibile */
	.site-header {
		position: relative;
	}
	.main-nav {
		display: none;
	}
	.logo img {
		height: 36px;
	}
	.header-call {
		padding: 9px 14px;
		font-size: 15px;
	}

	/* Banner: testo, pulsanti, poi foto */
	.hero {
		padding: 28px 0 32px;
	}
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.hero h1 {
		font-size: 26px;
		line-height: 1.2;
	}
	.hero h1::after {
		width: 48px;
		height: 3px;
		margin-top: 14px;
	}
	.hero-sub {
		margin-top: 14px;
		font-size: 15px;
	}
	.hero-rating {
		margin-top: 14px;
		gap: 6px;
		font-size: 14px;
	}
	.hero-stars {
		font-size: 16px;
	}
	.hero-actions {
		flex-direction: column;
		gap: 10px;
		margin-top: 20px;
	}
	.hero-actions .btn {
		width: 100%;
	}
	.hero-points {
		gap: 6px 16px;
		margin-top: 18px;
		font-size: 14px;
	}
	.hero-media img {
		aspect-ratio: 16 / 16;
		border-radius: 16px;
		box-shadow: 0 10px 24px rgba(26, 26, 26, .12);
	}

	/* Scelta rapida */
	.service-nav {
		padding: 32px 0;
	}
	.service-nav h2 {
		margin-bottom: 14px;
		font-size: 20px;
	}
	.chips {
		gap: 8px;
	}
	.chips a {
		min-height: 42px;
		padding: 0 16px;
		font-size: 15px;
	}

	/* Testo + immagine */
	.split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.split-text p {
		font-size: 16px;
	}
	.split-text .btn {
		width: 100%;
	}
	.split-media img {
		aspect-ratio: 16 / 10;
		border-radius: 16px;
	}

	/* Sezioni servizio */
	.service {
		padding: 44px 0;
	}
	.service-inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.service h2 {
		font-size: 24px;
	}
	.lead {
		margin-top: 10px;
		font-size: 16px;
	}
	.service-panel {
		padding: 22px;
	}
	.checklist li {
		font-size: 15px;
	}
	.service-actions {
		flex-direction: column;
		gap: 14px;
		margin-top: 20px;
	}
	.service-actions .btn {
		width: 100%;
	}

	/* Fascia CTA */
	.cta-band {
		padding: 40px 0;
	}
	.cta-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	.cta-inner p {
		font-size: 17px;
	}
	.btn-white {
		min-height: 58px;
		font-size: 20px;
	}

	/* Prezzi */
	.pricing .intro {
		font-size: 16px;
	}
	.price-cards {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 26px;
	}
	.price-card {
		padding: 20px 22px;
	}
	.pricing .btn-secondary {
		width: 100%;
	}

	/* Come funziona */
	.steps {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 28px;
	}
	.step h3 {
		font-size: 20px;
	}

	/* Recensioni */
	.reviews {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 26px;
	}

	/* FAQ */
	.faq-list {
		margin-top: 22px;
	}
	.faq-item summary {
		padding: 16px 48px 16px 16px;
		font-size: 16px;
	}
	.faq-item summary::after {
		right: 16px;
	}
	.faq-item p {
		padding: 0 16px 16px;
		font-size: 15px;
	}

	/* Zone */
	.zone-list {
		margin-top: 20px;
	}
	.zone-list li {
		font-size: 14px;
		padding: 7px 14px;
	}

	/* Footer */
	.site-footer {
		padding: 40px 0 24px;
	}
	.footer-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.footer-about img {
		height: 45px;
	}
	.footer-bottom {
		margin-top: 28px;
	}

	/* Barra chiamata fissa */
	.call-bar,
	.call-bar:visited {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--orange);
		color: var(--white);
		font-size: 19px;
		font-weight: 500;
		text-decoration: none;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
	}
	.call-bar::before {
		content: "";
		width: 20px;
		height: 20px;
		background: var(--icon-phone-white) center / contain no-repeat;
	}
}

@media (max-width: 380px) {
	.hero h1 {
		font-size: 23px;
	}
	.header-call {
		font-size: 14px;
		padding: 8px 12px;
	}
}

/* =====================================================================
   SEZIONI SERVIZIO: icona, testo esteso, "Tutti i servizi"
   Su mobile ogni servizio occupa tutto lo schermo: toccando un pulsante
   in "Di cosa hai bisogno?" si vede solo il servizio scelto.
   ===================================================================== */
.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: #FFEDE3;
	color: var(--orange);
}
.service-icon svg {
	width: 30px;
	height: 30px;
}
.lead-more {
	margin-top: 12px;
	max-width: 32em;
	font-size: 16px;
	color: var(--muted);
}
.back-link,
.back-link:visited {
	display: grid;
    justify-content: center;
	margin-top: 22px;
	font-size: 15px;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
    
}
.back-link:hover {
	color: var(--ink);
}

@media (max-width: 899px) {
	.service {
		display: flex;
		align-items: center;
		min-height: calc(100vh - var(--bar-h));
		min-height: calc(100svh - var(--bar-h));
		padding: 32px 0;
	}
	.service .container {
		width: 100%;
	}
	.service[id] {
		scroll-margin-top: 0;
	}
	.service-icon {
		width: 52px;
		height: 52px;
		margin-bottom: 14px;
		border-radius: 14px;
	}
	.service-icon svg {
		width: 26px;
		height: 26px;
	}
	.lead-more {
		font-size: 15px;
	}
	.service-panel {
		text-align: left;
	}
	.back-link,
	.back-link:visited {
		display: block;
		margin-top: 18px;
		text-align: center;
	}
}

/* =====================================================================
   SEZIONI SERVIZIO: dettagli arancioni
   ===================================================================== */

/* Linea arancione sotto il titolo, come nel banner */
.service h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: var(--orange);
}

/* Pannello con bordo superiore arancione */
.service-panel,
.service:not(.service--soft) .service-panel {
	position: relative;
	overflow: hidden;
	border-top: 4px solid var(--orange);
}

/* Spunte dentro un cerchio arancione pieno */
.checklist li {
	padding-left: 36px;
	margin-bottom: 14px;
}
.checklist li::before {
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Icona del servizio piena */
.service-icon {
	background: var(--orange);
	color: var(--white);
	box-shadow: 0 8px 18px rgba(255, 81, 0, .25);
}

/* Pulsante a tutta larghezza nel pannello */
.service-actions .btn {
	width: 100%;
}

@media (max-width: 899px) {
	.service h2::after {
		width: 40px;
		height: 3px;
		margin-top: 12px;
	}
	.checklist li {
		padding-left: 34px;
	}
	.checklist li::before {
		width: 22px;
		height: 22px;
		background-size: 13px;
	}
}

/* =====================================================================
   Icone servizio: arancione trasparente (come prima)
   ===================================================================== */
.service-icon {
	background: #FFEDE3;
	color: var(--orange);
	box-shadow: none;
}

/* =====================================================================
   "Di cosa hai bisogno?" con dettagli arancioni
   ===================================================================== */
.service-nav {
	background: var(--white);
	border-bottom: 0;
	border-top: 4px solid var(--orange);
}
.service-nav h2::after,
.zones .section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--orange);
}
.service-nav h2 {
	margin-bottom: 24px;
}
.chips a {
	gap: 10px;
	padding: 0 20px 0 14px;
	border-color: #FFD3BD;
	background: #FFF6F1;
}
.chips a svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--orange);
}
.chips a:hover {
	border-color: var(--orange);
	background: var(--orange);
	color: var(--white);
}
.chips a:hover svg {
	color: var(--white);
}

/* =====================================================================
   "Fabbro a Alessandria e provincia": griglia a 5 colonne
   ===================================================================== */
.zones {
	background: var(--white);
}
.zone-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-top: 32px;
}
.zone-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--orange);
	border-radius: 10px;
	background: var(--white);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}
.zone-list li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5100' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zone-list li.is-main {
	border-color: var(--orange);
	background: var(--orange);
	color: var(--white);
}
.zone-list li.is-main::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
	.zone-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 899px) {
	.service-nav h2::after,
	.zones .section-title::after {
		width: 40px;
		height: 3px;
		margin-top: 10px;
	}
	.service-nav h2 {
		margin-bottom: 16px;
	}
	.chips a {
		padding: 0 16px 0 12px;
	}
	.chips a svg {
		width: 18px;
		height: 18px;
	}
	.zone-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-top: 22px;
	}
	.zone-list li {
		padding: 11px 12px;
		font-size: 14px;
		gap: 8px;
	}
	.zone-list li::before {
		width: 14px;
		height: 14px;
	}
}

/* =====================================================================
   FAQ centrata nella pagina
   ===================================================================== */
#faq .section-title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.faq-list {
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   PREZZI: dettagli arancioni
   ===================================================================== */
.pricing .section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--orange);
}
.price-card {
	position: relative;
	border-top: 4px solid var(--orange);
	transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(255, 81, 0, .12);
}
.price-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: #FFEDE3;
	color: var(--orange);
}
.price-icon svg {
	width: 24px;
	height: 24px;
}
.price-card .value {
	color: var(--ink);
}
.price-note {
	padding: 18px 22px;
	border-left: 4px solid var(--orange);
	border-radius: 0 12px 12px 0;
	background: #FFF6F1;
	color: var(--text);
}
.pricing .btn-secondary,
.pricing .btn-secondary:visited {
	border-color: var(--orange);
	color: var(--orange);
}
.pricing .btn-secondary:hover {
	background: var(--orange);
	color: var(--white);
}

@media (max-width: 899px) {
	.pricing .section-title::after {
		width: 40px;
		height: 3px;
		margin-top: 10px;
	}
	.price-icon {
		width: 40px;
		height: 40px;
		margin-bottom: 12px;
	}
	.price-icon svg {
		width: 21px;
		height: 21px;
	}
	.price-note {
		padding: 14px 16px;
	}
}

/* =====================================================================
   Mobile: pulsanti dei servizi su 2 colonne
   ===================================================================== */
@media (max-width: 899px) {
	.chips {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.chips a {
		min-height: 52px;
		padding: 8px 12px;
		border-radius: 14px;
		font-size: 14px;
		line-height: 1.25;
	}
	/* l'ultimo pulsante, se resta da solo, occupa tutta la riga */
	.chips a:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Mobile: l'ultimo pulsante da solo resta largo come una colonna, al centro */
@media (max-width: 899px) {
	.chips a:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 4px);
	}
}

/* =====================================================================
   AGGIUNTE PER LE LANDING ELETTRICISTA
   (sezione "I servizi": griglia di schede + linea arancione sotto i titoli)
   ===================================================================== */
.title-accent::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--orange);
}
.services-intro {
	margin-top: 14px;
	max-width: 40em;
	font-size: 18px;
}
.services-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.service-card {
	padding: 24px 20px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--orange);
	border-radius: var(--radius-md);
	background: var(--white);
	transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(255, 81, 0, .12);
}
.service-card .service-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 12px;
}
.service-card .service-icon svg {
	width: 24px;
	height: 24px;
}
.service-card h3 {
	font-size: 17px;
	line-height: 1.3;
}
.service-card p {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 899px) {
	.title-accent::after {
		width: 40px;
		height: 3px;
		margin-top: 10px;
	}
	.services-intro {
		font-size: 16px;
	}
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-top: 26px;
	}
	.service-card {
		padding: 16px 14px;
	}
	.service-card .service-icon {
		width: 40px;
		height: 40px;
		margin-bottom: 12px;
		border-radius: 10px;
	}
	.service-card .service-icon svg {
		width: 21px;
		height: 21px;
	}
	.service-card h3 {
		font-size: 15px;
	}
	.service-card p {
		font-size: 13px;
	}
}

/* =====================================================================
   Banner: "Vedi i prezzi" come semplice testo (non pulsante)
   ===================================================================== */
.hero-actions .btn-prices,
.hero-actions .btn-prices:visited {
	min-height: 0;
	padding: 0 6px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ink);
	font-size: 17px;
	gap: 8px;
}
.hero-actions .btn-prices:hover {
	background: transparent;
	color: var(--orange);
}
.hero-actions .btn-prices::before {
	width: 16px;
	height: 16px;
}

@media (max-width: 899px) {
	.hero-actions .btn-prices {
		align-self: center;
		width: auto;
		min-height: 40px;
		font-size: 16px;
	}
}
/* "Vedi i prezzi" più marcato */
.hero-actions .btn-prezzi,
.hero-actions .btn-prices,
.hero-actions .btn-prices:visited {
	font-weight: 600;
}
/* =====================================================================
   "Perché noi": foto intera, senza ritaglio
   ===================================================================== */
.split-media img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}
@media (max-width: 899px) {
	.split-media img {
		aspect-ratio: auto;
	}
}

/* Barra chiamata mobile: verde, nascosta quando c'è un altro "Chiama" */
@media (max-width: 899px) {
	.call-bar,
	.call-bar:visited {
		background: #28A745;
		transition: transform .3s ease, visibility 0s;
	}
	.call-bar.is-hidden {
		transform: translateY(110%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s .3s;
	}
}