. It has to keep reading as the heading of the list below it while showing it can be clicked, so it carries the same type as the
version and adds only an underline that warms on hover.
Written as ".mega-menu a.mega-menu__title--link" — 0,2,1 — on purpose.
Two later rules would otherwise win on source order at 0,1,1:
".mega-menu a" (weight 500) and, inside the desktop block,
".mega-menu__pane--cities a" (font-size .95rem). At plain
"a.mega-menu__title--link" this heading rendered at 15.2px/500 and read
as another city row instead of the heading above them. */
.mega-menu a.mega-menu__title--link{
display:inline-block;
padding:0;
font-family:var(--font-display); font-weight:700; font-size:.72rem;
line-height:inherit;
color:var(--ink-700); text-transform:uppercase; letter-spacing:.06em;
text-decoration:underline;
/* --line-200 was invisible here: it is a border tint, and against the
panel's own background the underline simply did not read, so the
heading looked identical to the six that are not links. --ink-500 is
the faintest token that still shows at 11.5px. */
text-decoration-color:var(--ink-500);
text-underline-offset:3px;
transition:color .14s ease, text-decoration-color .14s ease;
}
.mega-menu a.mega-menu__title--link:hover{
color:var(--amber-600);
text-decoration-color:var(--amber-500);
}
/* On the region's own page the heading is the "you are here" marker. */
.mega-menu a.mega-menu__title--link[aria-current="page"]{
color:var(--amber-600);
text-decoration-color:var(--amber-500);
}
/* A region with no cities under it — Valle d'Aosta, in three services.
Its pane holds the heading and nothing else, and at heading size that
read as a caption stranded above an empty list rather than as the one
thing there to click. Here the heading takes the type of a city row
instead, because functionally that is what it is: the single
destination in this pane. No wording changes, only its size. */
.mega-region__panel--solo a.mega-menu__title--link{
font-family:var(--font-body);
font-size:.95rem;
font-weight:500;
text-transform:none;
letter-spacing:normal;
padding:7px 0;
}
.mega-region__panel ul{ list-style:none; margin:0; padding:0; }
/* Sub-heading inside a grouped panel — "Apertura Porte" is the only region
that has any. Its seven groups were each a top-level row in the old menu;
they are one row now, so their names sit over their own links here.
Deliberately lighter than .mega-menu__title above it: that one names the
whole panel, these divide it, and if both shouted the panel would read as
eight competing headings rather than one heading with sections. Same
uppercase display type at a smaller size and a softer colour, so the
hierarchy is legible at a glance.
No top margin on the first one — .mega-menu__title already leaves 10px
under itself, and doubling that detached the first group from the heading
it belongs to. */
.mega-menu__subtitle{
font-family:var(--font-display); font-weight:700; font-size:.66rem;
color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em;
margin:14px 0 4px;
}
.mega-region__panel > .mega-menu__subtitle:first-of-type{ margin-top:0; }
.mega-menu a{
display:block; padding:4px 0; font-weight:500; font-size:.85rem;
line-height:1.4; color:var(--ink-700); white-space:normal;
}
.mega-menu a:hover{ color:var(--amber-600); }
/* --- You-are-here.
On a city page the menu marks the whole path down to it: the service
in the top bar, that service's region in the left pane, and the city
itself. header.php also opens the panel on the visitor's own region
rather than always the first, so the list they need is the one
showing when the panel appears.
.is-current is deliberately a different class from .is-active, which
hover drives: moving the pointer to another region must swap which
cities show WITHOUT erasing the marker saying where you actually
are. The two can sit on the same region at once, and the rules below
are written so that reads correctly either way.
These rules must stay AFTER the .nav-item and .mega-menu rules
above. Several of them tie on specificity with the hover and
[aria-current] rules, so source order is what decides. --- */
.nav-item.is-current > a{
position:relative;
color:var(--amber-600);
}
.nav-item.is-current > a::after{
content:"";
position:absolute; left:0; right:0; bottom:-3px;
height:2px; border-radius:2px;
background:var(--amber-500);
}
.mega-region.is-current > .mega-region__toggle,
.mega-menu .mega-region.is-current > a.mega-region__link{
color:var(--amber-600);
font-weight:700;
}
/* Current AND hovered-off: keep the orange text, drop the fill so the
region the pointer is on is still the one that looks selected. */
.mega-region.is-current:not(.is-active) > .mega-region__toggle{
background:none;
}
.mega-region--linked.is-current:not(.is-active){ background:none; }
.mega-menu a.is-current{
color:var(--amber-600);
font-weight:700;
}
/* Back bar — mobile-only "drill-down" navigation; desktop shows both
panes at once, so there is nothing to go back from. */
.mega-menu__back{
display:none;
align-items:center; gap:10px;
border:0; border-radius:8px; background:var(--green-050);
padding:11px 12px; margin:0 0 12px;
font-family:var(--font-display); font-weight:700; font-size:.88rem;
color:var(--green-900); cursor:pointer; width:100%; text-align:left;
}
.mega-menu__back-caret{
display:block; width:8px; height:8px; flex-shrink:0;
border-left:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg);
}
/* z-index sits above the mobile drawer (120) on purpose: the drawer is
fixed from the very top of the viewport, so without this it paints
over the hamburger and there is no visible way to close the menu. */
.site-header__call{
display:flex; align-items:center;
gap:clamp(6px,1.6vw,10px);
flex-shrink:0; min-width:0;
position:relative; z-index:125;
}
/* Iscriviti / Login. Two text buttons where the phone block and the
call CTA used to be, so they have to share the room one button and a
number had. Tighter padding, and nowrap so neither label ever breaks
across two lines and grows the header. */
.site-header__cta{
padding:11px 18px; font-size:.9rem;
white-space:nowrap;
}
/* Mobile-drawer copy of the two buttons above (see header.php). Hidden
here; the ≤899px block below turns it on and hides .site-header__cta's
pair in its place, so exactly one pair is ever visible at once. */
.site-nav__actions{ display:none; }
/* --- Hamburger --- */
.nav-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:12px;
border:1px solid var(--line-200); background:#fff; color:var(--green-900);
flex-shrink:0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
content:""; display:block; width:20px; height:2px;
background:currentColor; border-radius:2px;
transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before{ position:absolute; top:-6px; }
.nav-toggle__bars::after { position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform:translateY(-6px) rotate(-45deg); }
/* --- Backdrop --- */
.nav-backdrop{
position:fixed; inset:0; z-index:110;
background:rgba(26,27,39,.45);
opacity:0; transition:opacity .25s ease;
}
.nav-backdrop.is-open{ opacity:1; }
.nav-backdrop[hidden]{ display:none; }
/* ============================================================
MOBILE — below 900px
backdrop-filter is removed here on purpose: an element with
backdrop-filter becomes the containing block for its fixed-position
descendants, which would trap the drawer inside the header.
============================================================ */
@media (max-width:899px){
.site-header{
backdrop-filter:none;
background:var(--paper-000);
}
/* Starts below the header rather than at the top of the viewport, so
the header stays a whole, un-clipped bar with its close button in
its normal place instead of the drawer sliding over the top of it.
--header-bottom is measured by site.js; the static --header-h
fallback is short of the header's actual rendered height. */
.site-nav{
position:fixed; inset:var(--header-bottom,var(--header-h)) 0 0 auto;
width:min(86vw,340px);
display:block;
background:var(--paper-000);
padding:var(--space-s) var(--space-m) var(--space-xl);
box-shadow:var(--shadow-pop);
border-top:1px solid var(--line-200);
transform:translateX(100%);
transition:transform .25s ease;
overflow-y:auto;
overscroll-behavior:contain;
z-index:120;
}
.site-nav.is-open{ transform:translateX(0); }
.site-nav__list{ flex-direction:column; gap:0; }
.nav-item{ position:relative; border-bottom:1px solid var(--line-100); }
.nav-item.has-mega > a{ padding-right:52px; }
.nav-item > a{
display:flex; align-items:center; min-height:52px;
padding:var(--space-xs) 0;
font-size:1.02rem; font-weight:700; color:var(--green-900);
white-space:normal;
}
/* An open service stays visibly marked while you're inside it. */
.nav-item.is-open > a{ color:var(--amber-600); }
/* Tap-to-expand accordion — hover doesn't exist on touch. Tapping the
service reveals its region list; tapping a region swaps to its
cities as a second screen with a back bar, instead of nesting
everything inline into a wall of indented rows. */
.nav-item__toggle{
display:flex; align-items:center; justify-content:center;
position:absolute; top:0; right:-4px;
width:52px; height:52px;
border-radius:10px;
color:var(--green-900);
}
.nav-item.is-open .nav-item__toggle{
background:var(--amber-050); color:var(--amber-600);
}
.mega-menu{
display:grid; grid-template-rows:0fr;
transition:grid-template-rows .25s ease;
}
.mega-menu__panel{ overflow:hidden; min-height:0; }
.nav-item.is-open .mega-menu{ grid-template-rows:1fr; }
/* Inset + tinted so an open sub-level reads as "inside" its service
rather than as more top-level rows. */
.mega-menu__pane{
padding:var(--space-xs);
margin-bottom:var(--space-xs);
background:var(--green-050);
border-radius:var(--radius-s);
}
.mega-region__toggle{
min-height:44px; font-size:.95rem; padding:8px 10px;
}
.mega-region__toggle .nav-item__caret{ opacity:.6; }
/* Split rows on a phone: both halves get their own 44px target, and a
hairline between them so it reads as two things to tap rather than
one wide one. Without it a thumb aiming for the caret lands on the
link and navigates away instead of opening the sub-list. */
.mega-menu a.mega-region__link{
min-height:44px; display:flex; align-items:center;
font-size:.95rem; padding:8px 4px 8px 10px;
}
.mega-region__toggle--caret{
min-height:44px; min-width:44px;
padding:8px 10px;
border-left:1px solid var(--line-200);
border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.mega-menu__pane--cities{ display:none; }
.mega-menu.is-drilled .mega-menu__pane--regions{ display:none; }
.mega-menu.is-drilled .mega-menu__pane--cities{ display:block; }
.mega-menu__back{ display:flex; background:var(--paper-000); }
.mega-menu__title{ padding-inline:10px; }
.mega-menu a{ padding:9px 10px; font-size:.95rem; }
body.nav-open{ overflow:hidden; }
/* Iscriviti/Login move into the drawer below 899px, so the header bar
itself only ever has to fit the logo and the hamburger — this is what
replaces the old shrink-the-buttons rules that used to live below 620
and 430px (removed; the buttons they targeted no longer render on
that path at all, so there was nothing left for them to do). */
.site-header__cta{ display:none; }
.site-nav__actions{
display:flex; gap:10px;
margin-top:var(--space-m);
padding-top:var(--space-m);
border-top:1px solid var(--line-200);
}
/* Tightened from the .btn base (16px 28px, 1rem): the drawer is
min(86vw,340px) wide with 24px of side padding, so two equal-width
pills split ~292px minus the 10px gap between them. At the base size
"Iscriviti" — the longer label — was tight against wrapping. */
.site-nav__actions .btn{
flex:1 1 0; min-width:0;
padding:12px 14px; font-size:.92rem;
white-space:nowrap;
}
}
@media (min-width:900px){
.site-nav{ display:flex; }
.nav-toggle{ display:none; }
.nav-backdrop{ display:none; }
/* Hover/focus flyout.
Anchored to the nav LIST, not to the individual nav item, and made
wider than that list — so there is always panel directly beneath
whichever service you're pointing at, and the panel's left edge is
identical for all six (it can't walk off the right of the screen).
--mega-gap is the dead strip between the bottom of a nav link and
the top of the panel: half the row's spare height around the 24px nav line,
(max(logo, 44px) - 24px) / 2, plus .site-header__inner's 10px padding-block plus
the header's 1px bottom border. ::before re-covers exactly that
strip, so moving the cursor straight down from a nav link never
leaves :hover and the panel can't flicker shut mid-travel. */
.site-nav__list{ position:relative; }
.nav-item{ position:static; }
/* Padding on an inline grows the hover target without changing
the header's height, so there's more to aim at on the way down. */
.nav-item > a{ padding-block:10px; }
.mega-menu{
--mega-gap:calc((max(var(--logo-h),44px) - 24px) / 2 + 11px);
position:absolute; top:calc(100% + var(--mega-gap)); left:0;
width:min(640px,calc(100vw - 2 * var(--gutter)));
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-pop);
/* No pointer-events here on purpose. visibility:hidden already makes
the closed panel unclickable, and unlike pointer-events it is a
transitioned property — so it stays "visible" (and therefore
interactive) for the whole grace period below. With
pointer-events:none the panel went inert the instant :hover was
lost: still on screen, but the mouse fell through it to the page
behind, so moving back onto it could not reopen it and the delay
bought nothing. */
opacity:0; visibility:hidden;
transform:translateY(-4px);
/* --mega-close-delay is a grace period on the CLOSING direction
only: this rule is what applies once :hover is lost, so the delay
here keeps the panel up while the cursor cuts a corner or crosses
a gap. The :hover rule below zeroes it, so opening stays instant. */
--mega-close-delay:.3s;
transition:
opacity .15s ease var(--mega-close-delay),
transform .15s ease var(--mega-close-delay),
visibility .15s var(--mega-close-delay);
z-index:150;
}
.mega-menu::before{
content:"";
position:absolute; left:0; right:0;
top:calc(-1 * var(--mega-gap)); height:var(--mega-gap);
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega:focus-within .mega-menu{
opacity:1; visibility:visible;
transform:translateY(0);
--mega-close-delay:0s; /* opens with no lag */
}
.mega-menu__panel{ display:flex; align-items:stretch; }
/* One plain column of regions. Width is set so the longest names
("Apertura Porte Emilia – Romagna") stay on one line — wrapped rows
were what pushed Fabbro's 20 regions past the cap into a scrollbar. */
.mega-menu__pane--regions{
/* Width is set so the longest name stays on one line AT THE SIZE
ABOVE — 268px was right at .82rem and wraps "Apertura Porte
Emilia – Romagna" at .9rem. A wrapped row is not just untidy: it
costs a row's height in a column already capped for scrolling. */
flex:0 0 296px;
padding:10px;
/* Raised with the type below. Measured from the space actually left
under the header rather than a flat vh share, so the panel can't
run past the bottom of a short window. Fabbro is the worst case:
21 regions at 27px a row is 567px, so they fit down to roughly a
730px-tall window and scroll below that. */
max-height:min(calc(100vh - 120px),660px);
overflow-y:auto;
}
/* Desktop type: larger than the mobile drawer's, and with real space
between rows — these are pointing targets, not a dense list.
The vertical padding is 4px, not 5px, because restoring Fabbro
Valle d'Aosta took the fabbro menu from 20 regions to 21 (see
_PHASE-6-LOG.md A15) and a 21st row at the old height pushed the
column past the cap above, bringing the scrollbar back at window
heights where it used to fit. 2px off each row buys back 42px,
more than the 29px the new row costs, so 21 regions now clear the
cap in slightly LESS height than 20 used to.
This affects the desktop column only. The mobile drawer sets its
own min-height:44px in the <=900px block and is untouched.
The linked rows (a link plus a caret button) take the same size and
vertical padding, so a row that happens to be a page of its own is
indistinguishable from the rest of the column. Only the horizontal
padding differs, because the row's 10px is split between the two
halves instead of sitting on one element. */
.mega-region__toggle{
padding:4px 10px;
font-size:.9rem;
}
.mega-menu a.mega-region__link{
padding:4px 4px 4px 10px;
font-size:.9rem;
}
.mega-region__toggle--caret{
padding:4px 10px 4px 4px;
}
/* The cities for whichever region is pointed at. 15 is the most any
one region has, which is well inside the cap. */
.mega-menu__pane--cities{
flex:1 1 auto; min-width:0;
padding:16px 20px;
border-left:1px solid var(--line-100);
background:var(--paper-050);
border-radius:0 var(--radius-m) var(--radius-m) 0;
max-height:min(calc(100vh - 120px),660px);
overflow-y:auto;
}
.mega-menu__pane--cities a{
font-size:.95rem;
padding:7px 0;
}
.mega-menu__back{ display:none; }
}
/* ============================================================
7b. HERO — .hero--split variant
APPEND THIS AT THE END OF SECTION 7 IN global.css
(immediately before the "8. SERVICE TILE STRIP" comment)
Two-column hero: copy left, photo right with floating stat cards.
Overrides the photo-background hero without touching it, so the
homepage's existing .hero and .hero--compact keep working.
Selectors use .hero.hero--split (0,3,0) rather than .hero--split
(0,2,0) so they beat the base .hero .hero__grid rules regardless
of where this block ends up in the file.
============================================================ */
.hero.hero--split{
position:relative;
overflow:hidden;
background:var(--green-050);
padding-block:clamp(28px,5vw,72px);
color:var(--ink-700);
}
/* Was a decorative gradient wash (purely visual, aria-hidden in
markup) — removed in favour of the hero's own flat --green-050
background. The element stays in the markup, just unrendered, so
nothing else needs to change. */
.hero--split .hero__shape{ display:none; }
/* Reset everything the photo-hero set on the grid */
.hero.hero--split .hero__grid{
position:relative;
z-index:1;
width:min(100% - (var(--gutter) * 2), var(--max-w));
margin-inline:auto;
padding-inline:0;
padding-block:0;
min-height:0;
background-image:none;
background-color:transparent;
border-radius:0;
box-shadow:none;
display:grid;
gap:clamp(32px,5vw,64px);
align-items:center;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:980px){
.hero.hero--split .hero__grid{
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(40px,5vw,80px);
}
}
/* The copy is no longer a card sitting on a photo */
.hero.hero--split .hero__copy{
background:transparent;
box-shadow:none;
border-radius:0;
margin:0;
padding:0;
display:block;
}
.hero--split .hero__copy .section-kicker{ margin-bottom:16px; }
/* One hero title treatment for every page on this banner: same size,
always capitals. text-transform rather than retyped copy, so a title
written in sentence case in the source still reads as capitals and
the source words stay untouched. Service stylesheets must not
override the size — the longer titles simply wrap onto more lines. */
.hero.hero--split h1,
.hero.hero--split .hero__headline,
/* One hero title treatment for every page on this banner: same size, always capitals. text-transform rather than retyped copy, so a title written in sentence case in the source still reads as capitals and the source words stay untouched. Service stylesheets must not override the size — the longer titles simply wrap onto more lines. */ .hero.hero--split h2:where(.h1-look){ text-transform:uppercase; }
.hero.hero--split h1,
.hero.hero--split h2:where(.h1-look){
font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);
line-height:1.02;
letter-spacing:-.02em;
}
/* Orange highlight inside the H1 */
.hero h1 .accent,
/* Orange highlight inside the H1 */ .hero h2:where(.h1-look) .accent{ color:var(--amber-500); }
.hero.hero--split .hero__sub{
margin-top:16px;
max-width:44ch;
}
.hero.hero--split .hero__actions{
margin-top:26px;
padding-top:0;
border-top:0;
max-width:none;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--space-xs);
}
/* One per row on phones, so neither button gets squeezed. */
@media (max-width:480px){
.hero.hero--split .hero__actions{ flex-direction:column; align-items:stretch; }
}
/* --- Trust list: any number of items, 1 col on phones, 2 above --- */
.hero__trust{
display:grid;
gap:10px var(--space-m);
grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--line-200);
max-width:520px;
}
.hero__trust li{
display:flex; align-items:center; gap:10px;
font-size:.95rem; font-weight:600; color:var(--green-900);
line-height:1.3;
}
.hero__trust svg{
width:20px; height:20px; flex-shrink:0;
color:var(--live-500);
}
/* ============================================================
Visual column
Mobile: image + stats flow as a grid, no absolute positioning.
Desktop: stats float over the image corners.
============================================================ */
.hero.hero--split .hero__visual{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
gap:var(--space-2xs);
position:relative;
padding:0;
align-items:stretch;
justify-content:initial;
}
/* Landscape on purpose — wider than tall. object-fit:cover means a
portrait source file gets cropped top and bottom to fit this box. */
.hero__img{
grid-column:1 / -1;
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
border-radius:var(--radius-l);
box-shadow:var(--shadow-pop);
margin-bottom:var(--space-2xs);
}
.hero__stat{
display:flex; flex-direction:column; gap:2px;
padding:14px 16px;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
}
.hero__stat-num{
font-family:var(--font-display);
font-weight:800;
font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);
line-height:1.1;
color:var(--green-900);
letter-spacing:-.01em;
}
.hero__stat-num sup{
font-size:.55em; vertical-align:super;
color:var(--amber-500); margin-left:1px;
}
.hero__stat-label{
font-size:.78rem; font-weight:600;
color:var(--ink-500); line-height:1.25;
}
.hero__stat--a .hero__stat-num{ color:var(--amber-600); }
@media (min-width:980px){
.hero.hero--split .hero__visual{
display:block;
padding:0 clamp(12px,2vw,28px);
}
.hero__img{
aspect-ratio:4/3;
margin-bottom:0;
}
.hero__stat{
position:absolute;
z-index:2;
min-width:150px;
padding:15px 18px;
backdrop-filter:blur(6px);
background:rgba(255,255,255,.94);
}
/* Tucked slightly outside the photo: it's landscape, so it's much
shorter than a portrait one and inset cards would crowd it. */
.hero__stat--a{ top:-4%; left:-2%; }
.hero__stat--d{ bottom:-6%; right:-2%; }
}
/* Tall-but-narrow desktops: pull the cards in so they don't collide */
@media (min-width:980px) and (max-width:1180px){
.hero__stat{ min-width:132px; padding:12px 14px; }
.hero__stat--a{ left:-2%; }
}
@media (max-width:420px){
.hero.hero--split .hero__visual{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hero__stat{ padding:12px 13px; }
.hero__stat-label{ font-size:.73rem; }
}
/* ============================================================
8. SERVICE TILE STRIP — now any number of tiles
============================================================ */
.tile-strip{ background:var(--green-050); padding-block:clamp(36px,5vw,64px); }
.tile-strip__grid{
--col-min:140px;
--gap:clamp(12px,1.4vw,16px);
--cols-max:6; /* raise or lower per page if needed */
display:grid;
gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(
max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),
1fr
)
);
}
.tile{
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column; align-items:center;
gap:14px; padding:26px 12px 22px;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
text-align:center;
height:100%; /* equal heights at any count */
transition:transform .22s cubic-bezier(.2,.7,.3,1),
box-shadow .22s cubic-bezier(.2,.7,.3,1),
border-color .22s ease;
}
.tile::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--amber-500),var(--amber-400));
transform:scaleX(0); transform-origin:left;
transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.tile:hover,.tile:focus-within{
transform:translateY(-4px); border-color:transparent; box-shadow:var(--shadow-pop);
}
.tile:hover::before,.tile:focus-within::before{ transform:scaleX(1); }
.tile__media{
display:grid; place-items:center;
width:clamp(64px,9vw,84px); height:clamp(64px,9vw,84px);
border-radius:50%; background:var(--green-100);
transition:background .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media,.tile:focus-within .tile__media{
background:var(--amber-050); transform:scale(1.06);
}
.tile__media img{
width:clamp(34px,5vw,48px); height:clamp(34px,5vw,48px);
transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile__media img{ transform:scale(1.06); }
.tile__label{
font-family:var(--font-display);
font-size:clamp(13px,1.1vw,15px);
font-weight:700; letter-spacing:-.01em;
color:var(--green-900); line-height:1.25;
display:inline-block; min-height:22px;
margin-top:auto; /* labels align even at uneven lengths */
transition:color .18s ease;
}
.tile:hover .tile__label,.tile:focus-within .tile__label{ color:var(--amber-600); }
.tile a:focus-visible{ outline:3px solid var(--green-500); outline-offset:3px; border-radius:8px; }
@media (max-width:899px){
.tile-strip__grid{ --cols-max:3; }
}
@media (max-width:480px){
.tile{ padding:18px 8px 16px; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
.tile,.tile::before,.tile__media,.tile__media img{ transition:none; }
.tile:hover{ transform:none; }
.tile:hover .tile__media,.tile:focus-within .tile__media{ transform:none; }
}
/* ============================================================
9. ABOUT — collapses without a breakpoint
============================================================ */
.about__grid{
display:grid;
gap:clamp(32px,5vw,64px);
grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
align-items:center;
}
/* No panel behind the image: the gradient box, 4:5 ratio and contain
padding were built for the small map PNG this slot used to hold. It
holds a photo now, which fills the column at its own proportions. */
.about__media{
position:relative; border-radius:var(--radius-l); overflow:hidden;
max-width:400px; margin-inline:auto; /* source is 724px wide — any
larger and it renders soft */
}
.about__media img{ display:block; width:100%; height:auto; }
.about__content h2:where(:not(.h1-look)){ margin-bottom:8px; }
.about__subhead{
color:var(--amber-500);
font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
font-weight:700; margin-bottom:20px;
}
.about__content p{ margin-bottom:16px; max-width:70ch; }
.about__content p:last-child{ margin-bottom:0; }
.about__content a{ color:var(--green-500); font-weight:700; }
.about__content a:hover{ color:var(--green-700); }
.about__content a.btn--white,
.about__content a.btn--white:hover,
.about__content a.btn--white:focus-visible{ color:var(--paper-000); }
.about__content a.btn--white .icon-phone{ color:inherit; }
/* Justified text creates rivers on narrow screens */
.about__content p,.feature-card p,.faq-item__a-inner p{ text-align:left; }
@media (min-width:900px){
.about__content p,.feature-card p,.faq-item__a-inner p{ text-align:justify; }
}
/* ============================================================
10. FEATURE CARDS — any number, accents cycle
============================================================ */
.features{ background:var(--green-050); }
.features__head{ max-width:620px; margin-bottom:var(--space-xl); }
.features__head--center{ margin-inline:auto; text-align:center; }
.features__head--center .section-kicker{ justify-content:center; }
.features__grid{
--col-min:280px; --gap:var(--space-m); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.feature-card{
background:var(--paper-000);
border-radius:var(--radius-m);
padding:clamp(24px,3vw,34px) clamp(20px,2.5vw,28px);
border-top:4px solid var(--amber-500);
box-shadow:var(--shadow-card);
height:100%;
}
/* Cycles every 3 — works with 3, 4, 7 or any other count */
.feature-card:nth-child(3n+2){ border-top-color:var(--green-700); }
.feature-card:nth-child(3n+3){ border-top-color:var(--green-950); }
.feature-card__icon{
width:48px; height:48px; border-radius:12px;
background:var(--green-100); color:var(--green-800);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px;
}
.feature-card__icon svg{ width:24px; height:24px; }
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6){
margin-bottom:12px;
font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
font-weight:700; line-height:1.3; color:var(--green-900);
}
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6) a{ color:inherit; }
.feature-card :is(h2:where(:not(.h1-look)),h3,h4,h5,h6) a:hover{ color:var(--amber-600); }
.feature-card p{ font-size:.97rem; }
/* ============================================================
11. SERVICE CARDS — any number
============================================================ */
.services{ background:var(--paper-000); }
.services__grid{
--col-min:280px; --gap:clamp(20px,2.2vw,24px); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.service-card{
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
overflow:hidden;
display:flex; flex-direction:column;
height:100%;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover,.service-card:focus-within{
transform:translateY(-6px); box-shadow:var(--shadow-pop); border-color:transparent;
}
.service-card__media{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.service-card__media img{
width:100%; height:100%; object-fit:cover; transition:transform .4s ease;
}
.service-card:hover .service-card__media img{ transform:scale(1.05); }
.service-card__body{
padding:22px 24px 26px;
display:flex; align-items:center; justify-content:space-between;
gap:var(--space-s); flex:1;
}
.service-card h4{ color:var(--green-900); }
.service-card__arrow{
width:34px; height:34px; border-radius:50%;
background:var(--amber-600); color:var(--paper-000);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
transition:background .22s ease, color .22s ease, transform .22s ease;
}
.service-card__arrow svg{ width:16px; height:16px; }
.service-card:hover .service-card__arrow{
background:var(--green-100); color:var(--green-800); transform:translateX(4px);
}
@media (max-width:899px){
.services__grid{ --cols-max:2; }
.services{display: none;}
}
/* ============================================================
12. ACCORDION / FAQ
============================================================ */
.faq{ background:var(--amber-050); }
.faq__wrap{ max-width:820px; margin-inline:auto; }
.faq-item{
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
margin-bottom:var(--space-xs);
overflow:hidden;
transition:box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover{ border-color:var(--amber-400); }
.faq-item.is-open{ box-shadow:var(--shadow-card); border-color:transparent; }
.faq-item__q{
width:100%; text-align:left;
display:flex; align-items:center; justify-content:space-between;
gap:var(--space-s);
padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,24px);
min-height:44px;
font-family:var(--font-display); font-weight:700;
font-size:clamp(.97rem,.93rem + .25vw,1.06rem);
line-height:1.35;
color:var(--green-900);
transition:color .18s ease;
}
.faq-item__q:hover{ color:var(--amber-600); }
.faq-item__plus{
width:28px; height:28px; border-radius:50%;
background:var(--green-100);
flex-shrink:0; position:relative;
transition:background .25s ease, transform .25s ease;
}
.faq-item__plus::before{
content:"";
position:absolute; top:47%; left:50%;
width:8px; height:8px;
border-right:2px solid var(--green-900);
border-bottom:2px solid var(--green-900);
transform:translate(-50%,-65%) rotate(45deg);
transition:border-color .25s ease;
}
.faq-item__plus::after{ content:none; }
.faq-item__q:hover .faq-item__plus{ background:var(--amber-050); }
.faq-item.is-open .faq-item__plus{
background:var(--amber-500); transform:rotate(180deg);
}
.faq-item.is-open .faq-item__plus::before{ border-color:#fff; }
/* Height-agnostic reveal. Padding lives on the inner element, which
is fully clipped while collapsed. */
.faq-item__a{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-item__a{ grid-template-rows:1fr; }
.faq-item__a > *{
overflow:hidden;
min-height:0;
}
.faq-item__a-inner{
padding:0 clamp(16px,2.2vw,24px);
max-width:68ch;
}
.faq-item__a-inner > *:first-child{ margin-top:0; }
.faq-item.is-open .faq-item__a-inner{
padding-bottom:clamp(18px,2.4vw,24px);
}
.faq-item__a-inner p{ font-size:.96rem; text-align:left; line-height:1.6; }
.faq-item__a-inner p + p{ margin-top:var(--space-xs); }
.faq-item__a-inner a{ color:var(--green-500); font-weight:700; text-decoration:underline; }
.faq-item__a-inner a:hover{ color:var(--green-700); }
@supports not (grid-template-rows:0fr){
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.is-open .faq-item__a{ max-height:2000px; }
}
/* ============================================================
13. CTA BAND
============================================================ */
.cta-band{
position:relative; overflow:hidden;
background:linear-gradient(100deg,var(--green-900) 0%,var(--green-800) 100%);
color:#fff; padding-block:clamp(32px,5vw,60px);
}
.cta-band::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--amber-500),var(--amber-400));
}
.cta-band__inner{
position:relative;
display:flex; flex-wrap:wrap;
align-items:center; justify-content:space-between;
gap:var(--space-m);
text-align:center;
}
.cta-band__lead{
font-family:var(--font-display); font-weight:800;
font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);
line-height:1.2; letter-spacing:-.01em; color:#fff;
flex:1 1 min(100%,420px);
text-wrap:balance;
}
.cta-band__phone{
font-family:var(--font-body); font-size:1rem; font-weight:700;
padding:14px 28px; flex-shrink:0; margin-inline:auto;
}
@media (min-width:760px){
.cta-band__inner{ text-align:left; flex-wrap:nowrap; gap:var(--space-l); }
.cta-band__phone{ margin-inline:0; }
}
@media (max-width:600px){
.cta-band__phone{ width:100%; }
}
/* ============================================================
14. TABS — generic, scrollable on mobile
.region-tabs / .region-tab kept as aliases.
============================================================ */
.region-tabs{
display:flex; flex-wrap:wrap; gap:9px;
}
/* On phones, don't wrap into four rows — scroll instead */
@media (max-width:640px){
.region-tabs{
flex-wrap:nowrap;
overflow-x:auto;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:4px;
margin-inline:calc(var(--gutter) * -1);
padding-inline:var(--gutter);
}
.region-tabs::-webkit-scrollbar{ display:none; }
.region-tab{ scroll-snap-align:start; flex:0 0 auto; }
}
.region-tab{
border:1.5px solid var(--line-200); background:#fff; color:var(--green-900);
padding:9px 16px; border-radius:999px;
font-family:inherit; font-size:14px; font-weight:600;
min-height:40px;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.region-tab:hover{ border-color:var(--amber-500); }
.region-tab.active,.region-tab[aria-selected="true"]{
background:var(--green-900); border-color:var(--green-900); color:#fff;
}
.region-panel{
margin-top:22px;
background:var(--amber-050);
border:1px solid var(--line-200);
border-radius:var(--radius-s);
padding:clamp(20px,2.6vw,28px);
min-height:150px;
}
.region-panel[hidden]{ display:none; }
.region-panel h3{
font-family:var(--font-body); font-size:15px; color:var(--amber-500);
text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}
.region-panel p{ margin:0; color:var(--ink-700); font-size:15px; }
.region-panel p + p{ margin-top:var(--space-xs); }
/* ============================================================
15. COVERAGE / REGIONS
============================================================ */
.coverage{ padding-block:clamp(56px,8vw,96px); }
.coverage-top{ text-align:center; max-width:640px; margin:0 auto clamp(32px,4vw,46px); }
.coverage-top h2:where(:not(.h1-look)){ font-size:clamp(26px,3.4vw,34px); }
.coverage-top p{ color:var(--ink-700); margin-top:12px; }
.coverage-top .btn{ margin-top:22px; }
.coverage-grid{
display:grid;
gap:clamp(32px,4vw,46px);
grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
align-items:start;
}
@media (min-width:1040px){
.coverage-grid{ grid-template-columns:.9fr 1.1fr; }
}
.map-wrap{ display:flex; align-items:center; justify-content:center; }
.map-wrap svg{ width:100%; max-width:340px; height:auto; }
.region-path{ transition:fill .15s ease, stroke .15s ease; }
.region-path.covered{ fill:var(--amber-050); stroke:var(--green-900); stroke-width:1; cursor:pointer; }
.region-path.covered:hover{ fill:#F2E7D2; stroke:var(--amber-500); }
.region-path.covered.active{ fill:var(--amber-500); stroke:var(--amber-600); }
.region-path.uncovered{ fill:#EAE5D8; stroke:#CFC8B3; stroke-width:.7; }
@media (max-width:920px){ .map-wrap{ margin-top:28px; } }
/* The map is decorative on phones — the tabs carry the same information */
/* @media (max-width:560px){ .map-wrap{ display:none; } } */
/* ============================================================
16. CITY / PARTNER LINK GROUPS — any number of groups or links
============================================================ */
.local{ background:var(--green-050); }
.local__groups{
--col-min:280px; --gap:clamp(20px,2.2vw,24px); --cols-max:3;
display:grid; gap:var(--gap);
grid-template-columns:repeat(
auto-fit,
minmax(max(min(var(--col-min),100%),
(100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
);
}
.local-group{
position:relative; isolation:isolate; overflow:hidden;
background:var(--paper-000);
border:1px solid var(--line-200);
border-radius:var(--radius-m);
box-shadow:var(--shadow-card);
padding:clamp(24px,3vw,30px) clamp(20px,2.6vw,28px) 22px;
height:100%;
}
.local-group::before{
content:""; position:absolute; inset-inline:0; top:0; height:3px;
background:linear-gradient(90deg,var(--gold-500),var(--amber-400));
}
.local-group__head{
display:flex; align-items:center; gap:14px;
padding-bottom:18px; margin-bottom:6px;
border-bottom:1px solid var(--line-200);
}
.local-group__icon{
width:44px; height:44px; border-radius:12px;
background:var(--green-900); color:var(--gold-500);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.local-group__icon svg{ width:22px; height:22px; }
.local-group h3{
font-family:var(--font-display); color:var(--green-900);
font-size:1.05rem; line-height:1.25; letter-spacing:-.01em;
}
.local-group__chips{ display:flex; flex-direction:column; gap:0; }
.local-chip{
position:relative; display:flex; align-items:center;
min-height:44px; padding:11px 0 11px 16px;
border-bottom:1px solid var(--line-100);
font-size:.875rem; font-weight:600; line-height:1.4; color:var(--ink-700);
transition:color .18s ease, padding-left .18s cubic-bezier(.2,.7,.3,1);
}
.local-group__chips .local-chip:last-child{ border-bottom:0; }
.local-chip::before{
content:""; position:absolute; left:0; top:50%;
width:3px; height:0; border-radius:999px; background:var(--amber-500);
transform:translateY(-50%);
transition:height .2s cubic-bezier(.2,.7,.3,1);
}
.local-chip:hover,.local-chip:focus-visible{ color:var(--green-900); padding-left:22px; }
.local-chip:hover::before,.local-chip:focus-visible::before{ height:20px; }
.local-chip:focus-visible{ outline:3px solid var(--green-500); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
.local-chip,.local-chip::before{ transition:none; }
.local-chip:hover,.local-chip:focus-visible{ padding-left:16px; }
}
/* ============================================================
19. FOOTER — any number of columns
============================================================ */
.site-footer{
background:var(--green-950); color:rgba(255,255,255,.7);
padding-block:56px 28px;
padding-bottom:calc(28px + var(--callbar-h)); /* clears the call bar */
}
@media (min-width:769px){ .site-footer{ padding-bottom:28px; } }
/* justify-content is CENTER, not space-between. This row has exactly one
child (footer.php's single ), and space-between parks a lone flex item
at flex-start — which left the legal line hard against the left edge with
~700px of empty footer beside it at 1440px. text-align could not correct
it: the shrinks to its content width, so centring text inside a box
that is already at the left just centres it within itself.
If a second child is ever added here, center still reads correctly. */
.site-footer__legal{
padding-top:24px;
display:flex; flex-wrap:wrap; justify-content:center;
gap:12px; font-size:.9rem; color:rgba(255,255,255,.7); text-align:center;
}
.site-footer__legal a{ color:#fff; }
@media (max-width:600px){
.site-footer__legal{ flex-direction:column; }
}
/* ============================================================
20. STICKY CALL BAR (mobile)
============================================================ */
.call-bar{
position:fixed; bottom:0; left:0; width:100%; z-index:9999;
display:none; align-items:center; justify-content:center; gap:10px;
min-height:var(--callbar-h);
padding:15px 0 calc(15px + env(safe-area-inset-bottom));
background-color:var(--live-500); color:var(--paper-000);
font-size:20px; font-weight:700; text-align:center;
box-shadow:0 -2px 6px rgba(0,0,0,.2);
transition:transform .25s ease;
}
.call-bar:hover{ background-color:#218838; color:var(--paper-000); }
.call-bar:active{ background-color:#000; color:var(--paper-000); }
.call-bar svg{ width:22px; height:22px; flex-shrink:0; }
@media (max-width:768px){
.call-bar{ display:flex; }
body{ padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
}
/* Slid out of view (site.js §4) while another call button — the hero
CHIAMA, a mid-page CTA, the CTA band — is already on screen, so two
"call us" prompts are never visible at once. body keeps its
call-bar padding regardless: the bar still occupies its reserved
strip, it is just translated below it, so nothing reflows when it
toggles. */
.call-bar--hidden{ transform:translateY(100%); }
/* ============================================================
21. UTILITIES
============================================================ */
/* ============================================================
assets/css/prezzi.css
Sections shared by EVERY service page (and, later, the city
pages). Loaded by service pages only — never by the homepage,
which uses none of it.
Load order: global.css -> prezzi.css -> s. On phones each row folds
into a card and every cell labels itself from the data-label
attribute the source markup already carries, so nothing is
duplicated in the HTML to get the card view. The is
not hidden on mobile: it becomes a compact legend, which is
the only place the time ranges ("Lun–Ven, 8:00–17:00") are
written, and they would otherwise be lost.
============================================================ */
/* ---------- shared shell ---------- */
.pz-inner{ max-width:1240px; margin:0 auto; }
.pz-inner--narrow{ max-width:900px; }
.pz-section{ padding:clamp(60px,7vw,88px) 5vw; }
.pz-section--alt{ background:var(--paper-050); }
.pz-section--tint{ background:var(--green-050); }
.pz-head{ max-width:70ch; margin:0 0 clamp(28px,3.5vw,44px); }
.pz-head h2:where(:not(.h1-look)){
margin:0 0 14px;
color:var(--green-900);
font-size:clamp(1.5rem,1.25rem + 1.2vw,2.15rem);
line-height:1.14;
letter-spacing:-.02em;
}
.pz-lead{
margin:0;
max-width:62ch;
font-size:1.02rem;
line-height:1.7;
color:var(--ink-500);
}
.pz-note{
margin:clamp(22px,3vw,32px) 0 0;
padding:16px 20px;
border-left:3px solid var(--amber-500);
background:var(--amber-050);
border-radius:0 var(--radius-s) var(--radius-s) 0;
font-size:.95rem;
line-height:1.65;
color:var(--ink-700);
}
.pz-note strong{ color:var(--green-900); }
/* ============================================================
3.1 HERO
============================================================ */
.pz-hero{
position:relative;
overflow:hidden;
background:var(--green-050);
padding:clamp(40px,6vw,76px) 5vw clamp(44px,6vw,80px);
}
.pz-hero__shape{
position:absolute;
top:-48%; right:-10%;
width:min(60vw,680px); aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle at 35% 35%,
rgba(41,145,214,.16) 0%,
rgba(255,81,0,.08) 45%,
transparent 70%);
pointer-events:none;
z-index:0;
}
.pz-hero__inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; }
.pz-hero h1,
.pz-hero h2:where(.h1-look){
margin:0 0 18px;
max-width:18ch;
color:var(--green-900);
font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem);
line-height:1.05;
letter-spacing:-.025em;
}
.pz-hero__lead{
margin:0 0 clamp(24px,3vw,32px);
max-width:60ch;
font-size:clamp(1rem,.97rem + .2vw,1.1rem);
line-height:1.7;
color:var(--ink-700);
}
.pz-points{
display:flex;
flex-wrap:wrap;
gap:10px 12px;
margin:0 0 clamp(26px,3.4vw,36px);
padding:0;
}
.pz-point{
display:inline-flex;
align-items:center;
gap:9px;
padding:9px 16px 9px 13px;
border:1px solid var(--line-200);
border-radius:999px;
background:var(--paper-000);
font-size:.9rem;
font-weight:600;
line-height:1.3;
color:var(--green-900);
}
.pz-point::before{
content:"";
flex-shrink:0;
width:16px; height:16px;
border-radius:50%;
background:var(--green-700);
/* white tick, drawn rather than shipped as an asset */
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
linear-gradient(#000,#000);
-webkit-mask-composite:xor;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
linear-gradient(#000,#000);
mask-composite:exclude;
}
/* ============================================================
3.2 SERVICE TABS + PRICE TABLES
------------------------------------------------------------
One table visible at a time, switched by clicking a service
name — the behaviour the export has, rebuilt without JS.
Three same-name radios sit before the panels; each :checked
radio reveals its sibling panel and lights its own label.
site.js is untouched. The radios are moved off-screen rather
than display:none so they stay keyboard-reachable: arrow keys
move between services, exactly like a real tab strip.
The labels are NOT headings — the export carries these three
words as