/*
Theme Name: Semprechiaro
Theme URI: https://semprechiaro.com
Description: Tema del sito Semprechiaro. Child theme di Blocksy, costruito su Gutenberg con pattern registrati in PHP. Palette e spaziature sono dichiarate in theme.json.
Author: Alexander
Version: 3.16.0
Template: blocksy
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: semprechiaro
*/

/* ==========================================================================
   Typeface
   Sora is the mockup typeface. It is a variable font: one file covers every
   weight from 100 to 800, so 49 KB in total instead of six separate files.
   It is hosted here and not on Google, so the visitor's browser never
   contacts third-party domains.
   SIL Open Font License 1.1: see assets/font/OFL.txt and README.txt.
   ========================================================================== */

/* latin-ext */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url( 'assets/font/sora-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url( 'assets/font/sora-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Variables
   Colours live in theme.json, which exposes them automatically as
   --wp--preset--color--<slug>. Here they are remapped to shorter names for
   the hand-written CSS: if a colour changes, it changes in theme.json only.
   ========================================================================== */

:root {
	--sc-blue:          var(--wp--preset--color--blue, #0280c8);
	--sc-darkblue:    var(--wp--preset--color--darkblue, #005c9f);
	--sc-green:        var(--wp--preset--color--green, #029c83);
	--sc-magenta:      var(--wp--preset--color--magenta, #b92185);
	--sc-orange:      var(--wp--preset--color--orange, #f07e23);
	--sc-lightblue:      var(--wp--preset--color--lightblue-soft, #e1eaf4);
	--sc-peach:        var(--wp--preset--color--peach, #fce4d8);
	--sc-text:        var(--wp--preset--color--text, #1c2733);
	--sc-footer-green:  #04ad8c;   /* sampled from the mockup, flat background */

	/*
	 * THE SCALE UNIT.
	 *
	 * The mockup is drawn 1920 px wide. Every measure taken from its pages is
	 * written as "so many --sc-u", where --sc-u is 1 px on a 1920 screen and
	 * shrinks proportionally on narrower screens: at 1366 it is 0.71 px, so a
	 * box 1597 wide in the mockup becomes 1136, the same fraction of the
	 * screen. Below 960 px the unit stops at one half: there the grids are
	 * already in a single column and the spaces must not vanish. Above 1920 it
	 * does not grow: the page stays as in the mockup, centred.
	 *
	 * Fonts have a unit of their own, --sc-f, which stops earlier (at 0.72):
	 * a 24 px text never goes below 17 px, which stays readable. The smaller
	 * sizes (13-15 px) have a minimum of their own on top.
	 */
	--sc-u: clamp( 0.5px,  calc( 100vw / 1920 ), 1px );
	--sc-f: clamp( 0.72px, calc( 100vw / 1920 ), 1px );

	--sc-bar-height: calc( 18 * var(--sc-u) );
	--sc-radius:        calc( 18 * var(--sc-u) );
	--sc-radius-large: calc( 28 * var(--sc-u) );
	/* measured one by one on the mockup: there is no single radius */
	--sc-radius-illustration:    calc( 90 * var(--sc-u) );  /* the side illustrations */
	--sc-radius-box-large:  calc( 46 * var(--sc-u) );  /* the 1597-wide boxes */
	--sc-radius-box:         calc( 36 * var(--sc-u) );  /* the green box of the home */
	--sc-radius-card:             calc( 60 * var(--sc-u) );  /* the needs cards */

	/* Vertical rhythm of the sections.
	   Deliberately not theme.json presets: the patterns use them, not whoever
	   writes content, and adding them to the WordPress scale would mean both
	   clashing with the one generated by the core and cluttering the spacing
	   menu in the editor. */
	--sc-section:       calc( 80 * var(--sc-u) );
	/* 168 px, which added to the 24 of the gap between blocks give the 192 px
	   of white between one section and the next: the median of the 49 gaps
	   measured on the six mockup pages (min 152, max 379, mean 201). They were
	   120 before, i.e. 144 of white, and the page lost a finger at every section. */
	--sc-between-sections:   calc( 168 * var(--sc-u) );
}

/*
 * The content column and the font sizes.
 *
 * Blocksy keeps the column at a fixed 1290 px while the screen is wide, then
 * takes it to 90% of the screen: so at 1366 the column was 90% of the screen
 * where in the mockup it is 67%, and everything inside wrapped at different
 * points. Here the column follows the scale unit, and so do the four font
 * sizes of theme.json, which WordPress would otherwise vary along a curve of
 * its own (18-24 px) different from the mockup's.
 * Below 960 px the column goes back to 90% of the screen: with the grids in
 * a single column there is no reason to leave a third of the screen empty.
 *
 * html:root and not :root: Blocksy and WordPress redeclare these variables
 * later in the page, and at equal specificity they would win.
 */
html:root {
	/* in the mockup the text starts at 324 and ends at 1596: the column is 1272,
	   not Blocksy's 1290 (which put it at 315..1605) */
	--theme-normal-container-max-width: calc( 1272 * var(--sc-u) );
	--wp--preset--font-size--medium:    calc( 24 * var(--sc-f) );
	--wp--preset--font-size--large:   calc( 26 * var(--sc-f) );
	--wp--preset--font-size--title:   calc( 35 * var(--sc-f) );
	--wp--preset--font-size--display: calc( 45 * var(--sc-f) );
}

@media ( max-width: 960px ) {
	html:root { --theme-normal-container-max-width: 1290px; }
}

/* ==========================================================================
   Width of the boxes with a background

   In the mockup these boxes do not sit inside the 1290-wide text column:
   they are 1597 wide and centred on the page, and three of them even run
   edge to edge. On the site they were all 1290, so the text inside wrapped
   at points different from the drawn ones.

   Checked box by box by comparing the title positions between the mockup
   and the site capture: 1597 on Home, Gestione utenze, Per chi lavoriamo,
   Chi siamo, Contatti and Franchising.

   The important is needed: the block editor layout imposes
   margin-inline: auto on the children and wins even at double specificity.
   ========================================================================== */

.sc-banner,
.sc-comparison,
.sc-green-block,
.sc-contacts,
.sc-fr-form,
.sc-fr-hero {
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
}

/* these three fill the whole page in the mockup, not a box */
.sc-lightblue-section,
.sc-friend-section,
.sc-fr-peach {
	max-width: none;
	width: 100vw;
	margin-inline: calc( ( 100% - 100vw ) / 2 ) !important;
	border-radius: 0;
}

/* below 960 px the column is already 90% of the screen: they go back inside */
@media ( max-width: 960px ) {
	.sc-banner,
	.sc-comparison,
	.sc-green-block,
	.sc-contacts,
	.sc-fr-form,
	.sc-fr-hero {
		width: auto;
		margin-inline: 0 !important;
	}
}

/* ==========================================================================
   Four-colour strip under the header
   A single element, four bands made with hard stops: no children to
   position and no image. Printed by functions.php on the
   blocksy:header:after hook.
   ========================================================================== */

.sc-color-bar {
	height: var(--sc-bar-height);
	background: linear-gradient(
		to right,
		var(--sc-blue)      0    25%,
		var(--sc-green)    25%  50%,
		var(--sc-magenta)  50%  75%,
		var(--sc-orange)  75%  100%
	);
}

/* ==========================================================================
   Arrow lists and check lists
   They recur on every mockup page. The mark is an inline SVG as a
   background: no HTTP request and no <img> per item.
   Applied to a list by adding the matching class.
   ========================================================================== */

.sc-arrow-list,
.sc-check-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.sc-arrow-list > li,
.sc-check-list > li {
	position: relative;
	/* in mockup page 1 the text starts 37 px after the arrow (27 of arrow and
	   10 of air) at 24 px of body */
	padding-left: 1.54em;
}

/* in the mockup the check box is 38 wide at 24 px of body and the text
   starts 71 px after the beginning of the line (the measures are further
   down, after the general rule, otherwise that one wins) */
.sc-check-list > li { padding-left: 2.95em; }

.sc-arrow-list > li,
.sc-check-list > li {
	/* in the mockup the items of these lists are 51 px apart at 24 px of body:
	   with line-height 1.45, 16 px of margin remain, i.e. 0.68em */
	margin-bottom: 0.68em;
}

.sc-arrow-list > li::before,
.sc-check-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.15em;
	height: 1.15em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* right-pointing arrow in the brand green. Traced from mockup page 1:
   27x24 with a 20-long shaft, 3.65 stroke with butt caps and a sharp tip;
   at 24 px of body it sits 3 px above the capitals of the text */
.sc-arrow-list > li::before {
	top: -.1em;
	width: 1.125em;
	height: 1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23029c83' stroke-width='3.65' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M0 12h20.1M13.8 1.3l10.7 10.7-10.7 10.7'/%3E%3C/svg%3E");
}

/* check box, drawn on mockup page 1 magnified 8 times: a 38x38 box (stroke
   included) with round corners and the top-right corner open, the check
   starting inside and ending outside the box, 3.15 stroke with round caps.
   The box is in mockup pixels (42 = 38 plus 2 of margin per side): 1.75em
   at 24 px of body. In the mockup the box sticks out 3 px to the left of
   the section text */
.sc-check-list > li::before {
	width: 1.75em;
	height: 1.75em;
	left: -.2em;
	top: -.1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 42 42' fill='none' stroke='%23029c83' stroke-width='3.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28.7 1.65H4.65A3 3 0 0 0 1.65 4.65v28.7a3 3 0 0 0 3 3h28.7a3 3 0 0 0 3-3V9'/%3E%3Cpath d='M10 17.5l7.5 7L35.5 2'/%3E%3C/svg%3E");
}

/* blue variant, used in the light-background sections of the Gestione utenze page */
.sc-arrow-list.is-blue > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23005c9f' stroke-width='3.65' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M0 12h20.1M13.8 1.3l10.7 10.7-10.7 10.7'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Numbered steps (1..5)
   The big number with the line above it, repeated four times on the site in
   different colours. The colour is set through --sc-step-color.
   ========================================================================== */

.sc-step {
	--sc-step-color: var(--sc-green);
	padding-top: calc( 8 * var(--sc-u) );
}

/* the line above the number: in the home mockup it is 325 wide and 4
   thick, not as wide as the column */
.sc-step::before {
	content: "";
	display: block;
	width: min( 100%, calc( 325 * var(--sc-u) ) );
	height: max( 2px, calc( 4 * var(--sc-u) ) );
	margin-bottom: calc( 8 * var(--sc-u) );
	background: var(--sc-step-color);
}

.sc-step__number {
	color: var(--sc-step-color);
	font-size: calc( 89 * var(--sc-f) );
	font-weight: 700;
	line-height: 1;
	/* in the mockup there are 47 px between the number and the title */
	margin: 0 0 calc( 47 * var(--sc-u) );
}

.sc-step.is-blue     { --sc-step-color: var(--sc-darkblue); }
.sc-step.is-orange { --sc-step-color: var(--sc-orange); }

/* ==========================================================================
   Images with rounded corners
   In the mockup every illustration in the text+image blocks has the same
   radius.
   ========================================================================== */

.sc-rounded-image img,
.wp-block-image.is-style-sc-rounded img {
	border-radius: var(--sc-radius-large);
}

/* ==========================================================================
   Reduced motion
   Honours the system preference of those who cannot stand animations.
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   HOME SECTIONS
   Measures follow the 1920 px mockup, brought to the 1180 px content width
   declared in theme.json. Behaviour on small screens is decided here,
   because the mockup has none: the general rule is that grids drop columns
   before squeezing cells, and side-by-side blocks stack with the text
   always before the image.
   ========================================================================== */

/* --- Side-by-side block: text + illustration ---------------------------- */

.sc-side-by-side {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc( 80 * var(--sc-u) );
	align-items: center;
}

.sc-side-by-side > * { min-width: 0; }

/*
 * The sections that put a placeholder next to the text: in the mockup the
 * placeholder column is as wide as the placeholder (355 or 479) and all the
 * rest goes to the text, whereas with two equal columns the text had 605
 * and the titles wrapped.
 */
.sc-side-by-side:has( > :first-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) {
	grid-template-columns: max-content 1fr;
	align-items: start;
}

.sc-side-by-side:has( > :last-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) {
	grid-template-columns: 1fr max-content;
	align-items: start;
}

/* in Chi siamo the video placeholder starts 114 px above the title: there
   the text sits in the middle of the placeholder, not at its top */
.sc-side-by-side.is-centered:has( :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) { align-items: center; }

/*
 * Minimum width of the side illustrations. The scale unit stops at 0.5 px
 * below 960, but between 960 and 1300 the 466 units are worth 233-316 px:
 * too little (Alexander, 15/9). Below these thresholds the image no longer
 * shrinks and gives room to the text, which at 961 keeps 278 px: from 1360
 * up nothing changes.
 */
.sc-side-by-side {
	--sc-illustration: max( calc( 466 * var(--sc-u) ), 330px );
	--sc-illustration-narrow: max( calc( 400 * var(--sc-u) ), 290px );
}

/*
 * "Illustration plus text" sections.
 *
 * In the mockup these are not split in half: of 1274 px of content the text
 * takes about 728 and the illustration 466, with about 80 px between them,
 * a 1.56 to 1 ratio in favour of the text. Split in half, the illustration
 * came out 607 px wide instead of 466: 31% more.
 *
 * Only for these sections. The heroes, the invitation bands and the two
 * franchising sections really are split in half in the mockup, and keep the
 * rule above.
 */
.sc-side-by-side.sc-illustrated {
	/* in mockup page 1 the illustration is 466 wide and starts at 1130; the
	   text reaches 1063: 67 px remain between them. With proportional
	   columns (1.56 to 1) and 80 of gap the text had 726 px and "Non sai
	   piu' di chi fidarti?" wrapped one line more. */
	grid-template-columns: 1fr var(--sc-illustration);
	gap: calc( 66 * var(--sc-u) );
}

/*
 * Image on the left instead of the right.
 *
 * The image already comes first in the code, so it is not moved: the narrow
 * column just has to be the first. There used to be an "order: 2" here
 * which, precisely because the image was already first, pushed it to the
 * right: the five reversed sections came out mirrored against the mockup.
 */
.sc-side-by-side.sc-illustrated.is-reversed {
	/* image 324..791, text column from 847 (the green rule sits at 844):
	   56 px in between */
	grid-template-columns: var(--sc-illustration) 1fr;
	gap: calc( 56 * var(--sc-u) );
}

/*
 * On "Per chi lavoriamo" the illustration is smaller than elsewhere: in the
 * mockup it measures 400 px against the home's 466, and the text takes the
 * rest. Checked with the ruler on the three sections of the page: 400
 * against the 478 given by the 1.56 ratio, and the title wrapped onto three
 * lines instead of two.
 */
.sc-side-by-side.sc-illustrated.is-narrow {
	/* with the 1272 column and 80 of gap: 400 to the image, 792 to the text */
	grid-template-columns: 1fr var(--sc-illustration-narrow);
	gap: calc( 80 * var(--sc-u) );
}

.sc-side-by-side.sc-illustrated.is-reversed.is-narrow {
	grid-template-columns: var(--sc-illustration-narrow) 1fr;
	gap: calc( 80 * var(--sc-u) );
}

/*
 * The vertical green rule between image and text. In the mockup it appears
 * only in two home sections ("Il problema non finisce quando firmi" and "Il
 * tuo Specialista"), not in the identical sections of the other pages: 3 px
 * thick, brand green, 34 px to the left of the text.
 */
.sc-side-by-side.sc-with-rule > :last-child {
	position: relative;
	padding-left: calc( 34 * var(--sc-u) );
}

/* the title starts where the text starts: in the mockup both sit at x 880,
   and the green rule runs 34 px to the left of both, starting below the
   title */
.sc-side-by-side.sc-with-rule > :last-child > h2 { margin-left: 0; }

.sc-side-by-side.sc-with-rule > :last-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: var( --sc-rule-start, calc( 70 * var(--sc-u) ) );
	/* in "Il problema non finisce" it is 164 px tall: it covers the first
	   paragraph, not the whole text */
	height: calc( 164 * var(--sc-u) );
	width: max( 2px, calc( 4 * var(--sc-u) ) );
	background: var( --sc-green );
}

/* where the title takes two lines the start moves down accordingly */
.sc-side-by-side.sc-with-rule.is-double-title { --sc-rule-start: calc( 122 * var(--sc-u) ); }

/* in the Specialista section the rule runs from the first to the last line
   of text instead: 267 px in the mockup, i.e. the whole block below the title */
.sc-side-by-side.sc-with-rule.is-double-title > :last-child::before {
	height: auto;
	bottom: 0;
}

/* in the mockup the text column is 693, not 769: that is why the title
   fits on two lines, and 50 px remain between title and text */
.sc-side-by-side.sc-with-rule.is-double-title { align-items: start; }
.sc-side-by-side.sc-with-rule.is-double-title > :last-child { max-width: calc( 727 * var(--sc-u) ); }
.sc-side-by-side.sc-with-rule.is-double-title > :last-child > h2 {
	/* here the title starts where the text starts, not 34 px further left */
	margin-left: 0;
	margin-bottom: calc( 50 * var(--sc-u) );
}

@media ( max-width: 782px ) {
	.sc-side-by-side.sc-with-rule > :last-child { padding-left: 0; }
	.sc-side-by-side.sc-with-rule > :last-child > h2 { margin-left: 0; }
	.sc-side-by-side.sc-with-rule > :last-child::before { display: none; }
}

/*
 * The two separator lines below the titles, measured on the mockup:
 * blue #005c9f, 325 px wide, under "Un solo punto di riferimento",
 * orange #f07e23, 267 px wide, under "Vuoi trasformare" (it ends under
 * "in una nuova att"). Both 4 thick.
 */
/* in the mockup they start from the left edge of the content, not centred.
   hr.wp-block-separator must be named too: WordPress centres them with a
   rule more specific than ours. */
.entry-content hr.wp-block-separator.sc-blue-rule-short,
.entry-content hr.wp-block-separator.sc-orange-rule {
	border: 0;
	border-top: max( 2px, calc( 4 * var(--sc-u) ) ) solid var( --sc-darkblue );
	background: none;
	opacity: 1;
	/* the important is needed because the block editor centres separators with
	   a rule that wins over ours anyway */
	margin: calc( 26 * var(--sc-u) ) auto calc( 38 * var(--sc-u) ) 0 !important;
	width: calc( 325 * var(--sc-u) );
	max-width: 60%;
}

.entry-content hr.wp-block-separator.sc-orange-rule {
	border-top-color: var( --sc-orange );
	width: calc( 267 * var(--sc-u) );
	/* it sits in a narrow column: without this the 60% cap would shorten it */
	max-width: none;
}

/*
 * The corners of the illustrations.
 *
 * Measured on the mockup from the width profile line by line: on a 466 px
 * box the arc is 90, not 28. It is the most visible difference between site
 * and mockup, because illustrations appear in almost every side-by-side
 * section of every page.
 */
.sc-side-by-side img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sc-radius-illustration);
}

@media ( max-width: 960px ) {
	/* single column: every variant must be reset, otherwise the most specific
	   one would keep imposing two columns */
	.sc-side-by-side,
	.sc-side-by-side.sc-illustrated,
	.sc-side-by-side.sc-illustrated.is-reversed,
	.sc-side-by-side.sc-illustrated.is-narrow,
	.sc-side-by-side.sc-illustrated.is-reversed.is-narrow,
	.sc-side-by-side:has( > :first-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ),
	.sc-side-by-side:has( > :last-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ),
	.sc-side-by-side:has( > *:last-child > .sc-no-row ) { grid-template-columns: 1fr; }
	.sc-side-by-side:has( > :last-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) > :first-child,
	.sc-lightblue-section .sc-side-by-side > :last-child { max-width: none; }
	/* in a column the text ALWAYS comes first and the image (or placeholder)
	   after, even where the image sits on the left and comes first in the
	   code: otherwise two consecutive sections with the image on opposite
	   sides put two images one above the other */
	.sc-side-by-side > figure,
	.sc-side-by-side > .wp-block-image,
	.sc-side-by-side > :has( > :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) { order: 2; }
}

/* --- Hero ---------------------------------------------------------------- */

/* Hero and band leave the content column and take the full window width,
   as in the mockup. The horizontal padding puts the content back in the
   column: the children stay centred at 1180 px thanks to the WordPress
   "constrained" layout. */
/*
 * In the mockup the hero runs from 157 to 1032, i.e. 876 px: 93 above the
 * title and 75 below the last element. On the site they were 126 and 126,
 * and the hero was 960 tall.
 */
.sc-hero {
	background: var(--wp--preset--gradient--lightblue-vertical, linear-gradient(180deg,#e1eaf4,#dae4f0));
	padding-block: calc( 93 * var(--sc-u) ) calc( 75 * var(--sc-u) );
}

/*
 * Hero measures taken from the PDF: title 45 regular, text 32 Medium,
 * kicker 28 Medium in blue. In the mockup the hero is the only place where
 * the body text is not Light: it is Medium, i.e. fuller than usual.
 */
.sc-hero h1 {
	font-size: calc( 45 * var(--sc-f) );
	font-weight: 400;
	/* in the mockup the two title lines are 59 px apart at 45: 1.33 */
	line-height: 1.33;
	margin-bottom: calc( 19 * var(--sc-u) );
}

.sc-hero .sc-hero__text p {
	font-size: calc( 32 * var(--sc-f) );
	font-weight: 500;
	/* on every mockup page the hero text lines are 35 px apart at 32 */
	line-height: 1.1;
}

.sc-hero .sc-hero__text p.sc-hero__kicker {
	color: var(--sc-darkblue);
	font-size: calc( 28 * var(--sc-f) );
	font-weight: 500;
	line-height: 1.25;
}

/*
 * The hero image is not an illustration to put in a column: it is the
 * background of the whole band. The source files are 1672x941 with the
 * drawing in the right half and the left half empty, and that emptiness is
 * the room meant for the text. Putting it in a half-page column squeezed
 * the emptiness too, and the drawing came out tiny.
 *
 * The image stays a real <img>, not a background: so WordPress keeps
 * serving the right size for the screen (srcset) and the alt text stays
 * readable by screen readers.
 *
 * The height is 50vw because that is the band's proportion in the mockup:
 * 965 px on 1920. So the band keeps the same proportions at every width.
 */
.sc-hero,
.sc-fr-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	/* on mockup pages 2, 3, 4 and 5 the title always starts at 334, i.e. 186 px
	   below the band edge, whatever the text length: it is not vertically
	   centred. On the home, where the text is longer and there is a button,
	   it starts at 250. */
	align-content: start;
}

.sc-hero:not( :has( .wp-block-button ) ) { padding-top: calc( 186 * var(--sc-u) ); }

/* in the mockup the hero runs from 157 to 1032: 876 px on 1920. The
   franchising one runs from 157 to 867: 710. */
.sc-hero    { min-height: calc( 876 * var(--sc-u) ); }
.sc-fr-hero { min-height: calc( 710 * var(--sc-u) ); }

/*
 * The background must cover the whole band, edges included. Two caveats:
 *   - max-width: none overrides the WordPress "constrained" layout, which
 *     would otherwise keep the background inside the content column;
 *   - an absolutely positioned element is placed against the box *inside*
 *     the padding, not the border. The band has side padding (the theme's
 *     global one), so with inset:0 the image stayed inset by that much per
 *     side. The negative offsets cancel it, and stay right even if the
 *     padding changes.
 */
.sc-hero > .sc-hero__background,
.sc-fr-hero > .sc-hero__background,
.sc-teaser > .sc-hero__background {
	position: absolute;
	z-index: 0;
	margin: 0;
	max-width: none;
}

/*
 * The band is full page: the background centres itself and grows as wide
 * as the window. No padding-related negative offsets are used because the
 * padding here is not ours: Blocksy sets it through its container
 * variables, and binding to those would mean breaking at the first parent
 * theme update. The width has to be declared explicitly because Blocksy
 * already assigns a width to the children of "constrained" blocks, and on
 * an absolutely positioned element that would win over the offsets.
 * Any excess due to the scrollbar is clipped by the band's overflow:
 * hidden, symmetrically.
 */
.sc-hero > .sc-hero__background,
.sc-teaser > .sc-hero__background {
	top: 0;
	bottom: 0;
	left: 50%;
	right: auto;
	width: 100vw;
	transform: translateX( -50% );
}

/* The franchising one is not full page but an inset panel with round
   corners, and the padding there is ours: the background covers the panel by
   cancelling it. */
.sc-fr-hero > .sc-hero__background {
	inset: calc( -1 * var( --sc-fr-hero-padding ) );
	width: auto;
	height: auto;
}

/* object-position at 100% keeps the drawing anchored to the right edge: if
   the band is shorter than the image, top and bottom get cropped, never the
   drawing. */
.sc-hero > .sc-hero__background img,
.sc-fr-hero > .sc-hero__background img,
.sc-teaser > .sc-hero__background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%;
	border-radius: inherit;
}

.sc-hero > .sc-hero__text,
.sc-fr-hero > .sc-hero__text { position: relative; z-index: 1; }

/*
 * On mockup pages 1-5 the hero image is not laid bare: on top there is a
 * light-blue veil (204,229,244) at 40% over the whole band (in the PDF it is
 * a solid rectangle drawn with a 40% mask). It is what tints the left half,
 * which in the file is an almost neutral grey (240,238,244): 0.6 x file +
 * 0.4 x veil = (226,234,244), as in the mockup (225,234,243). The
 * franchising panel (page 6) has none.
 */
.sc-hero > .sc-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 204, 229, 244, .4 );
	border-radius: inherit;
	pointer-events: none;
}

/*
 * Where the drawing sits: on every mockup page the image (the file is
 * 1672x941 for all) is enlarged and shifted in its own way, read from the
 * PDF (pdftocairo -svg, the image matrix). Here the same three measures -
 * rendered width, offset from the left and from the top of the band - in
 * scale units:
 *              width   x      y (from the band edge, which in the mockup
 *                                 starts at 157)
 *   home        2248    -194   -246
 *   gest. ut.   2406    -292   -341
 *   per chi l.  2671    -516   -400
 *   chi siamo   2310    -122   -311
 *   contatti    1958     -38   -145
 * The site used to treat them all alike (as wide as the window, 1920,
 * anchored right): smaller and further right than the mockup. The page is
 * recognised by the sc-page-<name> class on the body, set by the theme.
 */
.sc-page-home              .sc-hero { --sc-hero-w: 2248; --sc-hero-x: -194; --sc-hero-y: -246; }
.sc-page-gestione-utenze   .sc-hero { --sc-hero-w: 2406; --sc-hero-x: -292; --sc-hero-y: -341; }
.sc-page-per-chi-lavoriamo .sc-hero { --sc-hero-w: 2671; --sc-hero-x: -516; --sc-hero-y: -400; }
.sc-page-chi-siamo         .sc-hero { --sc-hero-w: 2310; --sc-hero-x: -122; --sc-hero-y: -311; }
.sc-page-contatti          .sc-hero { --sc-hero-w: 1958; --sc-hero-x:  -38; --sc-hero-y: -145; }

@media ( min-width: 1200px ) {
	:is( .sc-page-home, .sc-page-gestione-utenze, .sc-page-per-chi-lavoriamo, .sc-page-chi-siamo, .sc-page-contatti ) .sc-hero > .sc-hero__background img {
		position: absolute;
		left: calc( var(--sc-hero-x) * var(--sc-u) );
		top: calc( var(--sc-hero-y) * var(--sc-u) );
		width: calc( var(--sc-hero-w) * var(--sc-u) );
		max-width: none;
		height: auto;
		object-fit: fill;
	}
}

/* in the orange band the image is mirrored and centred, not anchored right
   as in the heroes */
.sc-teaser > .sc-hero__background img {
	object-position: center;
	transform: scaleX( -1 );
}

/*
 * The text must not reach over the drawing. In the mockup it takes 62% of
 * the column on the ordinary pages and 44% of the panel on the franchising
 * one, where the illustration is more invasive.
 */
/* 967 px: on Chi siamo the last line of the hero text is 957 wide and
   reaches over the drawing in the mockup too */
@media ( min-width: 1200px ) {
	.sc-hero > .sc-hero__text > *    { max-width: calc( 967 * var(--sc-u) ); }
	.sc-fr-hero > .sc-hero__text > * { max-width: calc( 660 * var(--sc-u) ); }
}

/*
 * Below 1200 px there is no mockup page. The text, which does not shrink
 * past its minimums, wraps more and would reach over the drawing. The image
 * however stays what it is in the mockup: the BACKGROUND of the band, with
 * the text on top. It covers the whole band (object-fit: cover, anchored
 * right where the drawing is) and carries a veil much stronger than the
 * desktop one, so the drawing shows through and the text reads well. No
 * image after the text, no boxes: one band only.
 *
 * The veil is the band's background colour at 72%: the drawing keeps 28%.
 */
@media ( max-width: 1199.98px ) {
	.sc-hero,
	.sc-fr-hero { min-height: 0; }

	.sc-hero > .sc-hero__background img,
	.sc-fr-hero > .sc-hero__background img { object-position: 85% 50%; }

	.sc-hero > .sc-hero__background::after    { background: rgba( 226, 235, 245, .72 ); }
	.sc-fr-hero > .sc-hero__background::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba( 253, 240, 230, .72 );
		border-radius: inherit;
		pointer-events: none;
	}
}

/* --- Band with green -> blue gradient ---------------------------------- */

.sc-band {
	background: var(--wp--preset--gradient--green-blue, linear-gradient(90deg,#029c83,#0280c7));
	color: #fff;
	padding-block: var(--sc-section);
}

.sc-band h2,
.sc-band h3 { color: #fff; }

/*
 * The home band "Non ti mostriamo soltanto un'offerta" has a spacing of its
 * own, measured on the mockup: 111 px above the title instead of the 80 of
 * the other bands, and the subtitle on two lines because its column is 740
 * wide, not as wide as the text.
 */
/* measured on two different mockup pages: 111 on the home, 108 on Gestione utenze */
/*
 * Between the last block of the page and the footer the site left 108 px.
 * On the six mockup pages this gap goes from 96 to 216 px, with no rule:
 * 150 is the middle value, the one that errs least on all of them.
 */
.entry-content { padding-bottom: calc( 42 * var(--sc-u) ); }

.sc-band { padding-top: calc( 110 * var(--sc-u) ); }

/* in the logos band the title sits 229 px below the edge, not 110, and the
   grid starts 188 px below the title instead of 307: the total does not
   change, where the air sits does */
.sc-band:has( .sc-logos-grid ) { padding-top: calc( 229 * var(--sc-u) ); }

/* the contact form band: 85 px above and 89 below */
.sc-band:has( .sc-form ) { padding-top: calc( 78 * var(--sc-u) ); padding-bottom: calc( 88 * var(--sc-u) ); }

.sc-support-band > h2 { margin-bottom: calc( 30 * var(--sc-u) ); }

.sc-support-band > p:not( .sc-claim ) {
	max-width: calc( 740 * var(--sc-u) );
	margin-bottom: calc( 27 * var(--sc-u) );
}

/* ==========================================================================
   ORDINARY BLOCKS INSTEAD OF CODE
   The home grids (band cards, services, steps, needs, reviews) are no longer
   HTML code boxes but ordinary editor groups, images, headings and
   paragraphs: they are edited from the panel. The design stays in the
   classes. Two things change in the markup and are absorbed here: the icons
   are images (<figure> with an <img> inside) instead of inline SVG, and the
   editor gives the children of groups a top margin (--wp--style--block-gap)
   that the cards do not want.
   ========================================================================== */

.sc-icon-card > *,
.sc-service > *,
.sc-step > *,
.sc-need > :not( .sc-need__icon ),
.sc-review > * { margin-block-start: 0; }

/* the cards inside the grids: no bottom margin, the grid makes the space */
.sc-support-grid > *,
.sc-services-grid > *,
.sc-steps-grid > *,
.sc-needs-grid > *,
.sc-reviews-grid > * { margin-block: 0; }

.sc-icon-card__icon img,
.sc-label__arrow img,
.sc-need__icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.sc-icon-card > .wp-block-image { margin-bottom: 0; }

/* the text of the band cards was a <span>: now it is a paragraph, which
   would otherwise take the body size and weight */
.entry-content .sc-icon-card p {
	margin: 0;
	font-size: calc( 22 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.18;
	color: #fff;
}
.entry-content .sc-icon-card.is-label p { color: #fff; }

/* in the services the image spans the two grid rows, title and text the
   second column */
.entry-content .sc-service { grid-template-rows: auto 1fr; row-gap: 0; }
.entry-content .sc-service > .sc-service__image { grid-row: 1 / 3; margin: 0; }
.entry-content .sc-service > h3,
.entry-content .sc-service > p { grid-column: 2; }

/* the review placeholders: the text inside takes the box size, not the
   body size */
.entry-content .sc-review p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
}

/* --- Gestione utenze: the same sections, in ordinary blocks ------------ */

/* no editor margin between the children of the groups that used to be <div> */
.sc-service-v > *,
.sc-comparison__column > *,
.sc-comparison__body > *,
.sc-side-note > *,
.sc-notice > *,
.sc-placeholder-tall > * { margin-block-start: 0; }
.sc-services-grid-v > *,
.sc-comparison > * { margin-block: 0; }

/* the paragraphs inside the steps and the side note got 30 px below (1.5
   em) from Blocksy again; the editor zeroes them on the last child, and the
   section shortened by 30 px per line */
.sc-step > p:not( .sc-step__number ),
.entry-content .sc-side-note > p { margin-bottom: calc( 30 * var(--sc-u) ); }

/* the rules under the titles are separator blocks: WordPress would want
   them grey, 40% transparent and centred (with important), we do not */
.entry-content hr.wp-block-separator.sc-rule {
	border: 0;
	opacity: 1;
	background: var(--sc-rule-color);
	/* Blocksy caps separators at 100 px with an important: ours is needed.
	   The variants (the short 162 rule under "I nostri valori" and "La
	   tecnologia") change the variable, not the width. */
	width: var(--sc-rule-width) !important;
	max-width: var(--sc-rule-width) !important;
	height: var(--sc-rule-thickness);
	margin-inline: 0 !important;
}
.entry-content hr.wp-block-separator.sc-rule.is-centered { margin-inline: auto !important; }

/* the icon of the eight cards is an image, not an inline drawing */
.sc-service-v__icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.sc-service-v > .wp-block-image { margin: 0 auto calc( 12 * var(--sc-u) ); }

/* the head of the two comparison columns was a <div>, now it is a paragraph:
   it must not take the body size, colour and margins */
.entry-content p.sc-comparison__head {
	margin: 0;
	color: #fff;
	font-size: calc( 35 * var(--sc-f) );
	font-weight: 700;
	line-height: 1;
}

/* the exclamation mark of the notice was a <span>, now it is a paragraph */
.entry-content p.sc-notice__mark {
	margin: 0;
	flex: 0 0 auto;
	color: var(--sc-darkblue);
	font-size: calc( 47 * var(--sc-f) );
	font-weight: 800;
	line-height: 1;
}

/* the text inside the placeholders (video, phone) takes the box size, not
   the body size */
.entry-content .sc-placeholder-tall > p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	text-align: center;
}

/* --- Per chi lavoriamo: the same sections, in ordinary blocks ---------- */

.sc-icon-row > *,
.sc-client-logo > *,
.sc-friend-card > * { margin-block-start: 0; }
.sc-logos-grid > *,
.sc-friend-grid > * { margin-block: 0; }

/* the blue box with the icon in the opening was a <span> with the drawing
   inside; now it is an image block with the same class */
.sc-icon-row > .wp-block-image.sc-icon-row__box { margin: 0; }
.sc-icon-row__box img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* the logo placeholders: the text takes the box size */
.entry-content .sc-client-logo > p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	text-align: center;
}

/* the animated icon of the cards is a theme block: the outer container
   carries the card class, inside there is the usual .sc-lottie */
.sc-friend-card > .sc-friend-card__icon { margin-bottom: calc( 18 * var(--sc-u) ); }

/* --- Chi siamo: the same sections, in ordinary blocks ------------------ */

.sc-person > *,
.sc-person__photo > *,
.sc-value > * { margin-block-start: 0; }
.sc-people-grid > *,
.sc-values-grid > * { margin-block-end: 0; }
/* the values card keeps its 226 px above even when it is the first child */
.sc-values-grid > .sc-value { margin-top: calc( 226 * var(--sc-u) ); }

/* The "Non siamo…" pills are paragraphs with the pill class: the mark (the
   cross, or the check) is drawn by the stylesheet, so whoever edits changes
   the text only. The paragraph must be shielded from the general body-text
   rules. */
.entry-content p.sc-no-row {
	margin: 0 0 calc( 39 * var(--sc-u) );
	font-size: calc( 20 * var(--sc-f) );
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: #000;
}
.entry-content p.sc-no-row:last-child { margin-bottom: 0; }
p.sc-no-row::before {
	content: "";
	flex: 0 0 auto;
	width: calc( 31 * var(--sc-u) );
	height: calc( 32 * var(--sc-u) );
	background: var(--sc-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
p.sc-no-row.is-orange::before { background: var(--sc-orange); }
p.sc-no-row.is-yes::before {
	background: var(--sc-green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

/* the text inside the photo placeholder takes the box size */
.entry-content .sc-person__photo > p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	color: inherit;
	text-align: center;
}

/* --- Contatti: the same sections, in ordinary blocks ------------------- */

.sc-request > *,
.sc-form > *,
.sc-contacts__rows > *,
.sc-faq > * { margin-block-start: 0; }
.sc-requests-grid > * { margin-block: 0; }

/* the request cards: the icon is an image, the text a paragraph */
.sc-request > .wp-block-image { margin: 0; }
.sc-request__icon img,
.sc-request > .sc-label__arrow img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.entry-content .sc-request p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* the FAQ entries are "Details" blocks: same pill as before */
.sc-faq > .wp-block-details { margin-block-end: calc( 26 * var(--sc-u) ); }
.sc-faq > .wp-block-details > :not( summary ) { margin-block-start: 0; }
/* the question (summary) got 39 px below as a "non-last child" */
.sc-faq > .wp-block-details > summary { margin: 0; }

/* --- Apri la tua attivita': the same sections, in ordinary blocks ------ */

.sc-fr-invite > *,
.sc-situation > *,
.sc-model > *,
.sc-reason > *,
.sc-requirement > * { margin-block-start: 0; }
.sc-situations-grid > *,
.sc-model-grid > *,
.sc-reasons-grid > *,
.sc-requirements-grid > * { margin-block: 0; }

/* in the "Come affiliato" box the button is a button block */
.sc-fr-invite > .wp-block-buttons { margin: 0; }

/* the six orange model cards: icon as an image, text as a paragraph */
.sc-model > .wp-block-image { margin: 0; }
.sc-model__icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.entry-content .sc-model p {
	/* the text has 26 px above and below, the drawing 17: the difference sits here */
	margin: calc( 9 * var(--sc-u) ) 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* "Cosa serve per iniziare": the photo is an image block, the line below a
   separator (Blocksy caps it at 100 px with an important) */
.sc-requirement > .wp-block-image { margin: 0; }
.entry-content hr.wp-block-separator.sc-requirement__rule {
	border: 0;
	opacity: 1;
	height: max( 2px, calc( 4 * var(--sc-u) ) );
	width: calc( 324 * var(--sc-u) ) !important;
	max-width: calc( 324 * var(--sc-u) ) !important;
	margin-inline: 0 !important;
}

/* the orange line above "Richiedi informazioni" in the franchising form */
.entry-content .sc-fr-form hr.wp-block-separator {
	border: 0;
	opacity: 1;
	height: max( 2px, calc( 3 * var(--sc-u) ) );
	background: var(--sc-orange);
	width: calc( 162 * var(--sc-u) ) !important;
	max-width: calc( 162 * var(--sc-u) ) !important;
	margin-inline: 0 !important;
}

/* the icons floating above the cards: in the editor every block is
   "position: relative" with a two-class rule, which would win */
.sc-reason > .sc-reason__icon,
.sc-value > .sc-value__icon { position: absolute; }

/* --- Icon cards on the band --------------------------------------------- */

/*
 * In the mockup this grid is not centred: it starts at the left edge of the
 * text column and overflows to the right only. The selector names the
 * parent to beat the WordPress rule that would centre the block.
 */
.sc-band > .sc-support-grid {
	/* the important is needed: the block editor layout imposes
	   margin-inline:auto on the children and wins anyway */
	/* the grid starts at the left edge of the text column (324 on 1920) */
	margin-left: calc( ( 100% - var(--theme-normal-container-max-width) ) / 2 ) !important;
	margin-right: 0 !important;
}

.sc-support-grid {
	/* in the mockup the grid runs from 323 to 1757, i.e. 1434, with 465 cards
	   and only 20 px between columns; between rows there are 54 */
	max-width: none;
	width: calc( 1434 * var(--sc-u) );
	margin-right: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	column-gap: calc( 20 * var(--sc-u) );
	row-gap: calc( 54 * var(--sc-u) );
	/* 84 px below the blue rule; below the grid the claim margin rules */
	margin-block: calc( 84 * var(--sc-u) ) 0;
}

/* below 960 the grid goes back inside the column, two columns then one */
@media ( max-width: 960px ) {
	.sc-band > .sc-support-grid { width: auto; margin-left: 0 !important; grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 560px ) { .sc-band > .sc-support-grid { grid-template-columns: 1fr; } }

/*
 * In the mockup these cards have a solid blue background, not a transparent
 * white: laid on the green-blue gradient, the 10% white made them vanish and
 * the icons, drawn with a thin stroke, became unreadable.
 * Measures from the mockup: 390x105 px cards on 1274 of content, 41 px icon,
 * #005c9f background, which is already our --sc-darkblue.
 */
.sc-icon-card {
	display: flex;
	align-items: center;
	/* in the mockup the card is 106 tall: 80 of icon plus 13 of padding above
	   and below. Horizontally 12 of padding and 13 of gap, so the text starts
	   105 from the edge and has 348 available: just enough for "Valutare se
	   cambiare fornitore" to stay on one line. */
	gap: calc( 13 * var(--sc-u) );
	background: var( --sc-darkblue );
	border-radius: calc( 17 * var(--sc-u) );
	padding: calc( 13 * var(--sc-u) ) calc( 12 * var(--sc-u) );
	font-size: 1.05rem;
	font-weight: 700;
	/* the mockup lines are 26 px apart at 22 px of body */
	line-height: 1.18;
}

/*
 * The icon box.
 *
 * Giving it the size one wants to see is not enough: inside the SVG the
 * drawing takes 50 to 87 percent of the viewBox, so with a 42 px box the
 * drawing came out at 25. Comparing the mockup drawings with the same ones
 * on the site, the mockup box turns out to be 80 px.
 */
.sc-icon-card__icon {
	flex: 0 0 calc( 80 * var(--sc-u) );
	width: calc( 80 * var(--sc-u) );
	height: calc( 80 * var(--sc-u) );
}

.sc-icon-card__icon svg { width: 100%; height: 100%; }

/*
 * The opening label of the grid: not a card, an introduction. In the mockup
 * it is not laid against the left edge of the grid but centred in its cell,
 * and the text has no letter spacing: with the earlier 0.03em the two lines
 * came out 10 px longer than the mockup.
 */
.sc-icon-card.is-label {
	background: none;
	border: none;
	padding: 0;
	justify-content: center;
	text-transform: uppercase;
	gap: calc( 22 * var(--sc-u) );
}

/* The arrow before the label. In the mockup it is the only blue element on
   a green background and it is the same arrow as the lists (27x24, 3.65
   stroke with butt caps: taken from the vector drawing of mockup pages 1
   and 5), in the same blue as the cards. */
.sc-label__arrow {
	flex: 0 0 calc( 27 * var(--sc-u) );
	width: calc( 27 * var(--sc-u) );
	height: calc( 24 * var(--sc-u) );
	color: var( --sc-darkblue );
}

/* The blue rule under the band subtitle: 328 px on 1274, centred. */
.sc-band .sc-blue-rule {
	width: calc( 328 * var(--sc-u) );
	margin: calc( 27 * var(--sc-u) ) auto 0;
	border: 0;
	border-top: 3px solid var( --sc-darkblue );
	background: none;
	opacity: 1;
}

/*
 * The closing line of the band is as large as the title, not as the body
 * text. In the mockup its two lines are 60 px apart, much more than a normal
 * line height, and the column is narrow: it wraps after "uguale".
 */
.sc-band .sc-claim {
	font-size: var( --wp--preset--font-size--title );
	font-weight: 700;
	line-height: 1.667;
	max-width: calc( 728 * var(--sc-u) );
	margin-top: calc( 129 * var(--sc-u) );
}

/* --- Two-line check list (personal area) -------------------------------- */

/* In the mockup, above the dashboard caption there is a green rule 162
   wide and 3 thick, on the left, not a grey full-width line: it sits 43 px
   below the laptop and 28 above the text. */
.sc-caption {
	margin-top: calc( 43 * var(--sc-u) );
	color: var(--sc-text);
}

.sc-caption::before {
	content: "";
	display: block;
	width: calc( 162 * var(--sc-u) );
	height: max( 2px, calc( 3 * var(--sc-u) ) );
	margin-bottom: calc( 28 * var(--sc-u) );
	background: var(--sc-green);
}

/* placeholder for content not yet supplied */
.sc-placeholder {
	display: grid;
	place-items: center;
	min-height: 16rem;
	border: 2px dashed #b9c9d8;
	border-radius: var(--sc-radius-large);
	background: #f2f6fa;
	color: #7b8b9a;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 1.5rem;
}

/* --- Referral box ------------------------------------------------------- */

/*
 * In the mockup this box is 1597 wide on 1920, i.e. wider than the text
 * column, and the gradient goes down from white to a solid aqua green:
 * measured #fefefe at the top and #9bd7cd at the bottom.
 */
.sc-green-box {
	/* in the mockup it is 1597 wide and centred on the page; its container is
	   already as wide as the page, so centring it is enough */
	max-width: none;
	width: min( calc( 1597 * var(--sc-u) ), calc( 100% - 2rem ) );
	margin-inline: auto;
	background: linear-gradient( 180deg, #fefefe 0%, #9bd7cd 100% );
	/* 36 in the mockup, not 28 */
	border-radius: var(--sc-radius-box);
	padding: calc( 54 * var(--sc-u) );
	text-align: center;
}

.sc-green-box h2 { color: var(--sc-green); }

/* --- Services grid -------------------------------------------------------- */

/* In the mockup the services are on two columns and the method steps on
   three: with auto-fit they came out three and four respectively. */
/*
 * In the mockup: two 602-wide columns with 68 px between them, and 72 px
 * between rows. The image is 206x150, then 31 px of gap and the text.
 */
.sc-services-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: calc( 72 * var(--sc-u) ) calc( 68 * var(--sc-u) );
}

@media ( max-width: 782px ) {
	.sc-services-grid { grid-template-columns: 1fr; }
}

.sc-service {
	display: grid;
	grid-template-columns: calc( 206 * var(--sc-u) ) 1fr;
	gap: calc( 31 * var(--sc-u) );
	align-items: start;
}

.sc-service img {
	width: 100%;
	height: auto;
	border-radius: calc( 12 * var(--sc-u) );
}

.sc-service h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: var(--sc-text);
}

.sc-service p { margin: 0; font-size: 0.95rem; }

/* --- The Method: the five steps ----------------------------------------- */

/*
 * In the mockup it is not a centred box: it is a band spanning the whole
 * page width, with the gradient going down from near white (#fafdfe) to a
 * solid light blue (#cce6f4) and only the bottom corners rounded. Measured
 * 1277 px tall on 1920 of width.
 */
.sc-method {
	background: linear-gradient( 180deg, #fafdfe 0%, #cce6f4 100% );
	border-radius: 0 0 var(--sc-radius-large) var(--sc-radius-large);
	padding-block: calc( 80 * var(--sc-u) );
}

/*
 * In the mockup the two rows of steps start at 7240 and 7678: a 438 pitch,
 * i.e. 125 px of space between rows, not 40. And between the opening text
 * and the first row there are 136, not 71.
 */
/* in the mockup the three columns start at 323, 806 and 1289: they are 400
   wide (the title "Individuiamo i prossimi passi" takes 399) with 83 px in
   between, and the grid (1366) overflows the text column on the right. The
   editor would centre it: the left margin has to be computed by hand. */
.entry-content .sc-steps-grid {
	display: grid;
	/* minmax(0,1fr): the side note is 455 wide and with a plain 1fr it would
	   widen its column at the expense of the other two */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: calc( 125 * var(--sc-u) ) calc( 83 * var(--sc-u) );
	margin-top: calc( 105 * var(--sc-u) );
	max-width: none;
	width: calc( 1366 * var(--sc-u) );
	margin-left: calc( ( 100% - var(--theme-normal-container-max-width) ) / 2 ) !important;
	margin-right: 0 !important;
}

/* on Gestione utenze the grid follows the title directly: in the mockup the
   lines sit 125 px below the title, not 271 as on the home where the
   opening text sits in between */
.entry-content h2 + .sc-steps-grid { margin-top: calc( 100 * var(--sc-u) ); }

/* the opening text of the Method sits on two lines in the mockup: its
   column is 700 wide, not as wide as the whole section */
/* the block editor centres every child with margin auto !important: to
   keep it on the left, aligned with the other children of the section, the
   margin has to be computed by hand from the column width, with important */
.entry-content .sc-method > p {
	max-width: calc( 700 * var(--sc-u) );
	margin-left: calc( ( 100% - var(--theme-normal-container-max-width) ) / 2 ) !important;
	margin-right: auto !important;
}

@media ( max-width: 960px ) {
	.entry-content .sc-method > p { max-width: none; margin-left: auto !important; }
}

@media ( max-width: 960px ) {
	.entry-content .sc-steps-grid {
		width: var(--theme-container-width);
		max-width: var(--theme-normal-container-max-width);
		margin-inline: auto !important;
		grid-template-columns: repeat( 2, 1fr );
		gap: calc( 125 * var(--sc-u) ) calc( 48 * var(--sc-u) );
	}
}
@media ( max-width: 560px ) { .entry-content .sc-steps-grid { grid-template-columns: 1fr; } }

/* --- One solution for every need ---------------------------------------- */

/*
 * In the mockup this grid is 1597 wide on 1920, with three 464 px cards and
 * 103 of space between them. The cards are about 376 px tall and the
 * gradient goes down from white to a solid colour; the icon is almost 190
 * px and sits ABOVE the card, resting on its top edge.
 */
/* the selector names the parent too: WordPress centres blocks with a rule
   of equal specificity that, coming later, would win */
.wp-block-group > .sc-needs-grid {
	/* in the mockup it is 1597 wide and centred; the container here is the
	   text column, narrower, so the margin comes out negative and widens it.
	   The important for the same reason as the band grid. */
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
	/* 415 and not 176: in the mockup between the bottom of the section title
	   and the icon drawing there are 241 px, and the icon sticks 182 above the
	   card. It is the room the big icon brings along. */
	margin-top: calc( 401 * var(--sc-u) );
	/* in the mockup between the bottom of the cards and "Se hai gia' un
	   problema" there are 95 px, not 25 */
	margin-bottom: calc( 94 * var(--sc-u) );
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: calc( 103 * var(--sc-u) );
}

/* below 960 the cards stack: between them there must be room for the icon,
   which sticks 228 above the card */
@media ( max-width: 960px ) {
	.wp-block-group > .sc-needs-grid {
		width: auto;
		margin-inline: 0 !important;
		grid-template-columns: 1fr;
		gap: calc( 320 * var(--sc-u) );
	}
}

/*
 * In the mockup the card is 463 wide and the text inside takes 361: that is
 * 51 px of padding per side, not 29. With 29 the text sat on four lines
 * instead of the mockup's five. Below the last line 114 px remain.
 */
.sc-need {
	/* in the mockup the corner of these cards is 60, not 18 */
	border-radius: var(--sc-radius-card);
	padding: 0 calc( 51 * var(--sc-u) ) calc( 100 * var(--sc-u) );
	min-height: calc( 340 * var(--sc-u) );
	text-align: center;
}

/*
 * In the mockup the drawing measures 197x167 and inside the SVG it takes 64
 * percent of the box: so a 307x258 box is needed, not 190x158, which gave
 * 122x102. The negative margin grows accordingly, to keep the drawing just
 * above the card edge as in the mockup.
 */
/* ".sc-need >" to beat the editor rule that zeroes the top margin of the
   first child of a group */
.sc-need > .sc-need__icon {
	width: calc( 307 * var(--sc-u) );
	height: calc( 258 * var(--sc-u) );
	margin: calc( -228 * var(--sc-u) ) auto calc( 26 * var(--sc-u) );
	color: var(--sc-green);
}

.sc-need__icon svg { width: 100%; height: 100%; }

/* no letter spacing: in the mockup the title measures 242 px, with the
   0.02em it came out 251 */
.sc-need h3 {
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 calc( 13 * var(--sc-u) );
}

.sc-need p { margin: 0; }

/* the end colours of the three gradients, taken from the mockup */
.sc-need.is-business { background: linear-gradient( 180deg, #ffffff 0%, #3779b4 100% ); }
.sc-need.is-shop { background: linear-gradient( 180deg, #ffffff 0%, #6bb4df 100% ); }
.sc-need.is-individual { background: linear-gradient( 180deg, #ffffff 0%, #6bc5b6 100% ); }

/* --- Contact invitation banner ------------------------------------------ */

/*
 * In the mockup this box does not sit inside the text column: it runs from
 * 160 to 1756, i.e. 1597 px, like the green box. On the site it was 1290
 * wide and the text inside wrapped elsewhere. The corner is 44, not 28.
 */
.sc-banner {
	/* in the mockup the gradient runs horizontally: (2,155,130) on the left
	   and (0,93,159) on the right, the same at the top and the bottom */
	background: var(--wp--preset--gradient--green-blue-diagonal, linear-gradient(90deg,#029c83,#005c9f));
	color: #fff;
	border-radius: var(--sc-radius-box-large);
	/* On all four mockup pages where this box appears it is 449 px tall,
	   whatever the text length: the height is fixed and the content sits in
	   the middle. The box crops the illustration, which in the mockup is
	   larger than its column. */
	position: relative;
	overflow: hidden;
	min-height: calc( 449 * var(--sc-u) );
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* min-height fixes the height: the vertical padding is only a reserve for
	   when the text is taller than that */
	padding: 0 calc( 80 * var(--sc-u) );
}

/* inside the banner the text starts at 812 on every mockup page: the
   illustration column is 436, not 512 */
.sc-banner > .sc-side-by-side {
	grid-template-columns: calc( 436 * var(--sc-u) ) 1fr;
	gap: calc( 61 * var(--sc-u) );
	align-items: center;
}

/*
 * In the mockup the illustration is about one and a half times the one we
 * had, laid against the left edge of the box and cropped by it: so it
 * cannot be in the flow, otherwise it would raise the box.
 */
.sc-banner > .sc-side-by-side > .wp-block-image {
	position: absolute;
	left: calc( -81 * var(--sc-u) );
	top: 50%;
	transform: translateY( -50% );
	width: calc( 804 * var(--sc-u) );
	max-width: none;
	margin: 0;
}

.sc-banner > .sc-side-by-side > .wp-block-image img { width: 100%; height: auto; }

/* the illustration leaves the flow: without this the text would slide into
   the first column, over the drawing */
.sc-banner > .sc-side-by-side > .wp-block-group { grid-column: 2; }

/* in the mockup the banner text wraps at 770 px, not at the full column
   (765 on Chi siamo, 713 on Per chi lavoriamo) */
.sc-banner > .sc-side-by-side > .wp-block-group > * { max-width: calc( 770 * var(--sc-u) ); }

@media ( max-width: 960px ) {
	.sc-banner { min-height: 0; padding: 3rem 2rem; }
	.sc-banner > .sc-side-by-side { grid-template-columns: 1fr; }
	.sc-banner > .sc-side-by-side > .wp-block-image {
		position: static;
		width: 100%;
		transform: none;
	}
	.sc-banner > .sc-side-by-side > .wp-block-group { grid-column: auto; }
}

.sc-banner h2 { color: #fff; }

.sc-banner img { border-radius: 0; }

/* white button on a coloured background */
.sc-banner .wp-block-button__link,
.sc-band .wp-block-button__link {
	background: #fff;
	color: var(--sc-darkblue);
}

/* --- Franchising teaser --------------------------------------------------- */

/*
 * As with the heroes, the image of this section is not an illustration to
 * put beside the text: it is the background of the whole band. The file
 * IMG/home 10.png is 1717x916 with the drawing on the left and the rest
 * empty, and in the mockup it is used MIRRORED, so the drawing ends up on
 * the right and the emptiness on the left makes room for the text. Checked
 * by overlaying the flipped file on the mockup: they match.
 *
 * The file proportions (1.874) coincide with those of the band in the
 * mockup (1920x1026 = 1.871), so at full width nothing gets cropped.
 */
.sc-teaser {
	position: relative;
	overflow: hidden;
	background: #fdeee3;
	border-radius: 0;
	min-height: calc( 1026 * var(--sc-u) );
	display: grid;
	align-content: center;
	padding-block: calc( 56 * var(--sc-u) );
}


.sc-teaser h2 { color: var(--sc-orange); }

.sc-teaser .sc-side-by-side {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax( 0, 42% );
}

/*
 * Below 960 the text, which does not shrink past its minimums, would reach
 * the drawing. As in the heroes, the image stays the band background with
 * the text on top: it covers everything (cover, mirrored and centred as
 * above 960) and carries a veil of the band colour at 72%.
 */
@media ( max-width: 960px ) {
	.sc-teaser { min-height: 0; }
	.sc-teaser > .sc-hero__background::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba( 253, 238, 227, .72 );
		pointer-events: none;
	}
	.sc-teaser .sc-side-by-side { grid-template-columns: 1fr; }
}


.sc-teaser .wp-block-button__link {
	background: var(--sc-orange);
	color: #fff;
}

/* --- Reviews --------------------------------------------------------------- */

/* in the mockup there are 216 px between the title and the cards, not 99 */
.sc-reviews-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: calc( 19 * var(--sc-u) );
	margin-top: calc( 141 * var(--sc-u) );
}

.sc-review {
	background: linear-gradient( 180deg, #ffffff 0%, #d8efe8 100% );
	border-radius: var(--sc-radius);
	/* 163 and not 176: measured on the mockup */
	min-height: calc( 163 * var(--sc-u) );
	display: grid;
	place-items: center;
	text-align: center;
	color: #7b8b9a;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1rem;
}


/* ==========================================================================
   OVERRIDES ON THE PARENT THEME
   Blocksy brings its own styles for body text and buttons, and at equal
   specificity they win over the values declared in theme.json. Here they
   are brought back to the project values. Deliberately at the end of the
   file: these are corrections against the parent, not our styles.
   ========================================================================== */

/* avoids the horizontal scrollbar created by the full-width sections */
body { overflow-x: clip; }

/*
 * THE MOCKUP TYPE SCALE
 *
 * The values below are not eyeballed: they come from the PDF, which for
 * every piece of text declares font name and size. Extracted with
 * `pdftohtml -xml`, which also returns the table of fonts used.
 *
 * Mockup page 1 has no Sora-Bold at all: titles are Sora regular, body text
 * is Sora-Light, and real bold (SemiBold) is reserved for bullet lists and
 * labels, which there are also in capitals.
 *
 *   section title            35 / regular 400
 *   body text                24 / Light 300
 *   arrow and check lists    24 / SemiBold 600, capitals
 *   card title               26 / regular 400
 *   card text                20 / Light 300
 *   step number              89 / regular 400
 *   button labels            20 / regular 400
 *
 * The values are in pixels because the mockup is drawn at 1920 and our
 * content column is as wide as its own to within 2%.
 */

.entry-content p,
.entry-content li {
	font-size: var(--wp--preset--font-size--medium, 1.5rem);
	font-weight: 300;
	/* in the mockup the body lines are 35 px apart at 24 px of body */
	line-height: 1.45;
}

/*
 * The weight of the titles.
 *
 * The PDF declares them as "Sora" with no suffix, and from that I had
 * inferred the regular weight. The measure says otherwise: counting the ink
 * pixels on the same sentence, at the same size and width, the mockup has
 * 9.23% and the site at weight 400 had 5.65%. The name of the subset
 * embedded in the PDF is not enough to tell the weight: what counts is how
 * much ink is on the page.
 */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 { font-weight: 700; }

/*
 * Line height of the section titles.
 *
 * In the mockup the two lines of "Il Metodo Semprechiaro: / dalla confusione
 * al controllo" start at 6933 and 6968: 35 px at 35 of body, i.e. 1. The
 * same holds for "Tutto quello che ti serve," (3909/3944), "Il tuo
 * Specialista Efficientamento / Utenze" (9471/9506) and every other two-line
 * title. The site used 52.5, and every two-line title came out 35 px
 * taller. The hero title instead is 45 on 60, i.e. 1.33: that one stays.
 */
.entry-content h2 { line-height: 1; }

/* on every mockup page there are 46 px between the section title and what
   follows (35 when a rule follows): GU 1121->1202, PCL 1148->1229, CS
   1644..1714->1761, SEU 5355->5436 */
.entry-content h2 { margin-bottom: calc( 46 * var(--sc-u) ); }
.entry-content h2:has( + .sc-rule ) { margin-bottom: calc( 35 * var(--sc-u) ); }

/* the mockup "bold" is SemiBold, not Bold */
.entry-content strong,
.entry-content b { font-weight: 600; }

/* the call-out line "Se hai gia' un problema" is in capitals in the mockup */
.entry-content .sc-strong-label strong { text-transform: uppercase; }

/* in the mockup there are 18 px below this label, not 54 */
.entry-content .sc-strong-label { margin-bottom: 0; }

/* the arrow and check lists: in the mockup they are in capitals and
   SemiBold, and that is what sets them apart from the body text */
.entry-content .sc-arrow-list > li,
.entry-content .sc-check-list > li {
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.35;
}

.entry-content .sc-bullet-list > li {
	font-size: calc( 14 * var(--sc-f) );
	/* Sora-SemiBold in the PDF: without this line the general list-item rule
	   brought them back to Light */
	font-weight: 600;
	line-height: 1.71;
}

/* in the mockup these items are in capitals at 24 px, with lines at 50 */
.entry-content .sc-dot-list > li {
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.45;
	margin-bottom: calc( 15 * var(--sc-u) );
}

.entry-content .sc-step p.sc-step__number {
	font-size: calc( 89 * var(--sc-f) );
	/* the font name in the PDF just says "Sora", but the ink of the "2." is 22%
	   in the mockup against 14% on the site at weight 400: it is bold */
	font-weight: 700;
	line-height: 1;
}

/* the card title in the mockup has 42.6% of ink against the 28.2% given
   by weight 400: it is bold, like the section titles */
.entry-content .sc-service h3 {
	font-size: calc( 26 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.25;
}

/* in the mockup the step titles are bold, like the card ones */
.entry-content .sc-step h3 {
	font-size: calc( 26 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: calc( 30 * var(--sc-u) );
}

.entry-content .sc-service p,
.entry-content .sc-step p {
	font-size: calc( 20 * var(--sc-f) );
	font-weight: 300;
	line-height: 1.45;
}

/* here too the text is heavy: same family as the titles */
.entry-content .sc-icon-card {
	font-size: calc( 22 * var(--sc-f) );
	font-weight: 700;
}

.entry-content .sc-need p,
.entry-content .sc-caption {
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 300;
}

/* buttons: shape and colours of the mockup, label at 20.7 bold. The weight
   comes from the glyph outlines in the PDF: in every button label the stem
   of the I is 22.5% of the cap height, like Sora 700 (the font name in the
   PDF just says "Sora" and is not enough) */
.entry-content .wp-block-button__link {
	background-color: var(--sc-darkblue);
	color: #fff;
	border-radius: 999px;
	/* in the mockup the button is 494x55 with the label at 20.7 */
	padding: calc( 11 * var(--sc-u) ) calc( 48 * var(--sc-u) );
	font-size: calc( 20.7 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.6;  /* 55 px tall with the padding, as in the mockup */
	text-transform: uppercase;
	letter-spacing: 0;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus { background-color: var(--sc-blue); }

.sc-banner .wp-block-button__link,
.sc-band .wp-block-button__link { background-color: #fff; color: var(--sc-darkblue); }

/* In the mockup the white button of the banner at the bottom of the page
   has a fixed width, not "text + margin": 368 x 56 on home and Gestione
   utenze (pages 1 and 2), 338 x 56 on Per chi lavoriamo and Contatti (3 and
   5). With "text + 48 per side" it came out 396. The text stays centred. */
.sc-banner .wp-block-button__link {
	/* the mockup measure is a minimum: the font size stops at 14.9 px below
	   1380 while the units keep shrinking, and between 960 and 1200 the label
	   overflowed the button */
	width: auto;
	min-width: calc( 338 * var(--sc-u) );
	padding-inline: calc( 12 * var(--sc-u) );
	text-align: center;
	white-space: nowrap;
}
.sc-page-home .sc-banner .wp-block-button__link,
.sc-page-gestione-utenze .sc-banner .wp-block-button__link { min-width: calc( 368 * var(--sc-u) ); }
@media ( max-width: 960px ) {
	.sc-banner .wp-block-button__link { width: auto; white-space: normal; padding-inline: 1.5rem; }
}

.sc-banner .wp-block-button__link:hover,
.sc-band .wp-block-button__link:hover { background-color: #eaf2f9; color: var(--sc-darkblue); }

.sc-teaser .wp-block-button__link { background-color: var(--sc-orange); }
.sc-teaser .wp-block-button__link:hover { background-color: #d96c17; }


/* ==========================================================================
   GESTIONE UTENZE PAGE SECTIONS
   As for the home, the small-screen behaviour is the minimum that keeps the
   page from breaking: there is no phone artwork yet, so there is no mobile
   design to follow.
   ========================================================================== */

/* --- Rule under the titles ------------------------------------------------ */

/* Measured on mockup page 2: 326 wide, 4 thick, dark blue on the coloured
   band too; 35 px below the title and 74 above what follows (102 above the
   band cards, 107 above a paragraph). It was 128x3 and white on the band. */
.sc-rule {
	/* the measures sit in two variables, so the variants (162 px under "I
	   nostri valori", 324 in the franchising) change them without clashing
	   with the separator block rule, which has the important */
	--sc-rule-width: calc( 326 * var(--sc-u) );
	--sc-rule-thickness: max( 2px, calc( 4 * var(--sc-u) ) );
	--sc-rule-color: var(--sc-darkblue);
	width: var(--sc-rule-width);
	height: var(--sc-rule-thickness);
	border: 0;
	margin: calc( 35 * var(--sc-u) ) 0 calc( 74 * var(--sc-u) );
	background: var(--sc-rule-color);
}

.sc-rule.is-centered { margin-inline: auto; }
.sc-band .sc-rule { margin-bottom: calc( 102 * var(--sc-u) ); }
/* below the eight cards the band leaves 141 px, not 80 */
.sc-band:has( .sc-services-grid-v ) { padding-bottom: calc( 141 * var(--sc-u) ); }
.sc-rule + p { margin-top: calc( 33 * var(--sc-u) ); }

/* above the requests grid the rule sits 49 px below the text */
.wp-block-group:has( > .sc-requests-grid ) > .sc-rule { margin-top: calc( 23 * var(--sc-u) ); }
.wp-block-group:has( > .sc-requests-grid ) > h2 { margin-bottom: calc( 40 * var(--sc-u) ); }

/* --- Tall placeholders for content not yet supplied --------------------- */

.sc-placeholder-tall {
	display: grid;
	place-items: center;
	/*
	 * The three placeholders have different sizes in the mockup, because the
	 * material they will host is different:
	 *   video on Gestione utenze   355x530
	 *   video on Chi siamo         355x537
	 *   dashboard on a phone       479x937  (inside the light-blue band)
	 * On the site they were all 288x384 with a 3:4 ratio.
	 */
	aspect-ratio: 355 / 537;
	/* width and not just a maximum, so the grid column shrinks exactly onto
	   it */
	width: calc( 355 * var(--sc-u) );
	max-width: 100%;
	margin-inline: auto;
	border-radius: calc( 60 * var(--sc-u) );
	color: rgba( 255, 255, 255, .85 );
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	padding: 1.5rem;
}

/* --- the two videos (Gestione utenze, Chi siamo) ---------------------------
   The agency's videos are vertical (9:16, 1080x1920): the box keeps the 355
   width and the 60 corner of the placeholder it replaces, and takes the
   height of the video (631) instead of the 537 of the mockup rectangle. The
   agency inserts or changes a video from the editor (Video block) inside
   this group. */
.sc-video {
	width: calc( 355 * var(--sc-u) );
	max-width: 100%;
	margin-inline: auto;
	aspect-ratio: 9 / 16;
	border-radius: calc( 60 * var(--sc-u) );
	overflow: hidden;
	background: #000;
}
.sc-video > .wp-block-video { margin: 0; height: 100%; }
.sc-video .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	/* The files are exactly 9:16, so "contain" fills the frame here and, unlike
	   "cover", does not crop the picture when the player goes full screen.
	   The selector must outweigh core's ".wp-block-video [poster]", which
	   sets "cover" on every video that has a poster. */
	object-fit: contain;
}
/* in a single column (below 960) the unit is 0.5 and the box came out 178 wide:
   too small for a video to watch on a phone, so here it keeps its full 355 */
@media ( max-width: 960px ) {
	.sc-video { width: min( 100%, 355px ); }
}

/* --- the dashboard on a phone (Gestione utenze) ---------------------------
   A phone drawn by us (no third-party artwork) with the agency's screenshot
   inside, cropped to the site (no browser bars). Same 479 width as the
   mockup rectangle; the height follows the image (a phone is shorter than
   the 937 of the rectangle). */
.sc-phone {
	width: calc( 479 * var(--sc-u) );
	max-width: 100%;
	margin-inline: auto;
}
.sc-phone > .wp-block-image { margin: 0; }
.sc-phone img { display: block; width: 100%; height: auto; }
@media ( max-width: 960px ) {
	.sc-phone { width: min( 100%, 420px ); }
}

/* the Gestione utenze video is as tall as the others too: the 375 measure
   I had taken before was only a piece of the box */
.sc-placeholder-tall.is-video {
	background: linear-gradient( 160deg, #4fc3a8 0%, #12a189 100% );
}

.sc-lightblue-section .sc-placeholder-tall {
	aspect-ratio: 479 / 937;
	width: calc( 479 * var(--sc-u) );
	max-width: 100%;
}

/* beside the Gestione utenze video the text is 760 wide in the mockup, not
   all the rest of the column */
.sc-side-by-side:has( > :last-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) > :first-child { max-width: calc( 760 * var(--sc-u) ); }

/*
 * Beside the phone, in the light-blue band, the text is 700 wide and has a
 * vertical green rule 37 px to its left: it starts at the top of the title
 * and ends with the first paragraph, 175 px in all, 3 thick.
 */
.sc-lightblue-section .sc-side-by-side { gap: calc( 54 * var(--sc-u) ); align-items: center; }
.sc-lightblue-section .sc-side-by-side > :last-child {
	position: relative;
	max-width: calc( 737 * var(--sc-u) );
	padding-left: calc( 37 * var(--sc-u) );
}
.sc-lightblue-section .sc-side-by-side > :last-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: calc( 175 * var(--sc-u) );
	width: max( 2px, calc( 3 * var(--sc-u) ) );
	background: var(--sc-green);
}
.sc-placeholder-tall.is-mobile { background: linear-gradient( 160deg, #1a7cc4 0%, #0a5ba8 100% ); }

/* --- The eight service cards of the band: icon above, text below -------- */

/*
 * In the mockup there are 222 px between the band title and the first row
 * of cards, not 64, and 45 between the two rows, not 23.
 */
/* in the mockup: four 300 cards with 23 px between them, 52 between rows;
   the rule under the title already provides the 102 px separating them from
   the title */
.sc-services-grid-v {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: calc( 52 * var(--sc-u) ) calc( 23 * var(--sc-u) );
	margin-top: 0;
}

@media ( max-width: 960px ) { .sc-services-grid-v { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 600px ) { .sc-services-grid-v { grid-template-columns: 1fr; } }

/* in the mockup the card is 424 tall: the title starts 141 px below the
   edge (20 of air, 109 of icon, 12 of gap) and the text has 250 of width */
.sc-service-v {
	background: #0b5ba9;
	border-radius: calc( 12 * var(--sc-u) );
	padding: calc( 20 * var(--sc-u) ) calc( 25 * var(--sc-u) ) calc( 18 * var(--sc-u) );
	text-align: center;
}

.sc-service-v__icon {
	/* the drawing in the mockup measures 71x96 against the site's 33x45: the
	   box goes from 51 to 109 */
	width: calc( 109 * var(--sc-u) );
	height: calc( 109 * var(--sc-u) );
	margin: 0 auto calc( 12 * var(--sc-u) );
	color: #fff;
}

.sc-service-v__icon svg { width: 100%; height: 100%; }

/*
 * In the mockup title and text of these cards share the same size, 22 px,
 * with lines at 26. The site used 15.2 and 13.6: the cards came out 233 tall
 * instead of 429 and the section lost almost 700 px.
 */
.sc-service-v h3 {
	color: #fff;
	font-size: calc( 22 * var(--sc-f) );
	line-height: 1.2;
	margin: 0 0 calc( 26 * var(--sc-u) );
}

.sc-service-v p {
	color: rgba( 255, 255, 255, .92 );
	font-size: calc( 22 * var(--sc-f) );
	line-height: 1.2;
	margin: 0;
}

/* --- Businesses / individuals comparison --------------------------------- */

.sc-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--sc-radius-box-large);
	overflow: hidden;
}

@media ( max-width: 782px ) { .sc-comparison { grid-template-columns: 1fr; } }

.sc-comparison__column { display: flex; flex-direction: column; }

/*
 * In the mockup the column head is 35 with lines at 35, and the body 24
 * with lines at 35: the same values as the section titles and the body
 * text. The site used 19.2 and 15.2, and the comparison came out 334 px
 * shorter.
 */
/*
 * Measures from mockup page 2: the box is 1597x640, each column 797. The
 * head is 118 tall whatever the number of title lines (35, white), with the
 * text in the middle. The body has 25 px above, 41 below, and the
 * paragraphs (24 with lines at 35) sit in a centred 660 column.
 */
.sc-comparison__head {
	min-height: calc( 118 * var(--sc-u) );
	display: grid;
	place-items: center;
	padding: 0 calc( 20 * var(--sc-u) );
	text-align: center;
	color: #fff;
	font-size: calc( 35 * var(--sc-f) );
	font-weight: 700;
	line-height: 1;
}

.sc-comparison__body {
	flex: 1;
	/* 30 at the sides, not 45: the closing "Non ti proponiamo una soluzione
	   solo perche' e' disponibile." is 736 wide in the mockup on a 799 column
	   and sits on one line; with 45 per side it wrapped */
	padding: calc( 25 * var(--sc-u) ) calc( 30 * var(--sc-u) ) calc( 41 * var(--sc-u) );
	text-align: center;
	font-size: calc( 24 * var(--sc-f) );
	line-height: 1.45;
}

.entry-content .sc-comparison__body > p { max-width: calc( 660 * var(--sc-u) ); margin-inline: auto; margin-bottom: 0; }
.entry-content .sc-comparison__body > p.sc-comparison__closing { max-width: none; }

/* colours sampled on the mockup: the businesses head is the brand blue
   (2,128,200), not the dark blue; the bodies fade from near white to a
   light blue (176,216,238) and to an aqua green (165,219,211) */
.sc-comparison__column.is-businesses .sc-comparison__head { background: var(--sc-blue); }
.sc-comparison__column.is-businesses .sc-comparison__body {
	background: linear-gradient( 180deg, #e3f1f9 0%, #b0d8ee 100% );
}

.sc-comparison__column.is-individuals .sc-comparison__head { background: #0f9e83; }
.sc-comparison__column.is-individuals .sc-comparison__body {
	background: linear-gradient( 180deg, #e0f3f0 0%, #a5dbd3 100% );
}

/* the closing: 24 px bold, brand blue (2,128,200) and green (2,156,130),
   lines at 36, 26 px below the list */
.entry-content .sc-comparison__closing {
	margin: calc( 26 * var(--sc-u) ) 0 0;
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 600;
	line-height: 1.5;
}

.sc-comparison__column.is-businesses .sc-comparison__closing { color: var(--sc-blue); }
.sc-comparison__column.is-individuals .sc-comparison__closing { color: var(--sc-green); }

/* compact bullet list: 14 px bold, capitals, black, lines at 24; in the
   mockup there are 11 px between the end of one item and the square of the
   next (the items flow like a centred paragraph); it starts 40 px below the
   text */
.sc-bullet-list {
	list-style: none;
	margin: calc( 40 * var(--sc-u) ) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 calc( 11 * var(--sc-u) );
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
}

.sc-bullet-list > li { position: relative; padding-left: calc( 16.5 * var(--sc-u) ); }

/* in the mockup the mark is a 9.4 px square with barely rounded corners,
   6.6 px before the text (it was a solid 6 px) */
.sc-bullet-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc( 7 * var(--sc-u) );
	width: calc( 9.4 * var(--sc-u) );
	height: calc( 9.4 * var(--sc-u) );
	border-radius: calc( 1.5 * var(--sc-u) );
	background: currentColor;
}

.is-businesses .sc-bullet-list > li::before { background: var(--sc-blue); }
.is-individuals .sc-bullet-list > li::before { background: var(--sc-green); }

/* --- Section on a rounded light-blue background --------------------------- */

/*
 * In the mockup this band is much airier than it was: 280 px above the
 * laptop and 154 below the last line of text, against the 56 and 62 it had.
 * Between the laptop and the title there are 171, not 24.
 */
.sc-lightblue-section {
	/* on mockup pages 2 and 4 it fades from white to (204,230,244), fast at
	   the start and slow at the end: halfway it is already at (216,236,247) */
	background: linear-gradient( 180deg, #ffffff 0%, #d8ecf7 50%, #cce6f4 100% );
	border-radius: 0;
	padding: calc( 56 * var(--sc-u) );
}

/* "La tecnologia serve a rendere tutto piu' chiaro": under the title there
   is a centred dark-blue rule of 162x3, 34 px below, and the text starts 45
   px below the rule in a 1232 column */
.sc-lightblue-section > h2.has-text-align-center::after {
	content: "";
	display: block;
	width: calc( 162 * var(--sc-u) );
	height: max( 2px, calc( 3 * var(--sc-u) ) );
	margin: calc( 34 * var(--sc-u) ) auto 0;
	background: var(--sc-darkblue);
}
.entry-content .sc-lightblue-section > h2.has-text-align-center { margin-bottom: calc( 45 * var(--sc-u) ); }
.entry-content .sc-lightblue-section > p.has-text-align-center { max-width: calc( 1232 * var(--sc-u) ); margin-inline: auto; }

/* the Chi siamo one, with the laptop: 280 px above and 154 below */
.sc-lightblue-section:has( .sc-dashboard ) {
	padding-top: calc( 280 * var(--sc-u) );
	padding-bottom: calc( 154 * var(--sc-u) );
}

.sc-lightblue-section .sc-dashboard { margin-bottom: calc( 167 * var(--sc-u) ); }
.sc-lightblue-section h2 { margin-bottom: calc( 51 * var(--sc-u) ); }

/* the Gestione utenze one, with the phone placeholder: 36 above and 254
   below, because there the placeholder makes the height */
.sc-lightblue-section:has( :is( .sc-placeholder-tall, .sc-phone ) ) {
	padding-top: calc( 36 * var(--sc-u) );
	padding-bottom: calc( 254 * var(--sc-u) );
}

/* --- Vertical dot list (when assistance is needed) ------------------------ */

.sc-dot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 700;
	font-size: .95rem;
}

.sc-dot-list > li {
	position: relative;
	padding-left: calc( 22 * var(--sc-u) );
}

.sc-dot-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	/* in the mockup the mark is a 10 px square, not a dot */
	width: calc( 10 * var(--sc-u) );
	height: calc( 10 * var(--sc-u) );
	background: var(--sc-blue);
}

/* the two columns of the legal section: 46 apart in the mockup, not 80 */
.sc-side-by-side:has( > * > .sc-dot-list ) { gap: calc( 46 * var(--sc-u) ); align-items: start; }

/* --- Notice with the exclamation mark ------------------------------------- */

.sc-notice {
	display: flex;
	align-items: center;
	gap: 1rem;
	/* on mockup page 2 the pill is 1040 wide and 82 tall, and fades from white
	   at the top to a grey-blue (204,230,244) at the bottom: measured on the
	   light pixels, not on a single colour, because the gradient misled */
	/* the gradient is not linear: halfway it is already at (216,236,247),
	   then it slows down. With two colours only the centre came out too pale. */
	background: linear-gradient( 180deg, #fdfeff 0%, #d8ecf7 50%, #c8e3f3 100% );
	border-radius: 999px;
	min-height: calc( 82 * var(--sc-u) );
	padding: calc( 8 * var(--sc-u) ) calc( 31 * var(--sc-u) ) calc( 8 * var(--sc-u) ) calc( 48 * var(--sc-u) );
	/* the text sits on one line, vertically centred on the mark: the pill is
	   1040 wide and, if the browser font renders the sentence a few pixels
	   longer, it widens by that much instead of wrapping */
	margin-inline: auto;
	width: fit-content;
	min-width: min( calc( 1040 * var(--sc-u) ), 100% );
	max-width: 100%;
}

/* below 1200 the one-line sentence does not fit the column (at 961 it left the page): it wraps */
@media ( min-width: 1200px ) {
	.entry-content .sc-notice p:not( .sc-notice__mark ) { white-space: nowrap; }
}

.sc-notice__mark {
	flex: 0 0 auto;
	color: var(--sc-darkblue);
	font-size: calc( 47 * var(--sc-f) );
	font-weight: 800;
	line-height: 1;
}
/* the mark sits inside, 48 px from the edge, and the text starts 27 px after */
.sc-notice { gap: calc( 27 * var(--sc-u) ); }

/*
 * In the mockup this notice is 882 wide and sits on two lines: the text is
 * 14 px. On the site it took 24, inherited from the general paragraph rule,
 * and ended up on four lines.
 */
.entry-content .sc-notice p:not( .sc-notice__mark ) {
	margin: 0;
	font-size: max( 11px, calc( 13 * var(--sc-f) ) );
	line-height: 1.5;
}

/*
 * The dashboard of "Tutto quello che ti serve".
 *
 * In the mockup the laptop does not sit inside the right column: its base
 * overflows to the left of the text and its right side leaves the page edge.
 * Measured on the coloured stripes of the cards, the sharpest reference:
 * the drawing starts at x 1064 and the text column at 1132, so 68 px of
 * overflow on the left. 616 px tall, i.e. the whole drawing.
 */
.sc-dashboard {
	/* WordPress renders figures as tables: they shrink onto their content and
	   the fixed width would not hold. display: block is needed. */
	display: block;
	/* from 1070 to 1920, i.e. up to the window edge: 850 px, 62 of them taken
	   to the left of the column. What overflows is already clipped by the
	   page body's overflow-x: clip. */
	width: calc( 850 * var(--sc-u) );
	margin-left: calc( -62 * var(--sc-u) );
	max-width: none;
}

.sc-dashboard img {
	width: 100%;
	/* 616 and not 660: measured on the mockup from the laptop's top edge to
	   its base. The height decides how much drawing is visible across, because
	   cover scales on the height: with 616 and an 850-wide frame the cut falls
	   inside the sixth card of the "Cambia Mese" row, as in the mockup. */
	height: calc( 616 * var(--sc-u) );
	object-fit: cover;
	/* in the mockup the left side of the laptop stays whole and the right one
	   gets cut, leaving the page edge */
	object-position: left center;
	border-radius: 0;
}

/*
 * In the light-blue band (Gestione utenze and Chi siamo) the laptop is not
 * cut: it shows whole, 911 px wide and centred. The rule above applies to
 * the home only, where it leaves the page edge.
 */
.sc-lightblue-section .sc-dashboard {
	/* 1140: measured by comparing the height of the dashboard's green bar in
	   the mockup (553 px) with the site's */
	width: min( calc( 1140 * var(--sc-u) ), 100% );
	margin-left: 0;
	margin-inline: auto;
}

.sc-lightblue-section .sc-dashboard img {
	height: auto;
	object-fit: fill;
}

@media ( max-width: 960px ) {
	/* in a narrow column the laptop goes back inside the column, whole */
	.sc-dashboard {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.sc-dashboard img { height: auto; object-fit: fill; }
}

/* --- The Method wheel ----------------------------------------------------- */

/* in the mockup the wheel is 1027 px wide, not 640 */
.sc-wheel {
	max-width: calc( 1027 * var(--sc-u) );
	margin-inline: auto;
}

/* The drawing comes from the mockup, extracted as vector from the PDF: no
   rounded corners, which here would be a crop on the illustration. */
.sc-wheel img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* --- Highlighted text block beside the steps ---------------------------- */

/* in the mockup: 20 px Medium in dark blue, lines at 34, 455 wide (it
   overflows its 400 column) */
.entry-content .sc-side-note,
.entry-content .sc-side-note p {
	color: var(--sc-darkblue);
	font-weight: 500;
	font-size: calc( 20 * var(--sc-f) );
	line-height: 1.7;
}
.sc-side-note { width: calc( 455 * var(--sc-u) ); max-width: none; margin-top: calc( -25 * var(--sc-u) ); }

/* ==========================================================================
   HEADER
   Built with the Blocksy builder (Appearance > Customize > Header): logo,
   menu, button, and a "Text" element holding the private-area link with its
   icon. Only the look is here, taken from mockup page 1: a 130-tall
   light-blue band, a white 1246x58 pill centred on the page with logo, menu
   and button inside, the private-area icon outside at 141 px from the
   pill's right edge.
   The selectors carry "#header" because Blocksy writes its rules with that
   id and at equal strength it would win.
   ========================================================================== */

/* the builder row is the light-blue band; --height is the minimum height
   Blocksy would impose on the row (the pill has its own) */
#header [data-row="middle"] {
	background-color: #e1eaf4;
	background-image: none;
	padding-block: calc( 42 * var(--sc-u) ) calc( 30 * var(--sc-u) );
	--height: 0;
}
#header [data-row="middle"] > div { min-height: 0; }

/* the row container is the pill. The menu words do not shrink as much as
   the screen (below 11 px they cannot be read), so the pill may grow beyond
   the proportional size: min-width fit-content */
#header [data-row="middle"] > .ct-container {
	position: relative;
	/* measured at half height on mockup page 1: from 325 to 1595, i.e. 1270
	   (earlier measures, taken near the curved edge, gave 1246 and the button
	   ended up against the edge). Inside, the logo starts at 341 and the
	   button ends at 1583: 16 px on the left, 12 on the right. */
	width: calc( 1270 * var(--sc-u) );
	max-width: calc( 100% - 2 * ( 141 + 35 + 12 ) * var(--sc-u) );
	min-width: fit-content;
	min-height: calc( 58 * var(--sc-u) );
	margin-inline: auto;
	padding: 0 calc( 12 * var(--sc-u) ) 0 calc( 16 * var(--sc-u) );
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 14px rgba( 12, 60, 105, .06 );
	display: grid;
	align-items: center;
	column-gap: calc( 56 * var(--sc-u) );
}
#header [data-column-set="3"] > .ct-container { grid-template-columns: auto 1fr auto; }
#header [data-column-set="2"] > .ct-container { grid-template-columns: auto 1fr; }
#header [data-row="middle"] .ct-container > div { min-height: 0; }
#header [data-column="middle"] { justify-content: flex-end; }
#header [data-column="middle"] > [data-items],
#header [data-column="end"] > [data-items] { justify-content: flex-end; }
/* in the mockup there are 52 px between the last item and the button, not 56 */
#header [data-device="desktop"] [data-column="end"] { margin-left: calc( -4 * var(--sc-u) ); }
/* Blocksy gives every element 10 px of margin: the grid makes the distances */
#header [data-items] > *,
#header [data-column="middle"] > * { --margin: 0; margin: 0; }

/* logo: 159x37 in the mockup */
#header .site-logo-container { --logo-max-height: calc( 37 * var(--sc-u) ); height: calc( 37 * var(--sc-u) ); }
#header .site-logo-container img { height: calc( 37 * var(--sc-u) ); width: auto; max-height: none; }
#header .site-title-container { display: none; }

/* menu: Sora regular at 13, capitals, 56 px between items */
#header .menu-container > ul.menu { gap: calc( 56 * var(--sc-u) ); }
#header .menu-container > ul.menu > li > a.ct-menu-link {
	padding: 0;
	min-height: 0;
	font-size: max( 11px, calc( 13 * var(--sc-f) ) );
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: uppercase;
	/* in the mockup the items are black (#000), not in the text's grey-blue:
	   with the same typeface black makes them look fuller */
	color: #000;
	white-space: nowrap;
}
#header .menu-container > ul.menu > li > a.ct-menu-link:hover,
#header .menu-container > ul.menu > li.current-menu-item > a.ct-menu-link { color: var(--sc-blue); }

/* orange button: 196x40 in the mockup, label at 15 regular, flush with
   the pill's right edge */
#header .ct-header-cta .ct-button {
	--theme-button-background-initial-color: var(--sc-orange);
	--theme-button-background-hover-color: #d96c17;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-min-height: 0;
	--theme-button-border-radius: 999px;
	border-radius: 999px;
	padding: calc( 12 * var(--sc-u) ) calc( 13 * var(--sc-u) );
	min-height: 0;
	line-height: 1;
	font-size: max( 11px, calc( 15 * var(--sc-f) ) );
	/* in the mockup the label is bold: the stem of the I is 22% of the cap
	   height, like Sora 700 (regular sits at 13%) */
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

/* the "Text" element takes no room: the link inside is absolute, outside
   the pill at 141 px from its right edge */
#header .ct-header-text { position: static; width: 0; min-width: 0; overflow: visible; }
#header .ct-header-text .entry-content { margin: 0; padding: 0; }
#header .sc-user {
	position: absolute;
	left: calc( 100% + 141 * var(--sc-u) );
	top: 50%;
	transform: translateY( -50% );
	width: calc( 35 * var(--sc-u) );
	height: calc( 35 * var(--sc-u) );
	color: var(--sc-darkblue);
	display: block;
}
#header .sc-user svg { width: 100%; height: 100%; display: block; }
/* on hover the icon turns brand blue, like the menu items */
#header .sc-user:hover,
#header .sc-user:focus-visible { color: var(--sc-blue); }

/* the button opening the side panel: not needed above 1200 px */
#header .ct-header-trigger { color: var(--sc-text); }
#header [data-device="desktop"] .ct-header-trigger { display: none; }

/* --- narrow screens ------------------------------------------------------
   Below 1200 px the six items at 11 px plus logo and button no longer fit
   the proportional pill without pushing the icon off the screen: from there
   down the menu and the button move into the Blocksy off-canvas panel,
   opened by the three-line button. There is no mockup page here: logo and
   icon stay at a readable size. */
@media ( max-width: 1200px ) {
	#header [data-device="desktop"] .menu-container,
	#header [data-device="desktop"] .ct-header-cta { display: none; }
	#header [data-device="desktop"] .ct-header-trigger { display: flex; }
	#header [data-column-set="3"] > .ct-container { grid-template-columns: auto 1fr auto; }

	#header [data-row="middle"] { padding-block: 1.3rem; }
	#header [data-row="middle"] > .ct-container {
		width: auto;
		min-width: 0;
		max-width: none;
		margin-inline: 1.5rem calc( 1.5rem + 30px + 1.2rem );
		padding: .6rem 1rem;
		/* as it was before the builder: pill 57.4 px tall, band 99 */
		min-height: 3.5875rem;
		/* it stays a capsule as above 1200, not a rounded rectangle */
		border-radius: 999px;
		column-gap: 1.5rem;
	}
	#header .site-logo-container, #header .site-logo-container img { height: 30px; }
	#header .sc-user { left: calc( 100% + 1.2rem ); width: 30px; height: 30px; }
}

/* the side panel: white, with the menu items at 15 in capitals and the
   orange button at the bottom */
#offcanvas .ct-panel-inner { background-color: #fff; }
#offcanvas [data-id="mobile-menu"] > ul > li > a {
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sc-text);
}
#offcanvas .ct-header-cta { margin-top: 1.5rem; }
#offcanvas .ct-header-cta .ct-button {
	--theme-button-background-initial-color: var(--sc-orange);
	--theme-button-background-hover-color: #d96c17;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
}

/* ==========================================================================
   FOOTER
   Flat green background #04ad8c and black text: both sampled from the
   mockup pixels. Between the menu columns runs a 1 px orange rule — a
   detail that only shows when sampling.
   ========================================================================== */

/*
 * The footer is built by the Blocksy builder (Appearance > Customize >
 * Footer): one row with four columns, each a widget area with ordinary
 * blocks (Appearance > Widgets): 1 brand image + description + legal data;
 * 2 contacts + Blocksy socials; 3 and 4 the two footer menus (Appearance >
 * Menus). The fifth area, with the privacy/cookie menu, sits in the fourth
 * column and shows only on the landing. Only the look is here, taken from
 * mockup page 1: the content runs from x 164 to 1780 (1616 on 1920); the
 * columns start at x 165, 649, 1316, 1639, all at the same height (y 12752)
 * with the brand image ABOVE the first; the rules beside the menus are
 * orange and 4 thick. Size 16 for the description, 13 for labels and items.
 * The selectors carry "#footer" because Blocksy writes its rules with the
 * id and with [data-footer*="type-1"].
 */
#footer.ct-footer,
body[data-footer] #footer.ct-footer {
	background-color: var(--sc-footer-green);
	background-image: none;
	color: #000;
	font-size: max( 11px, calc( 13 * var(--sc-f) ) );
	line-height: 1.5;
	--theme-text-color: #000;
	--theme-link-initial-color: #000;
	--theme-link-hover-color: #fff;
	--widgets-gap: 0px;
	--theme-content-spacing: 0;
}

/* The white cap with rounded bottom corners: in the mockup the white
   content area ends with two curves and the green shows below. */
#footer.ct-footer::before {
	content: "";
	display: block;
	height: calc( 48 * var(--sc-u) );
	background: #fff;
	border-radius: 0 0 calc( 44 * var(--sc-u) ) calc( 44 * var(--sc-u) );
}

#footer [data-row="middle"] { background-color: transparent; }
#footer [data-row="middle"] > .ct-container {
	width: auto;
	max-width: calc( 1616 * var(--sc-u) );
	margin-inline: auto;
	/* in the mockup the brand image starts 154 px below the footer edge and
	   the last line of text leaves 103 below */
	padding: calc( 152 * var(--sc-u) ) calc( 24 * var(--sc-u) ) calc( 88 * var(--sc-u) );
	--container-spacing: 0px;
	--grid-template-columns: 3.45fr 4.4fr 2.06fr 1fr;
	--columns-gap: calc( 32 * var(--sc-u) );
	grid-template-columns: var(--grid-template-columns);
	align-items: start;
}
/* no Blocksy dividers between the columns */
#footer [data-column]:not(:last-child)::after { content: none; }
#footer [data-column] { align-items: stretch; }

/* the three right columns start at the height of the description, not at
   the top: above the first there is the brand image. Margin and not padding,
   otherwise the orange rule would start above the text. */
#footer [data-column]:not([data-column="widget-area-1"]) { margin-top: calc( 218 * var(--sc-u) ); }

#footer .ct-widget { margin: 0; }

/* --- brand image, description, legal data ------------------------------- */

#footer figure.sc-footer__logo {
	margin: 0 0 calc( 43 * var(--sc-u) );  /* 43 px down to the text, mockup page 2 */
	width: 100%;
	max-width: calc( 316 * var(--sc-u) );
}
#footer figure.sc-footer__logo img { display: block; width: 100%; height: auto; }

#footer p { margin: 0 0 1em; }
/* in the mockup the description lines are 22 px apart at 16 of body, and
   the legal data ones 16 at 13 */
#footer p.sc-footer__description { font-size: max( 12px, calc( 16 * var(--sc-f) ) ); line-height: 1.375; }
/* the legal data in the mockup are at 13.3 with lines at 16 */
#footer p.sc-footer__legal { font-size: max( 11px, calc( 13.3 * var(--sc-f) ) ); line-height: 1.2; }

/* --- the contacts: bold label, value beside it ---------------------------- */

/* the column is a two-column grid: every contact spans it whole, the
   "Social" row keeps the label on the left and the Blocksy icons on the right */
#footer [data-column="widget-area-2"] {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: calc( 22 * var(--sc-u) );
	/* in the mockup the contact rows are 49 px apart */
	row-gap: calc( 30 * var(--sc-u) );
	align-items: baseline;
}
/* every contact (a widget with one paragraph) uses the same two columns of
   the grid (subgrid): so the values are all aligned, like in a table */
#footer [data-column="widget-area-2"] > .ct-widget { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
#footer [data-column="widget-area-2"] > .ct-widget:has( .is-social ) { grid-column: 1; grid-template-columns: auto; }
#footer [data-column="widget-area-2"] > .ct-footer-socials { grid-column: 2; margin: 0; }

#footer p.sc-footer__contact {
	margin: 0;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: baseline;
	font-size: inherit;
	line-height: 1.5;
	font-weight: 600;
}
/* on mockup pages 1 and 6 the label is Sora regular at 13.3 ("SEDE LEGALE"
   87 wide), the value Sora SemiBold at 13.3 */
#footer p.sc-footer__contact > strong {
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}
#footer p.sc-footer__contact a { color: inherit; text-decoration: none; }
#footer p.sc-footer__contact a:hover { text-decoration: underline; }

/* the Blocksy social icons: black, white on hover, 21 px */
#footer .ct-footer-socials .ct-social-box {
	--theme-icon-size: 1.3rem;
	--theme-icon-color: #000;
	--theme-icon-hover-color: #fff;
	--background-color: transparent;
	--background-hover-color: transparent;
	gap: .7rem;
	justify-content: flex-start;
}
#footer .ct-footer-socials .ct-social-box a { --spacing: 0; padding: 0; }

/* --- the two menu columns, with the orange rule --------------------------- */

#footer .widget_nav_menu {
	border-left: max( 2px, calc( 4 * var(--sc-u) ) ) solid var(--sc-orange);
	padding-left: calc( 22 * var(--sc-u) );
}
#footer .widget_nav_menu ul.widget-menu { list-style: none; margin: 0; padding: 0; --menu-indent: 0; }
#footer .widget_nav_menu ul.widget-menu li { margin: 0; padding: 0; }
#footer .widget_nav_menu ul.widget-menu a {
	display: block;
	/* in the mockup the items are 44 px apart: 19.5 of line plus 12 above and below */
	padding: calc( 12 * var(--sc-u) ) 0;
	color: #000;
	/* in the mockup the items are Sora SemiBold at 13.3 ("GESTIONE UTENZE" 124 wide) */
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	/* in the mockup "PRIVACY POLICY" (113 px) sits on one line in the last column */
	white-space: nowrap;
}
#footer .widget_nav_menu ul.widget-menu a:hover { color: #fff; }
/* the landing menu (privacy/cookie) sits in the third column, below the
   site menu, hidden everywhere except on the landing */
#footer [data-column="widget-area-3"] > .ct-widget:nth-child(2) { display: none; }

@media ( max-width: 960px ) {
	#footer [data-column]:not([data-column="widget-area-1"]) { margin-top: 0; }
	#footer [data-row="middle"] > .ct-container {
		max-width: none;
		padding-inline: 1.5rem;
		--grid-template-columns: 1fr 1fr;
		--columns-gap: 2rem;
	}
}

@media ( max-width: 600px ) {
	#footer [data-row="middle"] > .ct-container { --grid-template-columns: 1fr; }
	#footer .widget_nav_menu { border-left: 0; padding-left: 0; }
}

/* screen-reader-only text, in case the parent theme did not define it */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}


/* --- override: the content column must not detach from the header ---------
   Blocksy puts spacing at the top of the content container, which opened a
   white band between the coloured strip and the hero. In the mockup the
   light blue is continuous: header, strip, hero. Pages always start with a
   full-width section, so the top spacing is not needed. */
body.page .ct-container-full[data-vertical-spacing] { padding-top: 0; }

/* --- container of the animated icons ------------------------------------- */

.sc-lottie {
	width: 100%;
	height: 100%;
	display: block;
	/* the two colours of the stroke gradient (see assets/lottie.js): in the
	   mockup the icons go from dark blue to green along the diagonal */
	--sc-gradient-1: var(--sc-darkblue);
	--sc-gradient-2: var(--sc-green);
}
/* on the landing the gradient is orange -> green (mockup page 6) */
body.sc-landing .sc-lottie { --sc-gradient-1: var(--sc-orange); }

/* The five values of Chi siamo: on mockup page 4 each icon has its own
   gradient, left to right (read from the PDF, start -> end):
   1 dark blue -> blue, 2 green -> blue, 3 green -> magenta,
   4 dark blue -> magenta, 5 orange -> dark blue. */
.sc-value .sc-lottie { --sc-gradient-direction: horizontal; }
.sc-value.is-1 .sc-lottie { --sc-gradient-1: #005c9f; --sc-gradient-2: #0280c8; }
.sc-value.is-2 .sc-lottie { --sc-gradient-1: #029c82; --sc-gradient-2: #0280c8; }
.sc-value.is-3 .sc-lottie { --sc-gradient-1: #029c82; --sc-gradient-2: #b92185; }
.sc-value.is-4 .sc-lottie { --sc-gradient-1: #005c9f; --sc-gradient-2: #b92185; }
.sc-value.is-5 .sc-lottie { --sc-gradient-1: #f07e23; --sc-gradient-2: #005c9f; }

.sc-lottie svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   PER CHI LAVORIAMO PAGE SECTIONS
   ========================================================================== */

/* --- row with a blue icon box, in the hero -------------------------------- */

/* Measures from mockup page 3: 83x83 box with a 12 corner, text at 22 bold
   dark blue with lines at 27, 25 px between box and text, 37 between one
   row and the next, 73 before the closing sentence. */
.sc-icon-row {
	display: flex;
	align-items: flex-start;
	gap: calc( 25 * var(--sc-u) );
	margin-bottom: calc( 37 * var(--sc-u) );
}

.sc-icon-row + p { margin-top: calc( 73 * var(--sc-u) ); }

.sc-icon-row__box {
	flex: 0 0 auto;
	width: calc( 84 * var(--sc-u) );
	height: calc( 84 * var(--sc-u) );
	/* no padding: the two SVG files are traced from the PDF with the 84 box as
	   viewBox, and the drawing (57x47 the factory, 46x45 the house) already
	   sits in place inside. Before, the 17 padding and the empty margin inside
	   the file shrank it to 37 px. */
	padding: 0;
	border-radius: calc( 12 * var(--sc-u) );
	background: var(--sc-darkblue);
	color: #fff;
}

.sc-icon-row__box svg { width: 100%; height: 100%; display: block; }

/* the general hero rule (32 px Medium) would win: everything is named */
.sc-hero .sc-hero__text .sc-icon-row p {
	margin: calc( 12 * var(--sc-u) ) 0 0;
	font-weight: 600;
	color: var(--sc-darkblue);
	font-size: calc( 22 * var(--sc-f) );
	line-height: 1.23;
}

/* The closing sentence of the sections (same class as the hero kicker) and
   the arrows of the label lists take the section colour: blue for the
   business, dark blue for the shop, green for the individual. */
.sc-side-by-side { --sc-accent: var(--sc-blue); }
.sc-side-by-side.is-reversed { --sc-accent: var(--sc-darkblue); }
.sc-side-by-side:has( .sc-green-title ),
.sc-side-by-side:has( .sc-hero__kicker.is-green ) { --sc-accent: var(--sc-green); }

.entry-content .sc-side-by-side p.sc-hero__kicker,
.entry-content > .wp-block-group > p.sc-hero__kicker {
	color: var(--sc-accent);
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 500;
	margin-top: calc( 37 * var(--sc-u) );
}

/* in the mockup there are 46 px between the title and the text of these sections */
.sc-side-by-side.is-narrow h2 { margin-bottom: calc( 46 * var(--sc-u) ); }

/* "Semprechiaro ti aiuta a" and the list that follows: 5 px, not a blank line */
.entry-content p:has( + .sc-arrow-list.is-labels ) { margin-bottom: calc( 5 * var(--sc-u) ); }

/* --- client logos grid ----------------------------------------------------- */

/*
 * In the mockup the boxes are 296x224 with 40 px between rows, and the grid
 * has 168 px above and 224 below inside the band. On the site they were
 * 303x202 with 25 of gap, 58 above and 32 below.
 */
/* re-measured on mockup page 3: 303x233 boxes with a 40 corner, 22 px
   between columns and 32 between rows. In the mockup the grid sits 100 px
   left of centre (223..1495): here it is centred, which is almost certainly
   the intent. */
.sc-logos-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: calc( 32 * var(--sc-u) ) calc( 22 * var(--sc-u) );
	/* in the mockup the grid has 417 px above and 287 below inside the band.
	   Of those 287, 80 come from the band padding, so 207 are left to the
	   margin. The important is needed because the block editor layout zeroes
	   the margin of the last child. */
	margin-top: calc( 153 * var(--sc-u) );
	margin-bottom: calc( 207 * var(--sc-u) ) !important;
}

@media ( max-width: 960px ) { .sc-logos-grid { grid-template-columns: repeat( 2, 1fr ); } }

.sc-client-logo {
	background: #fff;
	border-radius: calc( 40 * var(--sc-u) );
	aspect-ratio: 303 / 233;
	display: grid;
	place-items: center;
	text-align: center;
	color: #9fb3c4;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: calc( 26 * var(--sc-u) );
	overflow: hidden;
}

/*
 * A client logo is an image block dropped inside the box from the panel. The
 * box keeps the 303:233 of the mockup whatever the file is: the image scales
 * down to fit and is centred, so a wide logo, a square one and a tall one all
 * sit on the same grid line. Without this, an image taller than the ratio
 * stretches its own box and breaks the row.
 */
.entry-content .sc-client-logo > .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sc-client-logo .wp-block-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* --- "Presenta un amico" section ------------------------------------------ */

.sc-friend-section {
	/* sampled at the bottom of the mockup: (155,215,205) */
	background: linear-gradient( 180deg, #ffffff 0%, #9bd7cd 100% );
	border-radius: 0;
	padding: calc( 56 * var(--sc-u) ) calc( 56 * var(--sc-u) ) calc( 92 * var(--sc-u) );
	text-align: center;
}

/* the bottom corners are rounded (45 in the mockup); the full-page boxes
   rule zeroes them, so they are declared again here */
.entry-content .sc-friend-section { border-radius: 0 0 calc( 45 * var(--sc-u) ) calc( 45 * var(--sc-u) ); }

.sc-friend-section h2 { color: var(--sc-green); }

/*
 * In the mockup the three cards are 302 wide with 18 px between them, i.e.
 * a 942 grid, and the drawing inside is 136 tall: on the site they were 230
 * on 736 with a 58 box.
 */
/* re-measured: three 292 cards with 28 between them (934 grid, centred),
   373 tall; the drawing is 154 tall and starts 34 px below the edge, the
   text at 15 bold with lines at 21 starts 18 px below the drawing */
.sc-friend-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: calc( 28 * var(--sc-u) );
	max-width: calc( 934 * var(--sc-u) );
	/* in the mockup there are 93 px between the opening text and the cards */
	margin: calc( 93 * var(--sc-u) ) auto 0;
}

@media ( max-width: 782px ) { .sc-friend-grid { grid-template-columns: 1fr; } }

.sc-friend-card {
	background: #fff;
	border-radius: calc( 32 * var(--sc-u) );
	padding: calc( 34 * var(--sc-u) ) calc( 24 * var(--sc-u) ) calc( 25 * var(--sc-u) );
	text-align: center;
}

.sc-friend-card__icon {
	width: calc( 154 * var(--sc-u) );
	height: calc( 154 * var(--sc-u) );
	margin: 0 auto calc( 18 * var(--sc-u) );
	color: var(--sc-green);
}

.entry-content .sc-friend-card p {
	margin: 0;
	font-size: max( 12px, calc( 15 * var(--sc-f) ) );
	font-weight: 600;
	line-height: 1.4;
}

/* two-line title with the second line in green, as in the mockup */
.sc-green-title { color: var(--sc-green); }

/* variant of the arrow list: capitals and bold, as on mockup pages 3 and
   4, where the items are labels rather than sentences */
/* in the mockup these labels are at 20 px with lines at 36, not at 12.5 */
.entry-content .sc-arrow-list.is-labels > li {
	font-size: calc( 20 * var(--sc-f) );
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.45;
	margin-bottom: calc( 7 * var(--sc-u) );
	/* the arrow is 27 wide and the text starts 35 px after the beginning of the line */
	padding-left: calc( 35 * var(--sc-u) );
}

/* the arrow of these labels is the same as in the other lists (27x24, 3.65
   stroke) but takes the section colour: it is drawn as a mask and coloured
   with the background */
.entry-content .sc-arrow-list.is-labels > li::before {
	width: calc( 27 * var(--sc-u) );
	height: calc( 24 * var(--sc-u) );
	top: .15em;
	background-color: var(--sc-accent, var(--sc-blue));
	background-image: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23000' stroke-width='3.65' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M0 12h20.1M13.8 1.3l10.7 10.7-10.7 10.7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24' fill='none' stroke='%23000' stroke-width='3.65' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M0 12h20.1M13.8 1.3l10.7 10.7-10.7 10.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   CHI SIAMO PAGE SECTIONS
   ========================================================================== */

/* --- the three "non siamo..." rows ----------------------------------------- */

/*
 * On the two mockup pages where they appear, these pills are 56 px tall
 * with 56 of space between them and the text inside is 22: on the site they
 * were 53 tall with 16 of space and the text at 12.5, less than half.
 */
/* Re-measured on mockup page 4: pills 760 wide and 72 tall, fading from
   white at the top to (178,225,217) at the bottom; the mark is 31x32 at 33
   from the edge and the text, at 20 SemiBold, starts 99 px from the edge;
   39 px between pills. At 20 px the line measures 629 as in the mockup: the
   earlier tight letter spacing was only needed because the size was 22. */
.sc-no-row {
	display: flex;
	align-items: center;
	gap: calc( 35 * var(--sc-u) );
	background: linear-gradient( 180deg, #ffffff 0%, #b2e1d9 100% );
	border-radius: 999px;
	min-height: calc( 72 * var(--sc-u) );
	padding: calc( 10 * var(--sc-u) ) calc( 20 * var(--sc-u) ) calc( 10 * var(--sc-u) ) calc( 33 * var(--sc-u) );
	margin-bottom: calc( 39 * var(--sc-u) );
	font-size: calc( 20 * var(--sc-f) );
	font-weight: 600;
	/* the browser font renders the line a few pixels longer than the mockup:
	   two hundredths of an em bring it back to 760 */
	letter-spacing: -.02em;
	text-transform: uppercase;
	line-height: 1.3;
}

.sc-no-row:last-child { margin-bottom: 0; }

/* in the mockup the title sits at the top and the first pill starts 15 px
   lower: the two columns are not centred on each other */
.sc-side-by-side:has( .sc-no-row ) { align-items: start; }
.sc-side-by-side > *:has( > .sc-no-row ) { padding-top: calc( 15 * var(--sc-u) ); }

/* when the pills sit on the right their column is 760 wide and the title
   keeps 500, what it needs to sit on two lines */
.sc-side-by-side:has( > *:last-child > .sc-no-row ) {
	grid-template-columns: 1fr calc( 760 * var(--sc-u) );
	column-gap: calc( 30 * var(--sc-u) );
}

@media ( max-width: 960px ) {
	.sc-side-by-side:has( > *:last-child > .sc-no-row ) { grid-template-columns: 1fr; }
	.sc-no-row { min-height: 0; white-space: normal; }
}

.sc-no-row__mark {
	flex: 0 0 auto;
	width: calc( 31 * var(--sc-u) );
	height: calc( 32 * var(--sc-u) );
	color: var(--sc-green);
}

.sc-no-row__mark svg { width: 100%; height: 100%; display: block; }

/* --- org chart -------------------------------------------------------------- */

/*
 * In the mockup the photos are 303x387 on three columns running from 323 to
 * 1595, i.e. 1273 px with 182 of space between them. On the site the grid
 * was 832 wide with 256x320 photos: a third smaller.
 */
.sc-people-grid {
	display: grid;
	grid-template-columns: repeat( 3, calc( 303 * var(--sc-u) ) );
	/* between the bottom of one photo and the next the mockup leaves 101 px,
	   and between the title and the first row 148 */
	gap: calc( 101 * var(--sc-u) ) calc( 182 * var(--sc-u) );
	justify-content: center;
	max-width: none;
	margin: calc( 148 * var(--sc-u) ) auto 0;
}

@media ( max-width: 960px ) { .sc-people-grid { grid-template-columns: repeat( 2, 1fr ); gap: calc( 60 * var(--sc-u) ); } }
@media ( max-width: 520px ) { .sc-people-grid { grid-template-columns: 1fr; } }

.sc-person { text-align: center; }

.sc-person__photo {
	/* 303x387 in the mockup, with a 64 corner and not 22 */
	aspect-ratio: 303 / 387;
	border-radius: calc( 64 * var(--sc-u) );
	background: linear-gradient( 160deg, #1a7cc4 0%, #0a5ba8 100% );
	display: grid;
	place-items: center;
	color: rgba( 255, 255, 255, .8 );
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 0;
	overflow: hidden;
}

/* The portrait fills the box whatever its size: the box keeps the 303:387
   ratio and the image is cropped to it (object-fit), anchored on the top so
   the face never gets cut when the ratio of the file differs. */
.entry-content .sc-person__photo > .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}
.sc-person__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: inherit;
}

/* name (15 SemiBold, capitals) and role (15 Light): the name sits 64 px
   below the photo and the role 44 below the name. The selector names
   .entry-content to beat the general paragraph rule, which would take them
   to 24. */
.entry-content .sc-person__name {
	margin: calc( 64 * var(--sc-u) ) 0 calc( 22 * var(--sc-u) );
	font-size: max( 12px, calc( 15 * var(--sc-f) ) );
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.5;
}

.entry-content .sc-person__role { margin: 0; font-size: max( 12px, calc( 15 * var(--sc-f) ) ); font-weight: 300; line-height: 1.5; color: #000; }

/* --- the five values ------------------------------------------------------- */

/*
 * In the mockup the five icons sit on a grid as wide as the other boxes,
 * 1597, with a 323 px pitch, and there are 118 px between the title and the
 * icons. On the site the grid was 1258 with a 255 pitch and a 25 px gap.
 */
/* the blue rule under the title: 162x3, as under "La tecnologia" */
.wp-block-group:has( > .sc-values-grid ) > .sc-rule {
	--sc-rule-width: calc( 162 * var(--sc-u) );
	--sc-rule-thickness: max( 2px, calc( 3 * var(--sc-u) ) );
	width: var(--sc-rule-width);
	height: var(--sc-rule-thickness);
	margin: calc( 35 * var(--sc-u) ) auto 0;
}

/* five 304 cards with 20 between them on 1597; the cards start 263 px
   below the rule, 226 of which are taken by the icon floating above */
.sc-values-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: calc( 20 * var(--sc-u) );
	margin-top: calc( 37 * var(--sc-u) );
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
}

@media ( max-width: 960px ) {
	.sc-values-grid { width: auto; margin-inline: 0 !important; grid-template-columns: repeat( 2, 1fr ); column-gap: calc( 40 * var(--sc-u) ); }
}
@media ( max-width: 600px ) { .sc-values-grid { grid-template-columns: 1fr; } }

/*
 * In the mockup the icon does not sit inside the card: it floats above,
 * 36 px off the top edge, and the card is 213 px tall with the text at the
 * top. Inside the card it made 331 px of card and no gap.
 */
.sc-value {
	position: relative;
	margin-top: calc( 226 * var(--sc-u) );
	/* 239 in the mockup (from 7781 to 8020), corner 30, name 32 from the edge */
	min-height: calc( 239 * var(--sc-u) );
	border-radius: calc( 30 * var(--sc-u) );
	padding: calc( 32 * var(--sc-u) ) calc( 20 * var(--sc-u) ) calc( 20 * var(--sc-u) );
	text-align: center;
}

/* the drawing in the mockup is 148 px tall and inside the box it takes 78
   percent: a 190 box is needed, not 64, which gave 50 */
.sc-value__icon {
	position: absolute;
	left: 50%;
	bottom: calc( 100% + 36 * var(--sc-u) );
	transform: translateX( -50% );
	width: calc( 190 * var(--sc-u) );
	height: calc( 190 * var(--sc-u) );
	margin: 0;
}

/* name 15 SemiBold, text 15 Light with lines at 23; 45 px between the two */
.entry-content .sc-value h3 {
	margin: 0 0 calc( 22 * var(--sc-u) );
	font-size: max( 12px, calc( 15 * var(--sc-f) ) );
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.5;
}

.entry-content .sc-value p { margin: 0; font-size: max( 12px, calc( 15 * var(--sc-f) ) ); font-weight: 300; line-height: 1.5; }

/* the five backgrounds, sampled at the bottom of the mockup cards: white in
   the first quarter, then down to the solid colour */
.sc-value.is-1 { background: linear-gradient( 180deg, #ffffff 25%, #71b8e0 100% ); }
.sc-value.is-2 { background: linear-gradient( 180deg, #ffffff 25%, #71c7b9 100% ); }
.sc-value.is-3 { background: linear-gradient( 180deg, #ffffff 25%, #d882bb 100% ); }
.sc-value.is-4 { background: linear-gradient( 180deg, #ffffff 25%, #70a3c9 100% ); }
.sc-value.is-5 { background: linear-gradient( 180deg, #ffffff 25%, #f6b683 100% ); }

/* --- white->light green section, reused by several pages ----------------- */

/* measured on mockup page 4: 1597x740, fades from white to (154,215,205)
   with a slow start; 99 px above the title and 75 below the last line */
.sc-green-block {
	background: linear-gradient( 180deg, #ffffff 0%, #e3f4f1 25%, #cbeae5 50%, #9ad7cd 100% );
	border-radius: var(--sc-radius-box-large);
	padding: calc( 99 * var(--sc-u) ) calc( 56 * var(--sc-u) ) calc( 75 * var(--sc-u) );
	text-align: center;
}

.sc-green-block h2 { color: var(--sc-green); }

/* the opening text sits in a 750 column; the three steps below are left
   aligned with the title in capitals attached to the text (9 px), and the
   lines start 103 px below the last line */
.entry-content .sc-green-block > p { max-width: calc( 750 * var(--sc-u) ); margin-inline: auto; }
.sc-green-block .sc-step { text-align: left; }
.entry-content .sc-green-block .sc-step h3 { text-transform: uppercase; margin-bottom: calc( 9 * var(--sc-u) ); }
.entry-content .sc-green-block .sc-steps-grid { margin-top: calc( 103 * var(--sc-u) ); }

/* ==========================================================================
   CONTATTI PAGE SECTIONS
   ========================================================================== */

/* --- typical requests grid ------------------------------------------------- */

/*
 * In the mockup these cards are the same as those of the home band: 464x105
 * on a 1434-wide grid, with 22 px between them. On the site they were
 * 409x69 on 1258.
 */
.sc-requests-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	/* in the mockup the columns are 20 px apart and the rows 55: the grid
	   breathes much more vertically than horizontally */
	gap: 55px 20px;
	/* 84 px below the rule, 109 before the form title */
	margin-block: 84px 0;
	max-width: none;
	width: 1434px;
	margin-inline: calc( ( 100% - 1434px ) / 2 ) !important;
}

@media ( max-width: 1550px ) {
	.sc-requests-grid { width: auto; margin-inline: 0 !important; }
}

/* on three columns the cards (80 icon + 22 px text) no longer fit below 1025: between 961 and 1000 they left the page */
@media ( max-width: 1024px ) { .sc-requests-grid { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 560px ) { .sc-requests-grid { grid-template-columns: 1fr; } }

.sc-request {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--sc-darkblue);
	color: #fff;
	/* same measures as the band cards: padding 13 and 12, 80 icon, 13 of gap,
	   text 22 with lines at 26, corner 17 */
	border-radius: 17px;
	padding: 13px 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.18;
}

.sc-request__icon { flex: 0 0 80px; width: 80px; height: 80px; }
.sc-request__icon svg { width: 100%; height: 100%; }

/*
 * The first cell is not a card: it is the introduction to the grid. In the
 * mockup it has an arrow in front and is centred in its cell, not laid on
 * the left, and the letters are not spaced out.
 */
.sc-request.is-label {
	background: none;
	color: var(--sc-darkblue);
	padding-left: 0;
	justify-content: center;
	gap: 21px;
	text-transform: uppercase;
}

/* --- the form ---------------------------------------------------------------- */

/*
 * In the mockup this title sits above the coloured band, in black, not
 * inside it: there are 88 px between the requests grid and the title, and
 * 86 between the title and the band edge.
 */
.entry-content .sc-form-title {
	/* in the mockup this line is 622 px wide against the site's 914: it is a
	   24 px title, not 35 like the others */
	font-size: calc( 24 * var(--sc-f) );
	margin-top: calc( 108 * var(--sc-u) );
	margin-bottom: 0;
}

.sc-form-title + .sc-band { margin-top: calc( 76 * var(--sc-u) ); }

/* in the mockup the form is 946 wide with 457 fields, not 736 with 355 */
.sc-form { max-width: calc( 946 * var(--sc-u) ); margin-inline: auto; }

.sc-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.6rem;
}

@media ( max-width: 600px ) { .sc-form__grid { grid-template-columns: 1fr; } }

.sc-form .sc-field { margin: 0 0 1rem; }

.sc-form label {
	display: block;
	color: #fff;
	font-size: .78rem;
	margin-bottom: .35rem;
}

/*
 * The contact form, the one inside the coloured band, is larger in the
 * mockup than the franchising one: labels at 18 px, choice boxes as 37
 * squares and an 86-tall button. The measures below are all taken from
 * mockup page 5, counting from the band edge.
 */
/* "form label" to beat the Contact Form 7 rule, which has the same
   strength and loads later */
.sc-band .sc-form form label { font-size: calc( 18 * var(--sc-f) ); font-weight: 300; line-height: 1.2; }

/* there are 11 px between the label and the field: the control wrapper
   must become a block, otherwise a margin on an inline element moves nothing */
.sc-band .sc-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: calc( 11 * var(--sc-u) );
}

.sc-band .sc-form__grid { gap: calc( 22 * var(--sc-u) ) calc( 34 * var(--sc-u) ); }
.sc-band .sc-form .sc-field { margin: 0; }

/* "Consulenza per": 35 px below the previous field, 22 between the label
   and the squares; then 37 before "Racconta la tua situazione" */
.sc-band .sc-form .sc-field--choice { margin-top: calc( 29 * var(--sc-u) ); }
/* wpautop breaks on the <br>: the choice group ends up in a paragraph of
   its own, right after the label's */
.sc-band .sc-form .sc-field--choice + p { margin: calc( 27 * var(--sc-u) ) 0 0; }
.sc-band .sc-form .sc-field--choice + p .wpcf7-form-control-wrap { margin-top: 0; }
.sc-band .sc-form .sc-field:has( textarea ) { margin-top: calc( 33 * var(--sc-u) ); }
.sc-band .sc-form .wpcf7-form-control-wrap:has( textarea ) { margin-top: calc( 22 * var(--sc-u) ); }

/* the three choices sit on three equal columns as wide as the form */
.sc-band .sc-form .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0;
}

.sc-band .sc-form input[type="checkbox"] {
	width: calc( 39 * var(--sc-u) );
	height: calc( 39 * var(--sc-u) );
}

/* the specificity has to go up: the general form rule has three classes */
.sc-band /* "form" in the selector: Blocksy loads after us a rule for Contact Form 7
   labels ("label:not(.wpcf7-form-control-wrap)") that has the same strength
   and would make them blocks again, gluing the text to the square */
.sc-form form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: calc( 21 * var(--sc-u) );
	font-size: calc( 18 * var(--sc-f) );
	font-weight: 600;
	line-height: 1.2;
}

.sc-band .sc-form .sc-consent {
	margin-top: calc( 31 * var(--sc-u) );
	margin-bottom: calc( 43 * var(--sc-u) );
}
.sc-band .sc-form .sc-consent label { align-items: center; gap: calc( 21 * var(--sc-u) ); }
.sc-band .sc-form .sc-consent .wpcf7-list-item-label { font-size: calc( 18 * var(--sc-f) ); }
.sc-band .sc-form .sc-consent .wpcf7-form-control-wrap { display: inline; margin-top: 0; }

/* the button: 446x88 with 31 px text */
.sc-band .sc-form__submit { margin-top: 0; }
.sc-band .sc-form input[type="submit"] {
	height: calc( 88 * var(--sc-u) );
	padding: 0 calc( 33 * var(--sc-u) );
	font-size: calc( 31 * var(--sc-f) );
	font-weight: 700;
}

/* until consent is given the button is disabled: Blocksy fades it, but in
   the mockup it is solid blue and stays so; only the cursor changes, and on
   click the form says what is missing */
.sc-band .sc-form input[type="submit"]:disabled {
	background: var(--sc-darkblue);
	color: #fff;
	opacity: 1;
	cursor: not-allowed;
}

@media ( max-width: 700px ) {
	.sc-band .sc-form .wpcf7-checkbox { grid-template-columns: 1fr; gap: 14px; }
	.sc-band .sc-form input[type="submit"] { height: auto; padding: 1rem 2rem; font-size: 1.2rem; }
}

.sc-form input[type="text"],
.sc-form input[type="email"],
.sc-form input[type="tel"],
.sc-form textarea {
	width: 100%;
	border: 0;
	border-radius: 999px;
	/* In the mockup the fields are 63 px tall. Padding is not enough: Blocksy
	   fixes the field height with --theme-form-field-height, which is 40 and
	   with box-sizing: border-box eats the padding. */
	height: calc( 63 * var(--sc-u) );
	padding: calc( 17 * var(--sc-u) ) calc( 20 * var(--sc-u) );
	font: inherit;
	font-size: calc( 20 * var(--sc-f) );
	background: #fff;
	color: var(--sc-text);
}

.sc-form textarea {
	border-radius: var(--sc-radius);
	/* and the text area is 220, not 170 */
	min-height: calc( 220 * var(--sc-u) );
	resize: vertical;
}

/* the three choices: square boxes as in the mockup, but single choice
   (Contact Form 7 "exclusive" option) */
.sc-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.sc-form .wpcf7-list-item { margin: 0; }

/* "form" in the selector: Blocksy loads after us a rule for Contact Form 7
   labels ("label:not(.wpcf7-form-control-wrap)") that has the same strength
   and would make them blocks again, gluing the text to the square */
.sc-form form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}

.sc-form input[type="checkbox"] {
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 4px;
	background: #fff;
	flex: 0 0 auto;
	cursor: pointer;
	position: relative;
}

.sc-form input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: .22rem;
	border-radius: 2px;
	background: var(--sc-green);
}

.sc-form form .sc-consent label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .72rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.4;
}

.sc-consent a { color: #fff; text-decoration: underline; }

.sc-form__submit { margin-top: 1.6rem; }

.sc-form input[type="submit"] {
	background: var(--sc-darkblue);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 1rem 2.4rem;
	font: inherit;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}

.sc-form input[type="submit"]:hover { background: #fff; color: var(--sc-darkblue); }

/* Contact Form 7 messages, readable on the coloured background */
.sc-form .wpcf7-response-output {
	border: 0;
	border-radius: var(--sc-radius);
	background: rgba( 255, 255, 255, .92 );
	color: var(--sc-text);
	padding: .9rem 1.2rem;
	margin: 1.2rem 0 0;
	font-size: .85rem;
}

.sc-form .wpcf7-not-valid-tip { color: #ffe0b8; font-size: .72rem; margin-top: .3rem; }

/* --- phone contacts ---------------------------------------------------------- */

/*
 * In the mockup this box is 812 px tall and the phone photograph is not a
 * block of its own below the text: it rests inside the box, on the right,
 * and overflows past the edge. The toll-free number is the centrepiece of
 * the section (72 px), the addresses come right after (55).
 */
.sc-contacts {
	position: relative;
	overflow: hidden;
	/* on mockup page 5 the box fades from white to aqua green (155,215,205):
	   obtained together with the image opacity by fitting 1666 background
	   pixels, mean error 0.3 on 255 */
	background: linear-gradient( 180deg, #fefefe 0%, #9bd7cd 100% );
	border-radius: var(--sc-radius-box-large);
	padding: calc( 85 * var(--sc-u) ) calc( 48 * var(--sc-u) ) calc( 106 * var(--sc-u) );
}

.sc-contacts > h2 { position: relative; z-index: 1; margin-bottom: calc( 102 * var(--sc-u) ); }

/*
 * The image (IMG/CONTATTI.png, 1916x821, with the handset on the left) in
 * the mockup is not a crop placed on the right: it is the background of the
 * whole box, MIRRORED (the handset ends up on the right) at 40% opacity over
 * the gradient. Placed as in the PDF: 1896 wide, starting 69 px left of the
 * box, as tall as the box.
 */
.sc-contacts > .wp-block-image {
	position: absolute;
	left: calc( -69 * var(--sc-u) );
	top: 0;
	width: calc( 1896 * var(--sc-u) );
	max-width: none;
	margin: 0;
	transform: scaleX( -1 );
	opacity: .4;
	pointer-events: none;
}

.sc-contacts > .wp-block-image img { display: block; width: 100%; height: auto; }

.sc-contacts__rows {
	position: relative;
	display: grid;
	/* in the mockup the label wraps after "puoi": its column is 443 wide, not
	   568, and the values start at 810 */
	grid-template-columns: calc( 415 * var(--sc-u) ) 1fr;
	column-gap: calc( 98 * var(--sc-u) );
	row-gap: calc( 74 * var(--sc-u) );
	align-items: center;
	max-width: none;
	width: calc( 1353 * var(--sc-u) );
	margin-inline: auto !important;
	margin-bottom: 0 !important;
	z-index: 1;
}

@media ( max-width: 960px ) {
	.sc-contacts__rows { width: auto; grid-template-columns: 1fr 1.4fr; }
	.sc-contacts > .wp-block-image { display: none; }
}
@media ( max-width: 700px ) {
	.sc-contacts__rows { grid-template-columns: 1fr; row-gap: 8px; }
}

.entry-content .sc-contacts__label { margin: 0; font-size: calc( 24 * var(--sc-f) ); }

.entry-content .sc-contacts__value {
	margin: 0;
	color: var(--sc-green);
	font-size: calc( 55 * var(--sc-f) );
	font-weight: 600;
	line-height: 1.2;
}

.entry-content .sc-contacts__value.is-number { font-size: calc( 72 * var(--sc-f) ); }
.entry-content .sc-contacts__value a { color: inherit; text-decoration: none; }

/* --- what you can prepare ---------------------------------------------------- */

/*
 * In the mockup the section has the drawing of a document on the left
 * (261x354, stroke fading from blue to green) and the text starts 486 px
 * into the column; the title and the closing are green, like the arrows.
 * The drawing is the agency's own file (FATTURE.svg) with the mockup
 * gradient, and is placed by the stylesheet: the content does not change.
 */
.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels ) {
	--sc-accent: var(--sc-green);
	position: relative;
	padding-left: calc( 486 * var(--sc-u) );
}

.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels )::before {
	content: "";
	position: absolute;
	left: calc( 85 * var(--sc-u) );
	top: calc( 21 * var(--sc-u) );
	width: calc( 411 * var(--sc-u) );
	height: calc( 411 * var(--sc-u) );
	background: url( "assets/document-icon.svg" ) center / contain no-repeat;
}

.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels ) > h2 { color: var(--sc-green); }
.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels ) > p:not( .sc-hero__kicker ) { max-width: calc( 660 * var(--sc-u) ); }

@media ( max-width: 960px ) {
	.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels ) { padding-left: 0; padding-top: calc( 300 * var(--sc-u) ); }
	.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels )::before { left: 0; top: 0; width: calc( 260 * var(--sc-u) ); height: calc( 260 * var(--sc-u) ); }
}

/* --- FAQ ------------------------------------------------------------------------ */

/* in the mockup the pills are 935 wide, 75 tall with 27 px between them,
   and the text inside is 26 px: on the site they were 736x48 with the text
   at 14.7 */
/* in the mockup there are 80 px between the title and the first pill */
/* in the mockup the pills run from 485 to 1420: centred on the page minus
   8 px. The block stays centred (the editor imposes it) and shifts by that much */
.sc-faq {
	max-width: calc( 935 * var(--sc-u) );
	margin: calc( 81 * var(--sc-u) ) auto 0;
	position: relative;
	left: calc( -8 * var(--sc-u) );
}

/* and the section title is not centred: it is flush with the pills */
.wp-block-group:has( > .sc-faq ) > h2 {
	max-width: calc( 935 * var(--sc-u) );
	margin-inline: auto;
	text-align: left;
	position: relative;
	left: calc( -8 * var(--sc-u) );
}
@media ( max-width: 960px ) {
	.sc-faq, .wp-block-group:has( > .sc-faq ) > h2 { left: 0; }
}

.sc-faq details {
	/* in the mockup the pill is white at the top and takes colour only in the
	   bottom third, down to (143,184,213) */
	background: linear-gradient( 180deg, #ffffff 0%, #f7fafc 50%, #dde9f4 75%, #8fb8d5 100% );
	border-radius: 999px;
	/* pills 75 tall with 26 px between them: in the mockup the pitch is 101 */
	margin-bottom: calc( 26 * var(--sc-u) );
	overflow: hidden;
}

.sc-faq details[open] { border-radius: var(--sc-radius); }

.sc-faq summary {
	list-style: none;
	cursor: pointer;
	min-height: calc( 75 * var(--sc-u) );
	/* in the mockup the "+" ends 28 px before the pill's right edge */
	padding: calc( 10 * var(--sc-u) ) calc( 28 * var(--sc-u) ) calc( 10 * var(--sc-u) ) calc( 62 * var(--sc-u) );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc( 6 * var(--sc-u) );
	font-size: calc( 26 * var(--sc-f) );
	/* in the mockup the question is Medium */
	font-weight: 500;
	line-height: 1.35;
}

.sc-faq summary::-webkit-details-marker { display: none; }

/* the "+" in the mockup is not a character: it is two square bars, 22.6 x
   23 in all, 5.5 thick (read from the path in the PDF). Drawn with two solid
   gradients; when open only the horizontal bar remains. */
.sc-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: calc( 22.6 * var(--sc-u) );
	height: calc( 23.1 * var(--sc-u) );
	background:
		linear-gradient( var(--sc-darkblue), var(--sc-darkblue) ) center / 100% calc( 5.3 * var(--sc-u) ) no-repeat,
		linear-gradient( var(--sc-darkblue), var(--sc-darkblue) ) center / calc( 5.7 * var(--sc-u) ) 100% no-repeat;
}

.sc-faq details[open] summary::after {
	background: linear-gradient( var(--sc-darkblue), var(--sc-darkblue) ) center / 100% calc( 5.3 * var(--sc-u) ) no-repeat;
}

.sc-faq__answer { padding: 0 calc( 62 * var(--sc-u) ) calc( 20 * var(--sc-u) ); font-size: calc( 22 * var(--sc-f) ); margin: 0; }

/*
 * The four steps of "Dopo la tua richiesta" sit on a single row. In the
 * mockup the columns are 227 wide with 98 px between them (not 279 with 48)
 * and the texts are smaller than in the home Method: the number 62, the
 * title 20 bold, the text 14.
 */
/* re-measured on mockup page 5: four 280 columns with 43 between them,
   starting at the left edge of the column (323), 223x3 lines, number 61,
   33 px between number and title, title 18 with lines at 21, 24 px before
   the text at 14 with lines at 21 */
.entry-content .sc-steps-grid.is-four {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	width: calc( 1249 * var(--sc-u) );
	column-gap: calc( 43 * var(--sc-u) );
}

.is-four .sc-step::before { width: calc( 223 * var(--sc-u) ); height: max( 2px, calc( 3 * var(--sc-u) ) ); }

.entry-content .is-four .sc-step p.sc-step__number { font-size: calc( 61 * var(--sc-f) ); margin-bottom: calc( 33 * var(--sc-u) ); }

.entry-content .is-four .sc-step h3 {
	font-size: calc( 18 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.17;
	margin-bottom: calc( 24 * var(--sc-u) );
}

.entry-content .is-four .sc-step p {
	font-size: max( 12px, calc( 14 * var(--sc-f) ) );
	line-height: 1.5;
}

/* the call-out below the steps: 35 px, tight lines */
.entry-content .sc-steps-grid.is-four + p {
	font-size: calc( 35 * var(--sc-f) );
	line-height: 1;
}

@media ( max-width: 960px ) {
	.entry-content .sc-steps-grid.is-four { width: var(--theme-container-width); grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 560px ) { .entry-content .sc-steps-grid.is-four { grid-template-columns: 1fr; } }

/* ==========================================================================
   FRANCHISING LANDING (mockup page 6)
   Orange palette, header reduced to the logo alone, orange footer with no
   navigation menu: a page that must not lead elsewhere but to the form.
   ========================================================================== */

/*
 * The typeface.
 *
 * Declaring Sora in theme.json is not enough: Blocksy imposes its own system
 * font stack through the --theme-font-stack-default variable, and that wins
 * over the theme.json value. The result was that Sora got downloaded but
 * used nowhere.
 *
 * Redefining the variable here makes Sora the default typeface throughout
 * the parent theme without listing the selectors one by one, and without
 * touching the cases where Blocksy deliberately sets a different typeface.
 */
/* html:root and not just :root: Blocksy redeclares the same variables
   later in the page, and at equal specificity it would win */
html:root {
	--theme-font-stack-default: var( --wp--preset--font-family--primary );

	/*
	 * The text colour. In the mockup PDF every piece of text declares its own
	 * colour, and for body and titles it is #000000: measured on the mockup
	 * pixels too, where the most frequent colour in the paragraphs is solid
	 * black. Blocksy instead brings a grey-blue (58,79,102) for the text and a
	 * dark blue for the titles, through these two variables.
	 */
	--theme-text-color: #000000;
	--theme-headings-color: #000000;
}

/* on the landing the header is just the logo pill on a peach background:
   the builder is one for the whole site, so menu, button, side panel and
   private-area icon are hidden here (class on the body) */
/*
 * On mockup page 6 there is no header row: the opening panel starts at the
 * top edge of the page and the logo pill sits INSIDE the panel, 324 from
 * the left edge and 42 from the top, 217 wide and 58 tall. The builder
 * header stays (so the logo is changed from the panel) but is laid over the
 * panel, with no background and taking no room.
 */
body.sc-landing #header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
body.sc-landing #header [data-row="middle"] { background-color: transparent; padding-block: calc( 42 * var(--sc-u) ) 0; }
body.sc-landing #header [data-row="middle"] > .ct-container {
	width: calc( 217 * var(--sc-u) );
	min-width: 0;
	min-height: calc( 58 * var(--sc-u) );
	grid-template-columns: auto;
	/* the brand image (159 wide) starts 19 px inside the pill */
	padding: 0 calc( 39 * var(--sc-u) ) 0 calc( 19 * var(--sc-u) );
	margin-left: calc( 50% - 636 * var(--sc-u) );
}
/* below 1200 the header brand image is fixed at 30 px tall (129 wide),
   while the pill still followed the mockup's 217 units: at 1100 it was 124
   wide and the brand image spilled out, and at 390 it was 30 tall. Here the
   pill fits the brand image, like the one of the other pages. */
@media ( max-width: 1200px ) {
	body.sc-landing #header [data-row="middle"] > .ct-container {
		width: max-content;
		min-height: 0;
		padding: 12px 22px 12px 16px;
	}
}
@media ( max-width: 960px ) {
	body.sc-landing #header [data-row="middle"] > .ct-container { margin-left: 1.5rem; }
}
/* the whole columns are hidden, not just their contents: otherwise the
   single-column grid stacks them as empty rows and the logo ends up at the top */
body.sc-landing #header [data-column="middle"],
body.sc-landing #header [data-column="end"],
body.sc-landing #header .menu-container,
body.sc-landing #header .ct-header-cta,
body.sc-landing #header .ct-header-trigger,
body.sc-landing #header .ct-header-text { display: none; }

/* the landing footer (mockup page 6): same structure as the normal footer,
   but light orange (237,136,67 sampled) with white text; in the third column
   the privacy/cookie menu replaces the site menu, with no rule; the fourth
   column is empty; the socials are there */
body.sc-landing #footer.ct-footer { background-color: #ed8843; color: #fff; --theme-text-color: #fff; --theme-link-initial-color: #fff; --theme-link-hover-color: #000; }
body.sc-landing #footer.ct-footer::before { background: #fff; }
body.sc-landing #footer [data-column="widget-area-3"] > .ct-widget:first-child,
body.sc-landing #footer [data-column="widget-area-4"] { display: none; }
body.sc-landing #footer [data-column="widget-area-3"] > .ct-widget:nth-child(2) { display: block; }
body.sc-landing #footer .widget_nav_menu { border-left: 0; padding-left: calc( 8 * var(--sc-u) ); }
body.sc-landing #footer .widget_nav_menu ul.widget-menu a,
body.sc-landing #footer p.sc-footer__contact a { color: #fff; }
body.sc-landing #footer .widget_nav_menu ul.widget-menu a:hover { color: #000; }
body.sc-landing #footer .ct-footer-socials .ct-social-box { --theme-icon-color: #fff; --theme-icon-hover-color: #000; }

/* --- hero and sections on a peach background ------------------------------ */

.sc-fr-hero {
	/* in the mockup the panel starts at the top edge of the page (the header
	   sits over it), it is 862 tall with 60 corners; the text starts 162 px
	   inside and the title sits 255 from the top */
	--sc-fr-hero-padding: calc( 162 * var(--sc-u) );
	background: linear-gradient( 180deg, #fdf1e8 0%, #fbe2d0 100% );
	border-radius: calc( 60 * var(--sc-u) );
	padding-top: calc( 257 * var(--sc-u) ) !important;
	/* 66 px remain below the button */
	padding-bottom: calc( 66 * var(--sc-u) ) !important;
	margin-top: 0 !important;
}

/* The higher specificity is needed to win over the global padding WordPress
   applies to .has-global-padding: so the panel padding is certain, and the
   negative offset of the background cancels it exactly. */
.sc-fr-hero.has-global-padding,
.sc-fr-hero { padding: var( --sc-fr-hero-padding ); }

.sc-fr-hero h1 { color: #000; font-size: calc( 45 * var(--sc-f) ); line-height: 1.02; margin-bottom: calc( 38 * var(--sc-u) ); }
/* 25 px with lines at 35, in orange and bold; the text that follows is
   Medium at the same size */
.sc-fr-hero .sc-hero__text p { font-size: calc( 25 * var(--sc-f) ); line-height: 1.4; }
/* the three orange lines: the PDF says "Sora" but the ink says SemiBold
   (mockup 3238 px on 356 of width; at 600 the site gives 2990/353, at 400
   2348/347). The black paragraph is Medium. */
.sc-fr-hero .sc-hero__text p.sc-fr-kicker { color: var(--sc-orange); font-weight: 600; }
.sc-fr-hero .sc-hero__text p:not( .sc-fr-kicker ) { font-weight: 500; }
/* in the mockup the button is 456 x 55 and starts 20 px left of the text column */
.sc-fr-hero .wp-block-button__link {
	background: var(--sc-orange);
	/* 456u is a minimum, not a fixed width: the font size stops at 14.9 px
	   below 1380 while 456u keeps shrinking, and between 1200 and 1330 the
	   label overflowed the button */
	width: auto;
	min-width: calc( 456 * var(--sc-u) );
	padding-inline: calc( 12 * var(--sc-u) );
	text-align: center;
	white-space: nowrap;
	margin-left: calc( -20 * var(--sc-u) );
}
/* below 1200 the fixed width is no longer enough for the label (at 1100
   the text overflowed the button): the button follows the text */
@media ( max-width: 1199.98px ) {
	.sc-fr-hero .wp-block-button__link { width: auto; white-space: normal; margin-left: 0; padding-inline: 1.5rem; }
}

.sc-fr-peach {
	background: linear-gradient( 180deg, #fdf3ea 0%, #fbe4d4 100% );
	border-radius: var(--sc-radius-large);
	padding: clamp( 2rem, 5vw, 3.5rem );
}

/*
 * "Lavori con strumenti pensati": in the mockup this section sits inside a
 * green box 1594 wide and 811 tall, with the gradient going down from light
 * green to aqua green. On the site the box was not there at all.
 */
.sc-fr-tools {
	background: linear-gradient( 180deg, #bae4dc 0%, #33afa0 100% );
	border-radius: calc( 40 * var(--sc-u) );
	/* re-measured (15/9): the title starts 152 px below the edge and the last
	   line ends 138 from the bottom */
	padding: calc( 150 * var(--sc-u) ) calc( 30 * var(--sc-u) ) calc( 133 * var(--sc-u) ) calc( 56 * var(--sc-u) );
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
	/* the laptop is 668 wide and sits 93 from the box edge (197 from the top);
	   the text starts at 970 */
	grid-template-columns: calc( 705 * var(--sc-u) ) 1fr;
	column-gap: calc( 47 * var(--sc-u) );
}
.sc-fr-tools > figure,
.sc-fr-tools > .wp-block-image {
	align-self: start;
	width: calc( 668 * var(--sc-u) );
	margin: calc( 47 * var(--sc-u) ) 0 0 calc( 37 * var(--sc-u) );
}
/* text pitch: title -> text 80, text -> list 64, list -> closing sentence
   96 (measured between lines, on the mockup) */
.entry-content .sc-fr-tools h2 { margin-bottom: calc( 39 * var(--sc-u) ); }
.entry-content .sc-fr-tools ul.sc-arrow-list { margin-top: calc( 31 * var(--sc-u) ); }
.entry-content .sc-fr-tools p.sc-fr-kicker { margin-top: calc( 65 * var(--sc-u) ); }
@media ( max-width: 960px ) {
	.sc-fr-tools { width: auto; margin-inline: 0 !important; padding: 3rem 2rem; grid-template-columns: 1fr; }
	.sc-fr-tools > figure,
	.sc-fr-tools > .wp-block-image { width: auto; max-width: calc( 668 * var(--sc-u) ); margin: 0 auto; }
}

/*
 * In the mockup the list inside the box is not stacked with arrows: the
 * items run on, separated by a small orange square, and the block takes
 * five lines instead of six.
 */
.sc-fr-tools .sc-arrow-list { padding: 0; }

.entry-content .sc-fr-tools .sc-arrow-list > li {
	display: inline;
	padding: 0;
	/* the space before the next square sits at the end of the item, so a
	   square at the start of a line stays against the margin */
	margin: 0 calc( 14 * var(--sc-u) ) 0 0;
	/* in the mockup the lines are every 30 px with the text at 20 */
	line-height: 1.5;
}

/*
 * The small square: measured on mockup page 6 it is 16 x 16 with barely
 * bevelled corners, resting on the baseline and as tall as the capitals
 * (15); the text starts 14 px after and the next square sits 19 px after
 * the end of the previous item (5 of which are the space). The arrow mask
 * of the labels must go too, otherwise the colour takes the arrow shape.
 */
.entry-content .sc-fr-tools .sc-arrow-list > li::before {
	content: "";
	position: static;
	/* not an inline block (which the browser could detach from the item when
	   wrapping) but an empty 8 px padding per side: it makes 16 x 16, raised
	   by 6.5 to sit between the baseline and the top of the capitals, without
	   touching the line height */
	display: inline;
	font-size: 0;
	line-height: 0;
	width: auto;
	height: auto;
	padding: calc( 8 * var(--sc-u) );
	margin: 0 calc( 14 * var(--sc-u) ) 0 0;
	vertical-align: calc( 6.5 * var(--sc-u) );
	background: var(--sc-orange);
	border: 0;
	border-radius: calc( 2 * var(--sc-u) );
	transform: none;
	-webkit-mask: none;
	mask: none;
}

/* --- orange box with the invitation ----------------------------------------- */

/* Re-measured on mockup page 6 (15/9): the box is 628 x 464 with a 60
   corner, runs from 986 to 1613 - i.e. overflows the text column by 17 px -
   and fades from light peach (251,214,186) to orange (243,153,81). The text
   column on the left is 622 wide ("Il mercato delle utenze non manca" sits
   on one line, 620) and is 40 from the box. Inside: drawing 141 tall at 31
   from the edge, text at 26 SemiBold with lines at 36 (4 lines, up to 558
   wide), green button 323 x 55 with 35 px below. */
.sc-side-by-side:has( .sc-fr-invite ) { grid-template-columns: calc( 622 * var(--sc-u) ) calc( 628 * var(--sc-u) ); column-gap: calc( 40 * var(--sc-u) ); }

.sc-fr-invite {
	background: linear-gradient( 180deg, #fbd6ba 0%, #f39951 100% );
	border-radius: calc( 60 * var(--sc-u) );
	min-height: calc( 464 * var(--sc-u) );
	box-sizing: border-box;
	padding: calc( 9 * var(--sc-u) ) calc( 34 * var(--sc-u) ) calc( 35 * var(--sc-u) );
	color: #fff;
	text-align: center;
}

/* the drawing is 141 tall in the mockup: in the icon box (which has empty
   margin around) 186 are needed */
.sc-fr-invite__icon { width: calc( 186 * var(--sc-u) ); height: calc( 186 * var(--sc-u) ); margin: 0 auto calc( 15 * var(--sc-u) ); }
.entry-content .sc-fr-invite p {
	margin: 0 0 calc( 22 * var(--sc-u) );
	font-weight: 600;
	font-size: calc( 26 * var(--sc-f) );
	line-height: 1.385;
}
/* the button is green with white text (323 x 55, text 21) */
.sc-fr-invite .wp-block-button__link,
.sc-fr-invite a.sc-button {
	background: var(--sc-green);
	color: #fff;
	font-size: calc( 21 * var(--sc-f) );
	line-height: 1.6;
	width: auto;
	min-width: calc( 323 * var(--sc-u) ); /* minimum, not fixed: see the banner button */
	padding: calc( 10.7 * var(--sc-u) ) calc( 12 * var(--sc-u) );
	text-align: center;
	white-space: nowrap;
}
@media ( max-width: 960px ) {
	.sc-fr-invite .wp-block-button__link { width: auto; white-space: normal; padding-inline: 1.5rem; }
}

/* --- the "non comparatore" rows, orange version ---------------------------- */

/* on mockup page 6 the pills are 580 wide, fade vertically from white to
   peach (249,204,169), and the one with the green check is peach too */
.sc-no-row.is-orange,
.sc-no-row.is-yes {
	background: linear-gradient( 180deg, #ffffff 0%, #fdf3ec 45%, #f9cca9 100% );
}
.sc-side-by-side:has( > *:first-child > .sc-no-row ) {
	grid-template-columns: calc( 580 * var(--sc-u) ) 1fr;
	column-gap: calc( 66 * var(--sc-u) );
}

.sc-no-row.is-orange .sc-no-row__mark { color: var(--sc-orange); }
.sc-no-row.is-yes .sc-no-row__mark { color: var(--sc-green); }

/* --- the four situations after signing --------------------------------------- */

/* in the mockup the text column is 636 wide and has, 48 px to its left, a
   302-tall vertical orange rule; the text is a single paragraph and the bold
   sentence is orange */
.sc-side-by-side:has( .sc-situations-grid ) { grid-template-columns: 1fr calc( 636 * var(--sc-u) ); column-gap: calc( 100 * var(--sc-u) ); align-items: start; }
.sc-side-by-side:has( .sc-situations-grid ) > .wp-block-group:last-child { position: relative; padding-top: calc( 123 * var(--sc-u) ); }
.sc-side-by-side:has( .sc-situations-grid ) > .wp-block-group:last-child::before {
	content: "";
	position: absolute;
	left: calc( -48 * var(--sc-u) );
	top: calc( 130 * var(--sc-u) );
	width: max( 2px, calc( 4 * var(--sc-u) ) );
	height: calc( 302 * var(--sc-u) );
	background: var(--sc-orange);
}
.entry-content .sc-side-by-side:has( .sc-situations-grid ) p { margin-bottom: 0; }
.entry-content .sc-side-by-side:has( .sc-situations-grid ) strong { color: var(--sc-orange); }
/* the title sits above the drawings, which start 63 px below */
.entry-content .sc-side-by-side:has( .sc-situations-grid ) h2 { margin-bottom: calc( 63 * var(--sc-u) ); }

.sc-situations-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	/* in the mockup the two rows of drawings are 176 apart: a 90 drawing and
	   a two-line caption */
	gap: calc( 45 * var(--sc-u) ) calc( 30 * var(--sc-u) );
	max-width: calc( 480 * var(--sc-u) );
}

.sc-situation { text-align: center; }
/* in the mockup these drawings measure about 105 px: the box goes to 135,
   not 54, and between rows there are 177 px instead of 111 */
/* in the mockup these drawings are 108 tall, not 126: the box is 116 */
/* 92u with a minimum of 88 px: below 960 the unit is 0.5 and the drawings
   came out 46 px (Alexander, 16/9: too small on the phone) */
.sc-situation__icon { width: max( calc( 92 * var(--sc-u) ), 88px ); height: max( calc( 92 * var(--sc-u) ), 88px ); margin: 0 auto max( calc( 8 * var(--sc-u) ), 8px ); color: var(--sc-orange); }
.entry-content .sc-situation p { margin: 0; font-size: max( 12px, calc( 17 * var(--sc-f) ) ); font-weight: 600; line-height: 1.15; }

/* --- the six model cards ------------------------------------------------------ */

/*
 * In the mockup these cards are 464 wide on a 1434 grid, with 21 px between
 * columns and 56 between rows: at 419 the text wrapped twice as much and
 * the cards came out taller.
 */
.sc-model-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: calc( 56 * var(--sc-u) ) calc( 21 * var(--sc-u) );
	/* 91 px below the rule and 71 above the closing sentence */
	margin-block: calc( 91 * var(--sc-u) ) calc( 71 * var(--sc-u) );
	max-width: none;
	width: calc( 1434 * var(--sc-u) );
	/* in the mockup the grid is not centred: it starts at the left edge of the
	   text column (324) and overflows to the right only, like the home band */
	margin-left: calc( ( 100% - var(--theme-normal-container-max-width) ) / 2 ) !important;
	margin-right: 0 !important;
}
@media ( max-width: 960px ) { .sc-model-grid { width: auto; margin-inline: 0 !important; grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 560px ) { .sc-model-grid { grid-template-columns: 1fr; } }

.sc-model {
	display: flex;
	align-items: center;
	gap: calc( 16 * var(--sc-u) );
	background: var(--sc-orange);
	color: #fff;
	border-radius: calc( 10 * var(--sc-u) );
	/* cards 105 tall with two lines: 26 above and below. The drawing is 72x71
	   at 19 from the edge, the text starts at 107 and reaches the right edge
	   ("Valuti le opportunita' realmente" is 360 wide on a 464 card) */
	padding: calc( 17 * var(--sc-u) ) 0 calc( 17 * var(--sc-u) ) calc( 19 * var(--sc-u) );
	/* in the mockup the text of these cards is at 22 px with lines at 26 */
	font-size: calc( 22 * var(--sc-f) );
	font-weight: 600;
	line-height: 1.2;
}
/* and the drawing is about 60 px, not 32 */
.sc-model__icon { flex: 0 0 calc( 72 * var(--sc-u) ); width: calc( 72 * var(--sc-u) ); height: calc( 72 * var(--sc-u) ); }
.sc-model__icon svg { width: 100%; height: 100%; }

/* --- orange notice with the exclamation mark ---------------------------------- */

.sc-notice.is-orange { background: #fbe0c9; }
.sc-notice.is-orange .sc-notice__mark { color: var(--sc-orange); }

/*
 * In the peach band of the franchising this note is not a pill: it is
 * centred 19 px text with the green exclamation mark in front.
 */
/* in the mockup the notice below the cards has no pill: 24 px black text
   centred on three lines (lines at 35), with the green exclamation mark at 72 */
/*
 * On mockup page 6 the sentence "Il risparmio puo' essere..." is NOT in a
 * pill: it is plain text on the section background, 24 px regular black,
 * centred on the page in a 1084 column with lines at 35, and the green
 * exclamation mark (51 tall) sits outside the column, 66 px to the left of
 * the first line. The rule names is-orange too, otherwise the rules of the
 * orange "Cosa serve" pill won.
 */
.sc-fr-peach .sc-notice,
.sc-fr-peach .sc-notice.is-orange {
	position: relative;
	/* mark and text are two cells of a grid: the first is zero wide and the
	   mark, aligned to its right edge, sticks out to the left of the text
	   column (in the mockup it sits 66 px outside). So the text stays exactly
	   where it is and the mark is always beside it, vertically centred, at
	   every width: before, on the phone it went onto a line of its own, above
	   the text. */
	display: grid;
	grid-template-columns: 0 minmax( 0, 1fr );
	align-items: center;
	background: none;
	width: auto;
	min-width: 0;
	max-width: calc( 1084 * var(--sc-u) );
	min-height: 0;
	padding: 0;
	margin-inline: auto;
	text-align: center;
}

.sc-fr-peach .sc-notice .sc-notice__mark,
.sc-fr-peach .sc-notice.is-orange .sc-notice__mark {
	position: static;
	justify-self: end;
	/* the mark is 23 px wide at 1920: with 20 units of margin it starts 66 from
	   the column, as in the mockup (measured: 375 against 441) */
	margin: 0 calc( 20 * var(--sc-u) ) 0 0;
	color: var(--sc-green);
	/* the mark in the mockup is 52 px tall: size 72 */
	font-size: calc( 72 * var(--sc-f) );
	line-height: 1;
}

.entry-content .sc-fr-peach .sc-notice p:not( .sc-notice__mark ),
.entry-content .sc-fr-peach .sc-notice.is-orange p:not( .sc-notice__mark ) {
	font-size: calc( 24 * var(--sc-f) );
	/* regular, not Light: counting the black pixels of the first line the
	   mockup has 15.2%, regular 16.1, Light 11.8 */
	font-weight: 400;
	line-height: 1.46;
	color: #000;
	white-space: normal;
}

@media ( max-width: 960px ) {
	/* on the phone the text column is the full width: the mark goes back into
	   the flow, in a column of its own, always beside the text and centred */
	.sc-fr-peach .sc-notice,
	.sc-fr-peach .sc-notice.is-orange { grid-template-columns: auto minmax( 0, 1fr ); column-gap: 14px; text-align: left; }
	.sc-fr-peach .sc-notice .sc-notice__mark,
	.sc-fr-peach .sc-notice.is-orange .sc-notice__mark { margin: 0; }
}

/* the green rule under the opening line: 324x4 */
.sc-fr-peach > .sc-rule {
	--sc-rule-width: calc( 324 * var(--sc-u) );
	--sc-rule-color: var(--sc-green);
	width: var(--sc-rule-width);
	height: max( 2px, calc( 4 * var(--sc-u) ) );
	background: var(--sc-rule-color);
	margin: calc( 38 * var(--sc-u) ) auto 0;
}

.entry-content .sc-fr-peach > h2 { margin-bottom: calc( 41 * var(--sc-u) ); }

/*
 * "Il modello" in the mockup has no plain background: behind it there is the
 * desk drawing (materiale/FRANCHISING/1.png), which fills the whole band.
 * It is because of it that 245 px of air remain above the title instead of 56.
 */
.sc-fr-peach:not( .sc-side-by-side ) {
	/*
	 * Re-measured on the mockup (12/9): the band runs from 2853 to 3949 (1097
	 * tall, bottom corners at 64, top ones square); the drawing is the image
	 * fitted to the width (1940x1455) with its top edge 156 px above the band,
	 * and over it there is a 57% veil fading from a warm white at the top to a
	 * light peach at the bottom: that is what makes it so light even on the
	 * orange platform below the cards (with the earlier orange veil the lower
	 * part stayed too saturated). Found by pixel-to-pixel comparison with the
	 * file, row by row (median error 2-3 on 255).
	 */
	background:
		linear-gradient( 180deg, rgba( 252, 250, 248, .57 ) 0%, rgba( 245, 176, 120, .57 ) 100% ),
		url( "assets/fr-model-background.webp" ) center 43% / cover no-repeat;
	border-radius: 0 0 calc( 64 * var(--sc-u) ) calc( 64 * var(--sc-u) );
	/* the title starts 246 px below the edge, the closing text 112 from the bottom */
	padding-top: calc( 246 * var(--sc-u) );
	padding-bottom: calc( 112 * var(--sc-u) );
}

/* inner rhythm measured on the mockup: title 3099, subtitle 3180, rule
   3248, cards 3343..3661, sentence 3750 */
.entry-content .sc-fr-peach:not( .sc-side-by-side ) > h2 { margin-bottom: calc( 46 * var(--sc-u) ); }
.entry-content .sc-fr-peach:not( .sc-side-by-side ) > p { margin-bottom: calc( 33 * var(--sc-u) ); }
.sc-fr-peach:not( .sc-side-by-side ) > .sc-rule { margin-top: calc( 33 * var(--sc-u) ); }

/*
 * "Un modello con obiettivi": in the mockup the band is 830 px tall and the
 * map drawing is two and a fifth times the one we had, laid against the
 * left edge and cropped above and below by the band.
 */
.sc-fr-peach.sc-side-by-side {
	position: relative;
	overflow: hidden;
	/* re-measured at the edge (15/9): 842 tall, with the title starting 188
	   px below the edge and the text ending 131 from the bottom */
	min-height: calc( 842 * var(--sc-u) );
	align-content: start;
	padding-top: calc( 188 * var(--sc-u) );
}

/*
 * The text of this section, re-measured on mockup page 6 (15/9): the column
 * is 645 wide (the lines reach 638 at most), the title has a 79 px pitch to
 * the first text line, the first paragraph and the revenue sentence are in
 * Sora normal (400) with no gap between them, "fino a 150.000 € nel primo
 * anno." is orange and bold, and the last paragraph ("Non e' una garanzia")
 * is in Sora Light (300) after a blank line.
 */
.sc-fr-peach.sc-side-by-side > .wp-block-group > p { max-width: calc( 645 * var(--sc-u) ); }
.entry-content .sc-fr-peach.sc-side-by-side > .wp-block-group > h2 { margin-bottom: calc( 38 * var(--sc-u) ); }
.entry-content .sc-fr-peach.sc-side-by-side > .wp-block-group > p { font-weight: 400; }
.entry-content .sc-fr-peach.sc-side-by-side > .wp-block-group > p:has( + p.sc-fr-kicker ) { margin-bottom: 0; }
.entry-content .sc-fr-peach.sc-side-by-side > .wp-block-group > p:last-of-type { font-weight: 300; }
.entry-content .sc-fr-peach.sc-side-by-side > .wp-block-group > p strong { color: var(--sc-orange); font-weight: 600; }
/* the drawing leaves the flow, so the text must be kept in its column and
   above the drawing, which would otherwise cover it */
.sc-fr-peach.sc-side-by-side > .wp-block-group { grid-column: 2; position: relative; z-index: 1; }
.sc-fr-peach.sc-side-by-side > .wp-block-image,
.sc-fr-peach.sc-side-by-side > figure {
	position: absolute;
	left: calc( -10 * var(--sc-u) );
	top: calc( -131 * var(--sc-u) );
	width: calc( 1886 * var(--sc-u) );
	max-width: none;
	margin: 0;
}

.sc-fr-peach.sc-side-by-side > .wp-block-image img,
.sc-fr-peach.sc-side-by-side > figure img { width: 100%; height: auto; }

@media ( max-width: 960px ) {
	.sc-fr-peach.sc-side-by-side { min-height: 0; padding-top: clamp( 2rem, 5vw, 3.5rem ); }
	.sc-fr-peach.sc-side-by-side > .wp-block-group > p { max-width: none; }
	.sc-fr-peach.sc-side-by-side > .wp-block-group { grid-column: auto; }
	.sc-fr-peach.sc-side-by-side > .wp-block-image,
	.sc-fr-peach.sc-side-by-side > figure { position: static; width: 100%; }
}

/* --- the three reasons to join ------------------------------------------------ */

/*
 * In the mockup the three cards run from 162 to 1758, i.e. 1597 like the
 * other boxes, and are 464 wide; the icon sits above the card and sticks out.
 */
.sc-reasons-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	/* in the mockup the cards are 464 with 102 px between them, and between
	   the title and the card's top edge there are 381 px: it is the room the
	   icon takes, sitting above the card and not inside */
	gap: calc( 24 * var(--sc-u) ) calc( 102 * var(--sc-u) );
	margin-top: calc( 336 * var(--sc-u) );
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
}
@media ( max-width: 960px ) {
	.sc-reasons-grid { width: auto; margin-inline: 0 !important; grid-template-columns: 1fr; row-gap: calc( 300 * var(--sc-u) ); }
}

.sc-reason {
	position: relative;
	/* sampled at the bottom of the card: (119,202,188) */
	background: linear-gradient( 180deg, #ffffff 0%, #77cabc 100% );
	/* 59 in the mockup, not 18 */
	border-radius: calc( 59 * var(--sc-u) );
	/* card 328 tall: 54 px above the text, 41 below; the text sits in a 351
	   column */
	min-height: calc( 328 * var(--sc-u) );
	padding: calc( 54 * var(--sc-u) ) calc( 56 * var(--sc-u) ) calc( 41 * var(--sc-u) );
	text-align: center;
}

/* in the mockup the icon does not sit inside the card: it floats above,
   out of the flow, so it does not move the text inside the card */
.sc-reason__icon {
	position: absolute;
	/* in the mockup the drawing is 226 px tall and its bottom edge rests on
	   the card's top edge */
	/* the drawing takes about three quarters of the icon box */
	top: calc( -300 * var(--sc-u) );
	left: 50%;
	transform: translateX( -50% );
	width: calc( 300 * var(--sc-u) );
	height: calc( 300 * var(--sc-u) );
	margin: 0;
}
/* in the mockup the text is at 18 px with lines at 29 */
.entry-content .sc-reason p { margin: 0; font-size: max( 12px, calc( 18 * var(--sc-f) ) ); font-weight: 300; line-height: 1.6; }

/* --- what it takes to start ---------------------------------------------------- */

/*
 * In the mockup the three images are 322 wide with a 482 pitch, i.e. 160 px
 * of space: on the site they were 398 with 32 of space.
 */
/* same grid as the steps: 400 columns with 83 between them starting at the
   left edge of the column (323, 806, 1289), 324x4 lines */
.entry-content .sc-requirements-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: calc( 83 * var(--sc-u) );
	max-width: none;
	width: calc( 1366 * var(--sc-u) );
	margin-left: calc( ( 100% - var(--theme-normal-container-max-width) ) / 2 ) !important;
	margin-right: 0 !important;
	/* there are 118 px between the section title and the top of the images */
	margin-top: calc( 83 * var(--sc-u) );
}
@media ( max-width: 960px ) {
	.entry-content .sc-requirements-grid { width: var(--theme-container-width); margin-inline: auto !important; grid-template-columns: 1fr; row-gap: calc( 80 * var(--sc-u) ); }
}
/* in the mockup these images are 322x208 */
.sc-requirement img {
	width: calc( 322 * var(--sc-u) );
	height: calc( 208 * var(--sc-u) );
	object-fit: cover;
	border-radius: calc( 14 * var(--sc-u) );
	margin-bottom: 0;
}
/* in the mockup the title of these cards is 27 with lines at 29 and the
   text 21 Light with lines at 30; 39 px between title and text */
.entry-content .sc-requirement h3 {
	margin: 0 0 calc( 30 * var(--sc-u) );
	font-size: calc( 27 * var(--sc-f) );
	line-height: 1.08;
}
.sc-requirement.is-first h3 { color: var(--sc-orange); }
.entry-content .sc-requirement p { margin: 0; font-size: calc( 21 * var(--sc-f) ); font-weight: 300; line-height: 1.43; }
/* 54 px below the image, 35 before the title */
.sc-requirement__rule {
	width: calc( 324 * var(--sc-u) );
	height: max( 2px, calc( 4 * var(--sc-u) ) );
	border: 0;
	background: var(--sc-green);
	margin: calc( 54 * var(--sc-u) ) 0 calc( 35 * var(--sc-u) );
}
.sc-requirement.is-first .sc-requirement__rule { background: var(--sc-orange); }

/* in the mockup there are 107 px between the bottom of the three columns
   and the closing paragraph, and 94 between the paragraph and the orange notice */
.entry-content .sc-requirements-grid + p { margin-top: calc( 64 * var(--sc-u) ); }
.sc-requirements-grid ~ .sc-notice { margin-top: calc( 85 * var(--sc-u) ); }

/* the orange notice: 882x87 pill fading from white to peach (248,192,147),
   17 px black text on two lines, mark at 50, 20 from the edge */
.sc-notice.is-orange {
	background: linear-gradient( 180deg, #ffffff 0%, #fdf1e8 40%, #f8c093 100% );
	width: calc( 882 * var(--sc-u) );
	min-width: 0;
	max-width: 100%;
	min-height: calc( 87 * var(--sc-u) );
	padding: calc( 8 * var(--sc-u) ) calc( 30 * var(--sc-u) ) calc( 8 * var(--sc-u) ) calc( 20 * var(--sc-u) );
	gap: calc( 23 * var(--sc-u) );
}
.sc-notice.is-orange .sc-notice__mark { color: var(--sc-orange); font-size: calc( 50 * var(--sc-f) ); }
.entry-content .sc-notice.is-orange p:not( .sc-notice__mark ) { font-size: max( 12px, calc( 17 * var(--sc-f) ) ); font-weight: 600; line-height: 1.4; white-space: normal; }

/* --- the franchising form, on a green->orange gradient ------------------------ */

/* measured on mockup page 6: 1597x838 box, text at 161 from the edge and
   85 from the top, 600 text column and 626 form with 70 between them;
   302x42 fields with 23 between them, labels at 12, 145 text area, consent
   with a 25 square, orange 249x56 button with 21 text */
.sc-fr-form {
	background: linear-gradient( 100deg, #0f9e83 0%, #4a9d6f 45%, #ef8028 100% );
	border-radius: var(--sc-radius-box-large);
	padding: calc( 85 * var(--sc-u) ) calc( 160 * var(--sc-u) ) calc( 55 * var(--sc-u) ) calc( 161 * var(--sc-u) );
	color: #fff;
}
.sc-fr-form h2 { color: #fff; }
/* "Richiedi informazioni" is a white 35 title like the first one, with
   lines at 35; the two opening paragraphs are a single block */
.entry-content .sc-fr-form h3 { color: #fff; font-size: calc( 35 * var(--sc-f) ); line-height: 1; margin: 0 0 calc( 46 * var(--sc-u) ); }
.entry-content .sc-fr-form .sc-side-by-side > .wp-block-group > p { margin-bottom: 0; }
/*
 * Re-measured on mockup page 6 (15/9). The box is 838 tall: the title
 * starts 87 from the edge and the text ends 113 from the bottom; the form
 * is not laid at the top but at the bottom, with the button ending 59 from
 * the bottom of the box, i.e. 54 px below the last line of text. The text
 * column is 612 wide ("relazioni, dentro un mercato che non si ferma mai,"
 * sits on one line, 603) and is 34 from the form, which is 626.
 */
.sc-fr-form > .sc-side-by-side { grid-template-columns: 1fr calc( 626 * var(--sc-u) ); column-gap: calc( 34 * var(--sc-u) ); align-items: end; }
.sc-fr-form > .sc-side-by-side > .wp-block-group:first-child { margin-bottom: calc( 48 * var(--sc-u) ); }
.sc-fr-form { padding-bottom: calc( 59 * var(--sc-u) ); }
/* pitch of the text on the left: title -> text 79, text -> rule 63, rule
   -> "Richiedi informazioni" 45, then 79 again down to the text */
.entry-content .sc-fr-form .sc-side-by-side > .wp-block-group > h2 { margin-bottom: calc( 37 * var(--sc-u) ); }
.entry-content .sc-fr-form h3 { margin-bottom: calc( 38 * var(--sc-u) ); }
.sc-fr-form .sc-form { max-width: none; }
/*
 * Inside the form: the labels (12 Light) are inset 14 from the fields and
 * their capital sits 21 px above the field; the fields are 302x42 with 22
 * between them and the rows repeat every 82; the text area (145) has its
 * label 14 px below the previous row; the consent (25 square, inset 8, 12
 * SemiBold text 18 from the square) sits 21 px below the text area and the
 * button (238x55, inset 10) 31 px below.
 */
.sc-fr-form .sc-form__grid { gap: calc( 15 * var(--sc-u) ) calc( 22 * var(--sc-u) ); }
.sc-fr-form .sc-form .sc-field { margin: 0; }
.sc-fr-form .sc-form form label { font-size: max( 10px, calc( 12 * var(--sc-f) ) ); font-weight: 300; line-height: 1.45; margin-bottom: 0; padding-left: calc( 14 * var(--sc-u) ); }
.sc-fr-form .sc-form form label .wpcf7-form-control-wrap { display: block; margin: calc( 8 * var(--sc-u) ) 0 0 calc( -14 * var(--sc-u) ); }
.sc-fr-form .sc-form input[type="text"],
.sc-fr-form .sc-form input[type="email"],
.sc-fr-form .sc-form input[type="tel"] { height: calc( 42 * var(--sc-u) ); padding: 0 calc( 16 * var(--sc-u) ); font-size: calc( 16 * var(--sc-f) ); }
.sc-fr-form .sc-form .sc-field:has( textarea ) { margin-top: calc( 18 * var(--sc-u) ); }
.sc-fr-form .sc-form textarea { min-height: calc( 145 * var(--sc-u) ); font-size: calc( 16 * var(--sc-f) ); display: block; }
.sc-fr-form .sc-form input[type="checkbox"] { width: calc( 25 * var(--sc-u) ); height: calc( 25 * var(--sc-u) ); }
.sc-fr-form .sc-form .sc-consent label { font-size: max( 10px, calc( 12 * var(--sc-f) ) ); font-weight: 600; letter-spacing: 0; gap: calc( 18 * var(--sc-u) ); padding-left: 0; align-items: center; }
/* the consent paragraph takes the body size (24/34.8) and would be taller
   than the square: it is brought back to the label size */
.sc-fr-form .sc-consent { margin: calc( 21 * var(--sc-u) ) 0 0 calc( 8 * var(--sc-u) ); font-size: max( 10px, calc( 12 * var(--sc-f) ) ); line-height: 1; }
.sc-fr-form .sc-form__submit { margin: calc( 31 * var(--sc-u) ) 0 0 calc( 10 * var(--sc-u) ); }
.sc-fr-form input[type="submit"] { background: var(--sc-orange); width: auto; min-width: calc( 238 * var(--sc-u) ); height: calc( 55 * var(--sc-u) ); padding: 0 calc( 12 * var(--sc-u) ); font-size: calc( 20.7 * var(--sc-f) ); font-weight: 700; }
.sc-fr-form input[type="submit"]:disabled { background: var(--sc-orange); color: #fff; opacity: 1; cursor: not-allowed; }
.sc-fr-form input[type="submit"]:hover { background: #fff; color: var(--sc-orange); }
/* between the text and "Richiedi informazioni" there is an orange 162x3
   rule on the left, 40 px above the title */
.sc-fr-form hr { border: 0; width: calc( 162 * var(--sc-u) ); height: max( 2px, calc( 3 * var(--sc-u) ) ); background: var(--sc-orange); margin: calc( 40 * var(--sc-u) ) 0 calc( 40 * var(--sc-u) ); }

@media ( max-width: 960px ) {
	.sc-fr-form { padding: calc( 56 * var(--sc-u) ) calc( 40 * var(--sc-u) ); }
	.sc-fr-form > .sc-side-by-side { grid-template-columns: 1fr; }
	.sc-fr-form > .sc-side-by-side > .wp-block-group:first-child { margin-bottom: 0; }
	.sc-fr-form input[type="submit"] { width: auto; padding: 0 1.5rem; }
	/* the shapes of this page that have their own columns go back in a row */
	.sc-side-by-side:has( .sc-fr-invite ),
	.sc-side-by-side:has( > *:first-child > .sc-no-row ),
	.sc-side-by-side:has( .sc-situations-grid ) { grid-template-columns: 1fr; }
	.sc-side-by-side:has( .sc-situations-grid ) > .wp-block-group:last-child { padding-top: 0; }
	.sc-side-by-side:has( .sc-situations-grid ) > .wp-block-group:last-child::before { display: none; }
	.sc-situations-grid { max-width: none; }
}

/* the franchising steps alternate orange and green, as in the mockup */
.sc-step.is-orange { --sc-step-color: var(--sc-orange); }

/* ==========================================================================
   SINGLE COLUMN (below 960): text blocks take the full width
   Many measures taken from the mockup limit the width of a text in scale
   units (760u beside the video, 700u in the Method, 770u in the invitation
   box, ...). Below 960 the unit is 0.5 px and those measures become 350-380
   px in a 600-700 column: the text stayed narrow and shifted, with the
   image now below and no longer beside it. Here, at the end of the sheet so
   it wins over every rule above, those limits drop below 960.
   The side note of the steps takes the whole column too.
   ========================================================================== */
@media ( max-width: 960px ) {
	.sc-side-by-side.sc-with-rule.is-double-title > :last-child,
	.sc-side-by-side:has( > :last-child :is( .sc-placeholder-tall, .sc-video, .sc-phone ) ) > :first-child,
	.sc-lightblue-section .sc-side-by-side > :last-child,
	.sc-banner > .sc-side-by-side > .wp-block-group > *,
	.sc-support-band > p:not( .sc-claim ),
	.sc-band .sc-claim,
	.entry-content .sc-comparison__body > p,
	.entry-content .sc-green-block > p,
	.entry-content > .wp-block-group:has( > .sc-arrow-list.is-labels ) > p:not( .sc-hero__kicker ),
	.wp-block-group:has( > .sc-faq ) > h2,
	.sc-faq,
	.sc-fr-peach .sc-notice,
	.sc-form { max-width: none; }
	.sc-side-note { width: auto; }
}
/* on the phone the 162u padding of the franchising panel is 81 px per
   side: the text was left with 228 px on 390 */
@media ( max-width: 599.98px ) {
	.sc-fr-hero { --sc-fr-hero-padding: 28px; }
}
/* "Cosa serve per iniziare" in a single column: photo, rule and text
   centred (they were laid on the left), and the photo does not go below 300 px */
@media ( max-width: 960px ) {
	.sc-requirement { text-align: center; }
	.sc-requirement > .wp-block-image { margin-inline: auto; }
	.sc-requirement img {
		width: min( 100%, max( calc( 322 * var(--sc-u) ), 300px ) );
		height: auto;
		aspect-ratio: 322 / 208;
		margin-inline: auto;
	}
	.entry-content hr.wp-block-separator.sc-requirement__rule { margin-inline: auto !important; }
}
/* Vertical distances in a single column: below 960 the unit is 0.5 and
   several spaces between cards or fields dropped to 8-16 px, with the
   elements almost touching (Alexander, 16/9). Here the minimums, measured
   at 390: reviews 10 -> 20, "Presenta un amico" cards 14 -> 24, logos
   16 -> 20, form fields 8-11 -> 18, contact rows 8 -> 14. */
@media ( max-width: 960px ) {
	.sc-reviews-grid { gap: max( calc( 19 * var(--sc-u) ), 20px ); }
	.sc-friend-grid { gap: max( calc( 28 * var(--sc-u) ), 24px ); }
	.sc-logos-grid { row-gap: max( calc( 32 * var(--sc-u) ), 20px ); }
	.sc-band .sc-form__grid,
	.sc-fr-form .sc-form__grid { row-gap: max( calc( 22 * var(--sc-u) ), 18px ); }
	.sc-contacts__rows { row-gap: 14px; }
}
/* "Dal primo contatto all'avvio della tua attivita'" (landing): the five
   steps go to a single column already below 800 px, not below 560
   (Alexander, 16/9): on two columns, with five items and long texts, the
   grid was unbalanced. */
@media ( max-width: 799.98px ) {
	body.sc-landing .entry-content .sc-steps-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   "DICONO DI NOI": THE GOOGLE REVIEWS WIDGET
   The reviews come from Google through the "Widgets for Google Reviews"
   plugin (Trustindex), shortcode [trustindex no-registration=google]:
   latest reviews, five stars only, slider with four per view. The plugin
   prints its own stylesheet inline, with many !important: these rules win
   on specificity (.sc-reviews in front) and repeat the !important where
   the plugin uses it. The card is the mockup one: white to mint, corner 18.
   ========================================================================== */
.sc-reviews { margin-top: calc( 141 * var(--sc-u) ); }

/* the plugin's font (Poppins) gives way to the site's */
.sc-reviews .ti-widget.ti-goog .ti-widget-container,
.sc-reviews .ti-widget.ti-goog .ti-widget-container * { font-family: inherit !important; }

/* 19 between the cards: the plugin gives 8 on each side of the item */
.sc-reviews .ti-widget.ti-goog .ti-reviews-container-wrapper { margin: 0 calc( -9.5 * var(--sc-u) ) !important; padding-top: 0; }
.sc-reviews .ti-widget.ti-goog .ti-review-item { padding: 0 calc( 9.5 * var(--sc-u) ); }

.sc-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
	background: linear-gradient( 180deg, #ffffff 0%, #d8efe8 100% ) !important;
	border-radius: var(--sc-radius) !important;
	padding: calc( 26 * var(--sc-u) ) calc( 24 * var(--sc-u) ) !important;
	min-height: calc( 229 * var(--sc-u) );
}

.sc-reviews .ti-widget.ti-goog .ti-widget-container .ti-name {
	font-size: max( 12px, calc( 16 * var(--sc-f) ) );
	font-weight: 600;
	color: #000;
}
.sc-reviews .ti-widget.ti-goog .ti-widget-container .ti-date {
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 300;
	color: var(--sc-text);
}
.sc-reviews .ti-widget.ti-goog .ti-profile-img img { width: calc( 40 * var(--sc-u) ) !important; height: calc( 40 * var(--sc-u) ) !important; }

/* the text: 16 Light with lines at 24, four lines then "Leggi di piu'" */
.sc-reviews .ti-widget.ti-goog .ti-review-content {
	font-size: max( 12px, calc( 16 * var(--sc-f) ) );
	font-weight: 300;
	line-height: 1.5;
	height: calc( 4 * 1.5 * max( 12px, calc( 16 * var(--sc-f) ) ) ) !important;
	color: #000;
}
.sc-reviews .ti-widget.ti-goog .ti-read-more span {
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 600;
	text-transform: uppercase;
	color: var(--sc-darkblue);
	opacity: 1;
}
.sc-reviews .ti-widget.ti-goog .ti-read-more span:hover { color: var(--sc-blue); text-decoration: none !important; }

/* the arrows: outside the cards, in the brand blue, no white disc */
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-prev,
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-next { background-color: transparent; width: 30px; height: 30px; }
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-prev { left: calc( -44 * var(--sc-u) ); }
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-next { right: calc( -44 * var(--sc-u) ); }
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-prev:before,
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-next:before { border-color: var(--sc-darkblue); border-width: 0 0 3px 3px; width: 12px; height: 12px; }
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-prev:hover:before,
.sc-reviews .ti-widget.ti-goog .ti-controls .ti-next:hover:before { border-color: var(--sc-blue); }

/* the dots under the slider */
.sc-reviews .ti-widget.ti-goog .ti-controls-line .dot { background-color: #c9d6e2 !important; }
.sc-reviews .ti-widget.ti-goog .ti-controls-line .dot.active { background-color: var(--sc-darkblue) !important; }

/* under the slider: average, count and the link to the full list on Google,
   because the slider shows a selection (five stars only) */
.entry-content .sc-reviews p.sc-reviews__summary {
	margin: calc( 36 * var(--sc-u) ) 0 0;
	text-align: center;
	font-size: max( 12px, calc( 16 * var(--sc-f) ) );
	font-weight: 300;
}
.sc-reviews .sc-reviews__summary strong { font-weight: 600; }
.sc-reviews .sc-reviews__summary a { color: var(--sc-darkblue); font-weight: 600; text-decoration: none; }
.sc-reviews .sc-reviews__summary a:hover,
.sc-reviews .sc-reviews__summary a:focus-visible { color: var(--sc-blue); text-decoration: underline; }

@media ( max-width: 960px ) {
	.sc-reviews .ti-widget.ti-goog .ti-controls .ti-prev { left: -4px; }
	.sc-reviews .ti-widget.ti-goog .ti-controls .ti-next { right: -4px; }
}

/* ==========================================================================
   BLOG: "GUIDA SULLE UTENZE" AND THE SINGLE ARTICLES
   There is no mockup page for the blog. The agency sent the hero image and
   the introduction (16/9/2026); the list of articles and the single article
   reuse the measures of the other pages: cards 464 wide on a 1597 grid with
   103 between them (the "needs" cards of the home), corners 46 like the wide
   boxes, labels 13.3 SemiBold in capitals, body text 24 Light. With no
   articles the page shows only the hero and the "Blog" title (Alexander, 18/9).
   ========================================================================== */

/* --- the list of articles (Query Loop) ---------------------------------- */
.sc-guide .wp-block-query { max-width: none; }

.sc-guide ul.sc-guide__grid {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: calc( 90 * var(--sc-u) ) calc( 103 * var(--sc-u) );
	/* 1597 wide and centred, like the needs grid: the container is the text
	   column, so the margin comes out negative and widens it */
	max-width: none;
	width: calc( 1597 * var(--sc-u) );
	margin-block: calc( 90 * var(--sc-u) ) 0;
	margin-inline: calc( ( 100% - 1597 * var(--sc-u) ) / 2 ) !important;
}
.sc-guide ul.sc-guide__grid > li { margin: 0; }
.sc-guide .sc-guide__card > * { margin-block: 0; }

.sc-guide .sc-guide__image { margin-bottom: calc( 28 * var(--sc-u) ); }
.sc-guide .sc-guide__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sc-radius-box-large);
}

.sc-guide .sc-guide__date {
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sc-blue);
	margin-bottom: calc( 14 * var(--sc-u) );
}

.entry-content .sc-guide h3.sc-guide__title {
	font-size: calc( 26 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: calc( 16 * var(--sc-u) );
}
.sc-guide .sc-guide__title a { color: inherit; text-decoration: none; }
.sc-guide .sc-guide__title a:hover,
.sc-guide .sc-guide__title a:focus-visible { color: var(--sc-blue); }

.entry-content .sc-guide .sc-guide__excerpt p {
	font-size: calc( 20 * var(--sc-f) );
	font-weight: 300;
	line-height: 1.45;
	margin: 0;
}
.sc-guide .sc-guide__excerpt .wp-block-post-excerpt__more-text {
	margin-top: calc( 18 * var(--sc-u) );
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 600;
	text-transform: uppercase;
}
.sc-guide .wp-block-post-excerpt__more-link {
	color: var(--sc-darkblue);
	text-decoration: none;
}
.sc-guide .wp-block-post-excerpt__more-link:hover,
.sc-guide .wp-block-post-excerpt__more-link:focus-visible { color: var(--sc-blue); }

/* the pagination, only when there are more than nine articles */
.sc-guide .sc-guide__pagination {
	margin-top: calc( 90 * var(--sc-u) );
	gap: calc( 24 * var(--sc-u) );
	font-size: max( 12px, calc( 15 * var(--sc-f) ) );
	font-weight: 600;
	text-transform: uppercase;
}
.sc-guide .sc-guide__pagination a { color: var(--sc-darkblue); text-decoration: none; }
.sc-guide .sc-guide__pagination a:hover { color: var(--sc-blue); }
.sc-guide .sc-guide__pagination .page-numbers.current { color: var(--sc-blue); }

@media ( max-width: 960px ) {
	.sc-guide ul.sc-guide__grid {
		width: auto;
		margin-inline: 0 !important;
		grid-template-columns: repeat( 2, 1fr );
		gap: max( calc( 60 * var(--sc-u) ), 32px ) max( calc( 60 * var(--sc-u) ), 24px );
	}
}
@media ( max-width: 560px ) {
	.sc-guide ul.sc-guide__grid { grid-template-columns: 1fr; }
}

/* --- the single article ------------------------------------------------- */
/* Blocksy lays it out in its narrow container (750): here 860, a reading
   column for the 24 px text. Title first, then date and category, then the
   featured image, then the text. */
body.sc-blog { --theme-narrow-container-max-width: calc( 860 * var(--sc-u) ); }

body.sc-blog article.post .entry-header { margin-top: calc( 60 * var(--sc-u) ); }

body.sc-blog .entry-header .page-title {
	font-size: calc( 45 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.2;
}

/* the excerpt under the title (Blocksy calls it page-description) */
body.sc-blog .entry-header .page-description,
body.sc-blog .entry-header .page-description p {
	margin-top: calc( 24 * var(--sc-u) );
	font-size: calc( 24 * var(--sc-f) );
	font-weight: 300;
	line-height: 1.45;
}

body.sc-blog .entry-header .entry-meta {
	margin-top: calc( 24 * var(--sc-u) );
	font-size: max( 11px, calc( 13.3 * var(--sc-f) ) );
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sc-blue);
	--theme-link-initial-color: var(--sc-blue);
}

body.sc-blog .ct-featured-image { margin-block: calc( 50 * var(--sc-u) ) calc( 60 * var(--sc-u) ); }
body.sc-blog .ct-featured-image img { border-radius: var(--sc-radius-box-large); }

body.sc-blog .entry-content > h2 { margin-top: calc( 64 * var(--sc-u) ); }
body.sc-blog .entry-content > h3 { margin-top: calc( 48 * var(--sc-u) ); }
body.sc-blog .entry-content > figure { margin-block: calc( 46 * var(--sc-u) ); }
body.sc-blog .entry-content > figure img { border-radius: var(--sc-radius-box-large); }

body.sc-blog .sc-post__back {
	margin-top: calc( 80 * var(--sc-u) );
	font-size: max( 12px, calc( 15 * var(--sc-f) ) );
	font-weight: 600;
	text-transform: uppercase;
}
body.sc-blog .sc-post__back a { color: var(--sc-darkblue); text-decoration: none; }
body.sc-blog .sc-post__back a::before { content: "\2190\00a0\00a0"; }
body.sc-blog .sc-post__back a:hover,
body.sc-blog .sc-post__back a:focus-visible { color: var(--sc-blue); }

/* ==========================================================================
   PRIVACY POLICY AND COOKIE POLICY
   The text is injected by the iubenda script into #iubenda_policy, with a
   stylesheet of its own (13 px Helvetica, grey). These rules bring it to
   the site's typeface and colours; the id in the selectors is needed to
   outweigh iubenda's. The iubenda header (a second title plus a generic
   sentence) is hidden: the page has its own title.
   ========================================================================== */
body.sc-legal .sc-legal__text {
	max-width: calc( 860 * var(--sc-u) );
	margin-inline: auto;
	padding-block: calc( 60 * var(--sc-u) ) calc( 80 * var(--sc-u) );
}
body.sc-legal .sc-legal__text > h1 {
	font-size: calc( 45 * var(--sc-f) );
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: calc( 30 * var(--sc-u) );
}
body.sc-legal #iubenda_policy,
body.sc-legal #iubenda_policy p,
body.sc-legal #iubenda_policy ul li,
body.sc-legal #iubenda_policy ul.normal_list li,
body.sc-legal #iubenda_policy .iub_footer,
body.sc-legal #iubenda_policy .iub_footer p {
	font-family: inherit;
	font-size: calc( 17 * var(--sc-f) );
	line-height: 1.6;
	color: var(--sc-text);
}
body.sc-legal #iubenda_policy .iub_base_container { color: var(--sc-text); }
body.sc-legal #iubenda_policy .iub_content { padding: 0; }
body.sc-legal #iubenda_policy .iub_header { display: none; }
body.sc-legal #iubenda_policy h1,
body.sc-legal #iubenda_policy h2,
body.sc-legal #iubenda_policy h3,
body.sc-legal #iubenda_policy h4 {
	font-family: inherit;
	color: var(--sc-darkblue);
	line-height: 1.3;
}
body.sc-legal #iubenda_policy h2 { font-size: calc( 26 * var(--sc-f) ); padding-top: calc( 40 * var(--sc-u) ); }
body.sc-legal #iubenda_policy h3 { font-size: calc( 20 * var(--sc-f) ); padding-top: calc( 28 * var(--sc-u) ); }
body.sc-legal #iubenda_policy h4 { font-size: calc( 17 * var(--sc-f) ); padding-top: calc( 20 * var(--sc-u) ); }
body.sc-legal #iubenda_policy .one_line_col { border-bottom-color: #d6dde3; padding-bottom: calc( 10 * var(--sc-u) ); }
body.sc-legal #iubenda_policy a { color: var(--sc-blue); }
body.sc-legal #iubenda_policy .iub_footer,
body.sc-legal #iubenda_policy .iub_footer p { font-size: calc( 14 * var(--sc-f) ); }

/* the site's own section under the iubenda text (services iubenda has no
   preset for, e.g. the Google reviews widget) */
body.sc-legal .sc-legal__extra { padding-top: calc( 40 * var(--sc-u) ); border-top: 1px dotted #d6dde3; margin-top: calc( 20 * var(--sc-u) ); }
body.sc-legal .sc-legal__extra h2 { font-size: calc( 26 * var(--sc-f) ); color: var(--sc-darkblue); line-height: 1.3; margin: 0 0 calc( 12 * var(--sc-u) ); }
body.sc-legal .sc-legal__extra h3 { font-size: calc( 20 * var(--sc-f) ); color: var(--sc-darkblue); line-height: 1.3; margin: calc( 16 * var(--sc-u) ) 0 calc( 8 * var(--sc-u) ); }
body.sc-legal .sc-legal__extra p { font-size: calc( 17 * var(--sc-f) ); line-height: 1.6; margin: 0 0 calc( 14 * var(--sc-u) ); }
body.sc-legal .sc-legal__extra a { color: var(--sc-blue); }