/* AVV. GINO BELLEMO — sito personale — versione 0023 (base 0022) */
:root {
  --paper:#f8f7f3; --paper-2:#f0eee7; --paper-3:#e9e6dc; --white:#fffefa;
  --ink:#263231; --ink-2:#4e5955; --soft:#78817b; --line:#deddd5;
  --accent:#a38a63; --accent-dark:#8b714c; --forest:#344944;
  --font-body:Arial,Helvetica,sans-serif; --font-display:Georgia,'Times New Roman',serif; --font-numbers:"Source Serif 4",Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
::selection{background:#dac8a8;color:#152822}
.container{width:min(1260px,calc(100% - 104px));margin-inline:auto}
.skip-link{position:absolute;z-index:1000;top:-100px;left:12px;background:#fff;padding:12px 18px}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(248,247,243,.96);border-bottom:1px solid rgba(78,89,85,.13);backdrop-filter:blur(18px)}
.header-inner{height:94px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.wordmark{display:flex;flex-direction:column;line-height:1.04;min-width:200px;gap:7px}
.wordmark-top{font-size:9px;letter-spacing:.34em;color:var(--accent-dark);font-weight:bold}
.wordmark-name{font-family:var(--font-display);font-size:23px;letter-spacing:.01em;position:relative;left:-1px}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.7vw,38px)}
.nav-links>a{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;position:relative;padding:40px 0 38px;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.nav-links>a::after{content:"";position:absolute;bottom:27px;left:0;right:100%;height:1px;background:var(--accent);transition:right .3s var(--ease)}
.nav-links>a:hover,.nav-links>a[aria-current="page"]{color:var(--ink)}
.nav-links>a:hover::after,.nav-links>a[aria-current="page"]::after{right:0}
.menu-toggle{display:none}
.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:750;color:var(--accent-dark);line-height:1.5}
/* Spessore della lineetta coordinato alla sottolineatura del menu. */
.eyebrow-line{display:inline-block;width:27px;height:1px;background:var(--accent)}
.eyebrow-sep{color:#bfb5a2}
.hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;padding-block:76px 60px;min-height:680px}
/* Compensazione della geometria Home per allineare la dicitura alla quota delle pagine interne. */
.hero-copy{padding:20px 0 60px;transform:translateY(-8px)}
.hero h1{font-family:var(--font-display);font-size:clamp(40px,4.45vw,66px);font-weight:400;line-height:1.09;letter-spacing:-.043em;margin:28px 0 27px;max-width:680px;text-wrap:balance}
.hero h1 .heading-tail{display:block;color:#8a928b;font-size:.56em;line-height:1.28;letter-spacing:-.028em;margin-top:18px}
.hero-lead{font-size:15px;line-height:1.94;color:var(--ink-2);max-width:580px;margin:0}
.hero-actions{display:flex;align-items:center;gap:23px;margin-top:35px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:19px;min-height:50px;padding:14px 18px;font-size:11px;letter-spacing:.07em;font-weight:700;transition:background .2s,transform .25s var(--ease),color .2s;white-space:nowrap}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--forest);color:#fff}.button-primary:hover{background:#253b34}
.button-secondary{background:var(--ink);color:#fff}.button-secondary:hover{background:#3c514a}
.button-text{padding:10px 0;min-height:40px;border-bottom:1px solid var(--accent);color:var(--ink)}
.button-light{background:#f7f6ef;color:var(--ink)}.button-light:hover{background:#fff}
.button svg,.inline-link svg{flex-shrink:0}
.hero-art{height:555px;background:#e4e3d9;position:relative;overflow:hidden;isolation:isolate;border:1px solid #e1dfd5}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#fff9 1px,transparent 1px),linear-gradient(90deg,#fff9 1px,transparent 1px);background-size:96px 96px;opacity:.15}
.art-arch{position:absolute;width:480px;height:480px;border:1px solid rgba(87,103,92,.22);border-radius:50%;top:-230px;right:-170px;z-index:-1}
.art-arch-2{width:760px;height:760px;top:-370px;right:-322px;border-color:rgba(87,103,92,.12)}
.art-content{position:absolute;left:10%;right:10%;bottom:14%;top:14%;display:flex;flex-direction:column;justify-content:flex-end}
.art-brand{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:7px;align-items:flex-start;line-height:1.04}
.art-brand .wordmark-top{color:var(--accent-dark)}
.art-brand .wordmark-name{color:var(--ink);font-size:23px}
.art-hero-title{font-family:var(--font-display);font-size:clamp(50px,5.35vw,78px);font-weight:400;letter-spacing:-.06em;line-height:1.04;color:#455c52;transform:translateY(-10px)}
.art-hero-title i{font-weight:400;color:#ae9671}
.art-rule{width:100%;height:1px;background:#a2aaa0;margin:11px 0 22px}
.art-bottom{font-size:10px;letter-spacing:.055em;text-transform:uppercase;color:#53675d;line-height:1.8}.art-bottom span{color:var(--accent)}
.hero-bottom{position:absolute;bottom:27px;left:0;right:0;display:flex;align-items:center;gap:20px;color:#77847b;font-size:9px;font-weight:700;letter-spacing:.17em}
.hero-bottom .hero-locations{min-width:0;max-width:100%;line-height:1.65;letter-spacing:.12em}
.hero-bottom .hairline{height:1px;flex:1;min-width:14px;background:var(--line)}.hero-bottom a{white-space:nowrap;flex-shrink:0}
.section{padding:105px 0}.section-heading{margin-bottom:43px}.heading-row{display:flex;align-items:end;justify-content:space-between;gap:30px}.section h2:not(.display-title),.page-body h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.035em}
.section-heading h2{margin:18px 0 0;font-size:clamp(30px,3.7vw,50px);line-height:1.12}.inline-link{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.05em;border-bottom:1px solid var(--accent);padding-bottom:8px;white-space:nowrap}
.section-sectors{background:#f2f0e9}
.sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sector-card{padding:29px 30px 25px;min-height:335px;background:#fbfaf6;border:1px solid #e0ded4;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.sector-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px #2b373017;border-color:#c5b293}
.sector-card::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.sector-card:hover::before{transform:scaleY(1)}
.round-arrow{width:35px;height:35px;border:1px solid #d7d9cf;border-radius:50%;display:grid;place-items:center;color:#566b5e;transition:background .25s,color .25s}
.sector-card:hover .round-arrow{background:var(--forest);color:#fff}
.sector-card h3{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.17;letter-spacing:-.024em;margin:0 0 14px;max-width:100%}
.sector-card p{font-size:14.3px;line-height:1.68;color:var(--ink-2);margin:0;display:block;overflow:visible}
.sector-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--accent-dark);margin-top:auto;padding-top:23px;text-align:right}
.sector-foot-label{min-width:0}
.sector-foot .round-arrow{flex:0 0 35px;letter-spacing:normal}
.section-approach{background:#f8f7f3}
.approach-grid{display:grid;grid-template-columns:.93fr 1.07fr;gap:clamp(65px,10vw,160px);align-items:center}
.section-heading.no-kicker h2{margin-top:0}
.display-title{font-family:var(--font-display);font-size:clamp(33px,3.8vw,53px);line-height:1.16;letter-spacing:-.035em;font-weight:400;margin:25px 0}
.section-approach .display-title{margin-top:0}
.body-lead{color:var(--ink-2);font-size:14px;line-height:2;max-width:525px;margin:0 0 29px}
.steps-mini{border-top:1px solid var(--line)}
.step-mini{display:flex;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.step-mini>span:first-child{font-family:var(--font-numbers);font-size:21px;line-height:1.25;color:var(--accent-dark);width:28px;flex-shrink:0;font-weight:400;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.step-mini strong{font-size:15px;letter-spacing:.095em;font-weight:700;line-height:1.4}
.step-check{margin-left:auto;width:22px;height:22px;color:var(--accent-dark);flex-shrink:0}
.section-principle{background:#e6e9e2}
.principle-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.principle-left h2{font-size:clamp(30px,3.8vw,48px);line-height:1.15;margin:0 0 29px}
.principle-right{border-left:1px solid #bdc9bd;padding-left:64px;position:relative}
.quote-mark{font-family:var(--font-display);font-size:1.8em;line-height:0;color:#a8b8ab;font-weight:400;vertical-align:-.24em;display:inline} .quote-mark-open{margin-right:.08em} .quote-mark-close{margin-left:.08em}
.principle-right p{font-family:var(--font-display);font-size:clamp(22px,2.45vw,32px);line-height:1.55;letter-spacing:-.026em;margin:4px 0 27px}
.quote-credit{font-size:10px;font-weight:bold;letter-spacing:.16em;color:#738376}
.contact-band{background:#344940;color:#f7f6ef;padding:74px 0}.contact-band-inner{display:flex;justify-content:space-between;align-items:end;gap:40px}
.contact-band .eyebrow{color:#d6c4a4}.contact-band h2{font-family:var(--font-display);font-size:clamp(33px,4vw,54px);font-weight:400;letter-spacing:-.035em;line-height:1.1;margin:22px 0 0}.contact-band em{font-weight:400;color:#d9c5a3}
.site-footer{background:#273830;color:#d3dbd4;padding:50px 0 23px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-brand{font-family:var(--font-display);font-size:20px;letter-spacing:.03em;color:#bfb8a5}.footer-brand span{color:#f8f7f3}
.footer-rule{height:1px;background:#526359;margin-top:32px;margin-bottom:25px}
.footer-description{max-width:740px;font-size:12px;line-height:1.75;color:#b4c1b5}
/* Pagine interne */
/* Geometria unica dell’intestazione interna: la firma grafica e la dicitura rimangono ferme al cambio pagina. */
.page-intro{position:relative;display:grid;--signature-size:clamp(270px,30vw,416px);grid-template-columns:minmax(0,1fr) var(--signature-size);gap:clamp(20px,2.4vw,34px);align-items:start;min-height:405px;padding-block:88px 70px;border-bottom:1px solid var(--line)}
.page-intro-content{max-width:855px}
.page-intro .eyebrow,.hero-copy > .eyebrow{margin-left:2px}
.page-intro h1{font-family:var(--font-display);font-size:clamp(41px,4.65vw,69px);line-height:1.13;letter-spacing:-.044em;font-weight:400;margin:25px 0 24px;overflow-wrap:anywhere}
/* Titolo della pagina generale settori su una sola riga su desktop, senza cambiare corpo o font. */
.page-intro--sectors h1{white-space:nowrap;overflow-wrap:normal}
.page-deck{font-size:15px;line-height:1.92;color:var(--ink-2);max-width:815px;margin:0}.page-deck p{margin:0 0 14px}
/* Firma visiva condivisa: stessa composizione tipografica della Home, in formato compatto nelle pagine interne. */
.page-intro .signature-art{--signature-inner-size:calc(var(--signature-size) - 2px);width:var(--signature-size);height:var(--signature-size);aspect-ratio:1 / 1;justify-self:end;align-self:start;margin-top:13px;flex-shrink:0}
.signature-art .art-grid{background-size:23.08% 23.08%}
.signature-art .art-arch-1{width:86.54%;height:86.54%;top:-37.5%;right:-31.73%}
.signature-art .art-arch-2{width:134.62%;height:134.62%;top:-69.71%;right:-54.33%}
.signature-art .art-content{top:10%;bottom:12%;left:10%;right:10%}
.signature-art .art-brand{gap:calc(var(--signature-inner-size) * 0.0192)}
.signature-art .art-brand .wordmark-top{font-size:calc(var(--signature-inner-size) * 0.0288);letter-spacing:.27em}
.signature-art .art-brand .wordmark-name{font-size:calc(var(--signature-inner-size) * 0.0577);left:-1px}
.signature-art .art-hero-title{font-size:calc(var(--signature-inner-size) * 0.1298);letter-spacing:-.05em;line-height:1.03;transform:none}
.signature-art .art-rule{margin:calc(var(--signature-inner-size) * 0.0433) 0 calc(var(--signature-inner-size) * 0.0481)}
.signature-art .art-bottom{font-size:calc(var(--signature-inner-size) * 0.0279);letter-spacing:0;white-space:nowrap}
.page-body{padding:73px 0}.page-body.alternate{background:#f1efe8}
.content-two{display:grid;grid-template-columns: minmax(240px,.78fr) minmax(0,1.22fr);gap:clamp(55px,8vw,132px);align-items:start}
.aside-heading{position:relative}
.aside-heading h2{font-size:clamp(25px,3vw,40px);font-weight:400;line-height:1.22;margin:0;letter-spacing:-.03em}
.prose{font-size:14px;line-height:1.98;color:var(--ink-2);overflow-wrap:break-word}.prose p{margin:0 0 23px}.prose p:last-child{margin-bottom:0}
.timeline{max-width:1060px}
.timeline-item{display:grid;grid-template-columns:115px minmax(0,1fr);gap:52px;padding:43px 0 57px;border-top:1px solid var(--line)}
.timeline-item:last-child{border-bottom:1px solid var(--line)}
/* Metodo: la linea conclusiva del blocco introduttivo basta come separatore iniziale. */
.method-page .timeline-item:first-child{border-top:0;padding-top:43px}
.method-page .page-body{padding-top:0}
/* Il lieve rialzo compensa la differenza ottica fra le cifre e il titolo desktop. */
.timeline-no{font-family:var(--font-numbers);font-size:65px;font-weight:400;color:#bba783;line-height:1;position:relative;top:-.13em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.timeline-copy h2{margin:0 0 18px;font-size:clamp(25px,2.7vw,38px)}
.convenzione-note{margin-top:25px!important;background:#eaeae2;border-left:2px solid var(--accent);padding:25px 27px;color:var(--ink)!important}
.hub-section{background:transparent;padding-top:73px}
.breadcrumb{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:10px;width:max-content;margin-top:28px}
.breadcrumb svg{transform:rotate(180deg)}
.breadcrumb+h1{margin-top:22px}
.area-blocks{display:flex;flex-direction:column;gap:70px}
.area-block{padding-top:45px;border-top:1px solid var(--line)}.area-block:first-child{padding-top:0;border:0}
.others-section{background:var(--paper-2);padding:74px 0 92px}
.others-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.other-sector{display:flex;align-items:center;gap:21px;min-height:86px;padding:18px 24px;background:#faf9f5;border:1px solid #e2dfd5;transition:border-color .2s,transform .2s}
.other-sector:hover{border-color:var(--accent);transform:translateY(-2px)}
.other-sector>span{font-family:var(--font-display);font-size:24px;color:var(--accent)}
.other-sector strong{font-size:13px;font-weight:600;flex:1;line-height:1.4}.other-sector svg{color:#7c8a80}
.placeholder-notice{display:flex;gap:17px;padding:23px 24px;background:#eceae2;border:1px dashed #b9aa91;margin-top:35px;align-items:flex-start}
.placeholder-icon{border:1px solid #af9b7a;border-radius:50%;width:21px;height:21px;text-align:center;line-height:19px;flex-shrink:0;font-family:var(--font-display);color:#87704e}
.placeholder-notice strong{font-size:13px;color:var(--ink)}.placeholder-notice p{font-size:12px;line-height:1.8;margin:7px 0 0}
.where-prose p:nth-of-type(2){letter-spacing:.055em;color:var(--ink);line-height:2.2}
/* Recapiti professionali: struttura sobria, leggibile e utilizzabile da mobile. */
.contact-details{margin-top:36px;border-top:1px solid var(--line)}
.contact-details h3{font-family:var(--font-display);font-size:28px;letter-spacing:-.026em;font-weight:400;color:var(--ink);margin:28px 0 22px}
.contact-detail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;padding:17px 0;border-bottom:1px solid var(--line)}
.contact-detail dt{margin:0;color:var(--accent-dark);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.7}
.contact-detail dd{margin:0;color:var(--ink-2);font-size:14px;line-height:1.9;overflow-wrap:anywhere}
.contact-detail dd a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.contact-detail dd a:hover{color:var(--accent-dark)}
.contact-detail dd .contact-secondary{display:block}
.footer-contacts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;font-size:11px;color:#d3ded3;line-height:1.7}
.footer-contacts a{text-decoration:underline;text-decoration-color:#839887;text-underline-offset:3px}
.footer-contacts a:hover{color:white}
@media (max-width:560px){.contact-detail{grid-template-columns:1fr;gap:3px;padding:16px 0}.contact-details h3{font-size:26px}.contact-detail dd{font-size:13px}.footer-contacts{flex-direction:column;gap:3px}}
/* Internal intro: on desktop both pages use one fixed baseline, anchored to
   the shared signature size. Text stays fully visible (no clipping). On narrower
   screens the intro remains content-driven to preserve legibility. */
@media (min-width:950px){
 .page-intro{height:calc(var(--signature-size) + 172px);min-height:0}
 .method-page .page-intro{padding-bottom:0}
}
@media (max-width:1100px){
 .container{width:min(100% - 70px,1260px)}.hero{gap:30px}.hero-art{height:500px}.hero h1{font-size:clamp(42px,4.45vw,57px)}
 .sector-card{padding:25px;min-height:340px}.sector-card h3{font-size:27px}.sector-card p{font-size:13.5px;line-height:1.65}.nav-links{gap:18px}.nav-links>a{letter-spacing:.065em}
}
@media (max-width:820px){
 .container{width:calc(100% - 48px)}.header-inner{height:75px}.wordmark-name{font-size:21px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:43px;height:43px;border:1px solid var(--line);background:transparent;align-items:center;cursor:pointer}
 .menu-toggle span{width:20px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
 .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
 /* BELLEMO 0033: bordo superiore e inferiore del menu sostituiscono le due lineette esterne.
    Spostamento equivalente alla fascia di padding eliminata, senza muovere le voci rispetto alla pagina. */
 .nav-links{display:none;position:absolute;top:calc(100% + 19px);left:auto;right:18px;transform:none;
   width:max-content;max-width:calc(100vw - 36px);max-height:calc(100svh - 104px);overflow-y:auto;overflow-x:hidden;
   background:var(--paper);border:1px solid var(--line);border-radius:22px;
   box-shadow:0 16px 32px #14241d47;padding:0 18px;
   flex-direction:column;align-items:stretch;gap:0}
 .nav-links.open{display:flex}
 .nav-links>a{display:flex;align-items:center;justify-content:flex-start;height:52px;min-height:52px;
   padding:0 2px;border:0;font-size:12px;line-height:1.1;position:relative;white-space:nowrap}
 /* Solo i quattro separatori interni: bordo pannello al posto delle lineette esterne. */
 .nav-links>a:not(:first-child)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
   background:linear-gradient(90deg,rgba(188,157,112,.70) 0%,rgba(121,138,131,.36) 65%,rgba(121,138,131,0) 100%)}
 /* La sottolineatura di selezione resta indipendente dalla centratura delle voci. */
 .nav-links>a::after{bottom:9px;left:0;width:39px;right:auto;transform:scaleX(0);transform-origin:left}
 .nav-links>a:hover::after,.nav-links>a[aria-current="page"]::after{transform:scaleX(1)}
 .hero{grid-template-columns:1fr;gap:34px;padding-block:58px 66px;min-height:unset}.hero-copy{padding:0}.hero h1{max-width:750px;font-size:clamp(44px,7vw,64px)}.hero-art{height:420px}.art-hero-title{font-size:70px}.hero-bottom{bottom:21px}
 .sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approach-grid,.principle-grid{grid-template-columns:1fr;gap:55px}.principle-right{padding-left:38px}.contact-band-inner{align-items:start;flex-direction:column}.section{padding:75px 0}
 .hero-copy{transform:translateY(7px)}.page-intro{--signature-size:clamp(185px,28vw,230px);grid-template-columns:minmax(0,1fr) var(--signature-size);gap:20px;min-height:unset;padding:65px 0}.page-intro--sectors h1{white-space:normal;overflow-wrap:anywhere}.page-intro .signature-art{margin-top:36px}
 .content-two{grid-template-columns:1fr;gap:25px}.aside-heading h2{font-size:34px}.page-body{padding:60px 0}.area-blocks{gap:50px}
}
@media (max-width:560px){
 .container{width:calc(100% - 38px)}.wordmark{min-width:unset}.wordmark-top{font-size:8px}.wordmark-name{font-size:18px}
 .hero{padding-top:45px;padding-bottom:67px;gap:28px}.hero h1{font-size:clamp(39px,10.1vw,49px);margin:21px 0 19px}.hero h1 .heading-tail{font-size:.60em;margin-top:13px}.hero-lead{font-size:13px;line-height:1.82}
 .hero-actions{gap:12px;margin-top:28px}.button{font-size:10px;min-height:47px;padding:13px 14px}.button-text{padding:10px 0}.hero-art{height:338px}.art-content{left:9%;right:10%;top:10%;bottom:13%}.art-hero-title{font-size:clamp(47px,12vw,64px)}.art-bottom{font-size:8px}.art-brand .wordmark-name{font-size:20px}.art-brand .wordmark-top{font-size:8px}
 .hero-bottom{font-size:8px;column-gap:10px;row-gap:6px;flex-wrap:wrap;bottom:11px}
 .hero-bottom .hero-locations{flex:0 0 100%;font-size:8px;letter-spacing:.055em;line-height:1.75}
 .hero-bottom .hairline{flex:1}
 .section{padding:64px 0}.heading-row{display:block}.section-heading{margin-bottom:27px}.section-heading h2{font-size:36px}.inline-link{margin-top:20px}.sector-grid{grid-template-columns:1fr;gap:12px}.sector-card{min-height:255px;padding:23px}.sector-card h3{font-size:26px;margin:0 0 13px}.sector-card p{font-size:12.7px;line-height:1.75}.sector-foot{padding-top:18px;gap:9px}
 .display-title{font-size:36px}.step-mini{gap:15px;padding:17px 0}.step-check{width:20px;height:20px}.step-mini strong{font-size:13px}.principle-right{padding-left:23px}.principle-right p{font-size:24px}.contact-band{padding:56px 0}.contact-band h2{font-size:37px}.footer-row{align-items:start}.footer-brand{font-size:18px}.footer-description{font-size:11px} .hero-copy{transform:translateY(3px)}.page-intro{--signature-size:min(300px, calc(100vw - 38px));grid-template-columns:1fr;padding-top:48px;padding-bottom:48px;gap:26px}.page-intro .signature-art{display:block;width:var(--signature-size);height:var(--signature-size);aspect-ratio:1 / 1;justify-self:center;margin-top:0}.page-intro--sectors h1{white-space:normal;overflow-wrap:anywhere}.page-intro h1{font-size:clamp(39px,10vw,53px);margin:23px 0 19px}.page-deck{font-size:13px;line-height:1.8}.page-body{padding:53px 0}.aside-heading h2{font-size:31px}.prose{font-size:13px;line-height:1.9}.prose p{margin-bottom:18px}
 .timeline-item{grid-template-columns:56px minmax(0,1fr);gap:15px;padding:29px 0 38px}
 .method-page .timeline-item:first-child{padding-top:29px}.timeline-no{font-size:46px;top:0}.timeline-copy h2{font-size:24px;margin-top:0}.convenzione-note{padding:18px;margin-top:20px!important}
 .area-blocks{gap:43px}.area-block{padding-top:34px}.others-grid{grid-template-columns:1fr}.other-sector{min-height:68px}.other-sector strong{font-size:12px}.others-section{padding:56px 0}
 .placeholder-notice{padding:16px;gap:12px}
}
/* Animazioni e transizioni sempre come nella 0015 con effetti visivi attivati; nessuna soppressione per prefers-reduced-motion. */

/* BELLEMO — versione 0014: nuova identità, aree e contenuti approvati */
.site-header{background:#273830;border-bottom:1px solid rgba(240,238,231,.16);color:#f5f2e8}
.site-header .wordmark{min-width:242px;gap:5px}
.site-header .wordmark-top{color:#c6ae82;font-size:10px;letter-spacing:.25em}
.site-header .wordmark-name{color:#f8f7f3;font-size:26px;letter-spacing:.004em;left:0}
.site-header .nav-links>a{color:#d1d9d4}
.site-header .nav-links>a:hover,.site-header .nav-links>a[aria-current="page"]{color:#fff}
.site-header .nav-links>a::after{background:#bc9d70;height:2px}
.site-header .menu-toggle{border-color:#71857d}
.site-header .menu-toggle span{background:#f8f7f3}
.site-header .nav-links{gap:clamp(14px,2vw,28px)}
.site-header .nav-links>a{letter-spacing:.06em}
.hero-bottom{flex-wrap:wrap;gap:5px 18px;bottom:22px}
.hero-locations-label{flex-basis:100%;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:none;color:var(--accent-dark)}
.hero-bottom .hero-locations{flex:0 1 auto}
/* Brand nel riquadro Ulpiano, separato dalla navigazione */
.art-brand .wordmark-top{font-size:10px;letter-spacing:.23em}
.art-brand .wordmark-name{font-size:25px;letter-spacing:-.01em}
.hero-art:not(.thematic-art) .art-content{top:10%;bottom:12%;justify-content:flex-end}
.art-latin-quote{font-family:var(--font-display);font-weight:400;font-size:clamp(23px,2.45vw,37px);line-height:1.18;letter-spacing:-.028em;color:#40564c;font-style:italic;max-width:100%;margin:0 0 8px}
.art-rule{margin:12px 0 15px}
.art-translation{font-family:var(--font-display);font-size:clamp(14px,1.15vw,18px);line-height:1.38;color:#56675d;margin:0 0 11px}
.art-source{font-size:11px;line-height:1.5;color:#8b7757}
.signature-art .art-brand .wordmark-top{font-size:calc(var(--signature-inner-size)*.028)}
.signature-art .art-brand .wordmark-name{font-size:calc(var(--signature-inner-size)*.064)}
.signature-art .art-latin-quote{font-size:calc(var(--signature-inner-size)*.065);line-height:1.12}
.signature-art .art-translation{font-size:calc(var(--signature-inner-size)*.038);line-height:1.25;margin:0 0 6px}
.signature-art .art-source{font-size:calc(var(--signature-inner-size)*.029)}
/* Introduzione estesa nella pagina Profilo e nel Metodo: niente altezze fisse che tagliano i paragrafi */
.page-intro:has(.page-deck p){height:auto;min-height:calc(var(--signature-size) + 172px)}
.page-deck p{margin:0 0 13px}
.page-deck p:last-child{margin-bottom:0}
/* Immagini tematiche delle sei aree: stessa geometria del riquadro precedente */
.thematic-art{background:var(--paper-3);border:1px solid #d5d3c9}
.thematic-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.73) contrast(.95)}
/* Il nuovo sesto riquadro condivide tutti gli stili dei cinque già esistenti */
.section-value{padding:78px 0 92px;background:#fbfaf6}
.value-intro{display:grid;grid-template-columns:1fr 1.08fr;gap:78px;align-items:start;padding-bottom:45px;border-bottom:1px solid var(--line)}
.value-kicker{font-size:11px;letter-spacing:.2em;color:var(--accent-dark);font-weight:700}
.value-intro h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.035em;font-size:clamp(32px,3.1vw,47px);line-height:1.14;margin:16px 0 0}
.value-intro p{font-size:15px;line-height:1.9;color:var(--ink-2);margin:0}
.value-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 66px;padding-top:48px}
.value-reason{padding-left:23px;border-left:2px solid #b29c79}
.value-reason h3{font-family:var(--font-display);font-size:25px;font-weight:400;letter-spacing:-.023em;margin:0 0 12px;line-height:1.18}
.value-reason p{font-size:14px;line-height:1.82;margin:0;color:var(--ink-2)}
.value-closing{font-family:var(--font-display);font-size:clamp(20px,2vw,27px);line-height:1.42;letter-spacing:-.018em;margin:48px 0 0;padding:32px 0 0;border-top:1px solid var(--line);color:#485d52}
.prose .detail-bullets{margin:0 0 24px;padding-left:21px}
.prose .detail-bullets li{margin-bottom:15px}
.prose .detail-bullets li::marker{color:var(--accent-dark)}
.footer-brand{display:flex;flex-direction:column;gap:6px}
.footer-brand-overline{font-family:var(--font-body);font-size:10px;letter-spacing:.22em;font-weight:700;color:#c8b18d!important}
.footer-brand-name{font-family:var(--font-display);font-size:23px;letter-spacing:0;color:#f8f7f3!important}
@media (max-width:1100px){.site-header .wordmark{min-width:206px}.site-header .wordmark-name{font-size:22px}.site-header .nav-links{gap:13px}}
@media (max-width:820px){
 .site-header .nav-links{background:#273830;border-color:rgba(193,169,131,.67);
   box-shadow:0 16px 32px #14241d47;gap:0}
 .site-header .nav-links>a{color:#d7dcd4}
 .site-header .nav-links>a:not(:first-child)::before{background:linear-gradient(90deg,rgba(198,174,130,.68) 0%,rgba(113,133,125,.39) 65%,rgba(113,133,125,0) 100%)}
 .site-header .wordmark-name{font-size:23px}
 .section-value{padding:70px 0}.value-intro{gap:30px}.value-reasons{gap:30px}
 .hero-bottom{bottom:16px}
}
@media (max-width:560px){
 .site-header .wordmark{min-width:unset;gap:4px}.site-header .wordmark-name{font-size:20px}.site-header .wordmark-top{font-size:8px}
 .art-latin-quote{font-size:clamp(22px,6.7vw,32px)}.art-translation{font-size:15px}.art-source{font-size:10px}
 .signature-art .art-latin-quote{font-size:calc(var(--signature-inner-size)*.065)}
 .value-intro{grid-template-columns:1fr;gap:23px;padding-bottom:30px}
 .value-reasons{grid-template-columns:1fr;gap:25px;padding-top:34px}
 .value-reason h3{font-size:23px}.value-reason p{font-size:13px}
 .value-closing{font-size:21px;margin-top:36px}
 .section-value{padding:60px 0}
 .hero-bottom .hero-locations{flex-basis:100%}
 .hero-bottom{bottom:9px}
 .page-intro:has(.page-deck p){min-height:unset}
}


/* BELLEMO — versione 0015: presentazione Home e quattro punti secondo mockup approvato. */
.section-value{padding:78px 0 90px}
.section-value .value-presentation{
  border-bottom:1px solid var(--line);
  padding-bottom:38px;
  margin-bottom:47px;
}
.section-value .value-presentation p{
  max-width:1190px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(20px,2.05vw,29px);
  font-weight:400;
  line-height:1.47;
  letter-spacing:-.013em;
  margin:0;
}
.section-value .value-heading{margin:0 0 39px}
.section-value .value-heading h2{
  font-family:var(--font-display);
  font-size:clamp(34px,3.5vw,52px);
  line-height:1.17;
  font-weight:400;
  letter-spacing:-.035em;
  margin:0;
}
.section-value .value-reasons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:60px;
  row-gap:46px;
  padding:0;
}
.section-value .value-reason{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:17px;
  padding:0;
  border:0;
  min-width:0;
  align-items:start;
}
.section-value .value-reason-icon{
  width:70px;
  height:70px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  color:#a5834f;
  padding-top:2px;
}
.section-value .value-icon{width:52px;height:52px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.section-value .value-reason-copy{padding-left:22px;border-left:1px solid #b79a70;min-height:154px}
.section-value .value-reason h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(23px,2vw,29px);
  line-height:1.16;
  margin:0 0 13px;
  letter-spacing:-.022em;
}
.section-value .value-reason p{
  font-family:var(--font-display);
  color:var(--ink-2);
  font-size:clamp(16px,1.24vw,18px);
  line-height:1.62;
  margin:0;
}
.section-value .value-closing{margin-top:52px}
@media(max-width:1100px){
 .section-value .value-reasons{column-gap:30px;row-gap:32px}
 .section-value .value-reason{grid-template-columns:55px minmax(0,1fr);gap:8px}
 .section-value .value-reason-icon{width:52px;height:55px}
 .section-value .value-icon{width:42px;height:42px}
 .section-value .value-reason-copy{padding-left:16px}
}
@media(max-width:820px){
 .section-value .value-presentation{padding-bottom:30px;margin-bottom:33px}
 .section-value .value-heading{margin-bottom:34px}
 .section-value .value-reasons{grid-template-columns:1fr;row-gap:33px}
 .section-value .value-reason{grid-template-columns:69px minmax(0,1fr);gap:13px}
 .section-value .value-reason-icon{width:60px;height:62px}
 .section-value .value-icon{width:49px;height:49px}
 .section-value .value-reason-copy{padding-left:20px;min-height:0}
}
@media(max-width:560px){
 .section-value{padding:57px 0 62px}
 .section-value .value-presentation p{font-size:20px;line-height:1.5}
 .section-value .value-heading h2{font-size:clamp(34px,8.5vw,42px)}
 .section-value .value-reasons{row-gap:29px}
 .section-value .value-reason{grid-template-columns:42px minmax(0,1fr);gap:10px}
 .section-value .value-reason-icon{width:40px;height:42px}
 .section-value .value-icon{width:34px;height:34px;stroke-width:2.2}
 .section-value .value-reason-copy{padding-left:13px}
 .section-value .value-reason h3{font-size:23px;margin-bottom:10px}
 .section-value .value-reason p{font-size:16px;line-height:1.59}
 .section-value .value-closing{margin-top:41px}
}


/* BELLEMO 0016 TEST: cinque correzioni approvate (senza cambi a testi professionali). */
/* La chiusura della sezione Home e la presentazione iniziale hanno identica tipografia. */
.section-value .value-closing{
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(20px,2.05vw,29px);
  font-weight:400;
  line-height:1.47;
  letter-spacing:-.013em;
}
/* Evita un'ultima riga composta soltanto da “io.”, anche a larghezze intermedie. */
.section-value .value-closing-tail{white-space:nowrap}
/* La pagina Metodo recupera il layout precedente alle revisioni testuali: le stesse
   linee e lo stesso respiro sopra i passi 01–06 della versione 0013. */
.method-page .page-intro:has(.page-deck p){min-height:unset}
@media (min-width:950px){
  .method-page .page-intro:has(.page-deck p){height:calc(var(--signature-size) + 172px);min-height:0;padding-bottom:0}
}
@media (max-width:560px){
  .section-value .value-closing{font-size:20px;line-height:1.5}
}


/* BELLEMO 0017 — allineamento visivo verificato al pixel nella timeline Metodo.
   Ogni fascia mantiene lo stesso padding totale della 0016: si trasferisce
   soltanto spazio dal basso verso l'alto, senza spostare i separatori.
   La quarta fase include un riquadro con padding inferiore proprio. */
@media (min-width:561px){
  .method-page .timeline-item{padding-top:57px;padding-bottom:43px}
  .method-page .timeline-item:first-child{padding-top:57px}
  .method-page .timeline-item:nth-child(4){padding-top:69px;padding-bottom:31px}
}
@media (max-width:560px){
  .method-page .timeline-item{padding-top:36px;padding-bottom:31px}
  .method-page .timeline-item:first-child{padding-top:36px}
  .method-page .timeline-item:nth-child(4){padding-top:45px;padding-bottom:22px}
}
/* Con una sola area specifica, nessun titolo duplicato: il contenuto parte
   direttamente dopo la linea di separazione, con una colonna di lettura. */
.area-block--single{display:block}
.area-block--single > .prose{max-width:970px}

/* BELLEMO 0018 — Tre modifiche richieste, senza alterazioni ai testi.
   1) Dicitura iniziale più vicina del 20% alla barra verde.
   2) Nelle intestazioni interne, la firma/immagine di destra inizia alla
      quota del titolo (dopo la dicitura) e termina esattamente sul divisorio.
      Il divisorio mantiene la quota originaria: compensazione del padding.
   3) Nella pagina Metodo, spostamento ottico di -10px di ciascuna fase,
      senza toccare i separatori né l'altezza totale delle fasce. */
@media (min-width:1101px){
  .hero-copy{transform:translateY(-26.8px)}
}
@media (min-width:821px) and (max-width:1100px){
  .hero-copy{transform:translateY(-30px)}
}
@media (min-width:561px) and (max-width:820px){
  .hero-copy{transform:translateY(-7.2px)}
}
@media (max-width:560px){
  .hero-copy{transform:translateY(-7.8px)}
}
/* Desktop e tablet a due colonne: bordo inferiore del pannello = linea della pagina. */
@media (min-width:821px){
  .page-intro{padding-top:69.2px;padding-bottom:88.8px}
  .page-intro .hero-art{
    position:absolute;top:calc(69.2px + 40px);right:0;bottom:0;
    width:var(--signature-size);height:auto;aspect-ratio:auto;
    margin-top:0;align-self:auto;justify-self:auto;
  }
  .page-intro .signature-art .art-content{
    top:8%;bottom:8%;justify-content:center;
    padding-top:calc(var(--signature-inner-size) * .12);
  }
}
@media (min-width:561px) and (max-width:820px){
  .page-intro{padding-top:50.8px;padding-bottom:79.2px}
  .page-intro .hero-art{
    position:absolute;top:calc(50.8px + 40px);right:0;bottom:0;
    width:var(--signature-size);height:auto;aspect-ratio:auto;
    margin-top:0;align-self:auto;justify-self:auto;
  }
  .page-intro .signature-art .art-content{
    top:7%;bottom:7%;justify-content:center;
    padding-top:calc(var(--signature-inner-size) * .13);
  }
}
/* Telefono: il pannello resta sotto il testo, raggiungendo il divisorio
   originario; la maggior altezza sostituisce esattamente il padding tolto. */
@media (max-width:560px){
  .page-intro{padding-top:37.2px;padding-bottom:0}
  .page-intro .hero-art{
    width:var(--signature-size);height:calc(var(--signature-size) + 58.8px);
    aspect-ratio:auto;position:relative;margin-top:0;align-self:auto;
  }
  .page-intro .signature-art .art-content{
    top:8%;bottom:8%;justify-content:center;
    padding-top:calc(var(--signature-inner-size) * .11);
  }
}
/* Il Metodo mantiene tutte le linee ferme: la somma dei padding non cambia. */
@media (min-width:561px){
  .method-page .timeline-item{padding-top:47px;padding-bottom:53px}
  .method-page .timeline-item:first-child{padding-top:47px}
  .method-page .timeline-item:nth-child(4){padding-top:59px;padding-bottom:41px}
}
@media (max-width:560px){
  .method-page .timeline-item{padding-top:26px;padding-bottom:41px}
  .method-page .timeline-item:first-child{padding-top:26px}
  .method-page .timeline-item:nth-child(4){padding-top:35px;padding-bottom:32px}
}
/* Sui tablet, quando il testo è corto, preserva la quota del divisorio
   che nella 0017 era determinata anche dall'altezza del riquadro quadrato. */
@media (min-width:561px) and (max-width:820px){
  .page-intro{min-height:calc(var(--signature-size) + 166px)}
}
/* Intervallo tablet/desktop: la firma era parte dell'altezza intrinseca;
   mantenerne l'ingombro minimo preserva anche qui il separatore originale. */
@media (min-width:821px) and (max-width:949px){
  .page-intro{min-height:calc(var(--signature-size) + 172px)}
}
/* A due colonne sul tablet la firma scende rispetto alla quota 0017,
   anziché risalire per effetto della riduzione dello spazio superiore. */
@media (min-width:561px) and (max-width:820px){
  .page-intro .hero-art{top:calc(50.8px + 52px)}
}
/* Piccola compensazione della Home alle larghezze desktop intermedie:
   il blocco centrato nella griglia ha un margine intrinseco variabile. */
@media (min-width:1101px) and (max-width:1320px){
  .hero-copy{transform:translateY(-30px)}
}


/* BELLEMO 0019 — riquadri riallineati e staccati dal divisorio.
   Le linee inferiori restano immobili rispetto alla versione 0018:
   pannello giù di 10px, distacco finale esattamente di 20px.
   Nessun cambiamento a caratteri, interlinea o geometria della timeline. */
@media (min-width:821px){
  .page-intro .hero-art{top:calc(69.2px + 50px);bottom:20px}
}
@media (min-width:561px) and (max-width:820px){
  .page-intro .hero-art{top:calc(50.8px + 62px);bottom:20px}
}
@media (max-width:560px){
  .page-intro{gap:36px;padding-bottom:20px}
  .page-intro .hero-art{height:calc(var(--signature-size) + 28.8px)}
}
/* Nel Profilo il nuovo testo più conciso non richiede l'ampio padding
   inferiore ereditato: si preserva così la medesima quota del divisorio
   delle altre pagine dove la larghezza consente il layout uniforme. */
@media (min-width:821px){
  .page-intro:has(.page-deck--profile){padding-bottom:20px}
}


/* BELLEMO 0020 — ripristino integrale dei testi dell'email definitiva 21/10/2026.
   Uniformazione della quota del separatore Home/Interni sul desktop.
   Le righe delle città rimangono sopra il separatore, non sovrapposte. */
@media (min-width:821px) {
  .hero-bottom {bottom:40px;}
  .hero-bottom .hairline {
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    width:100%;height:1px;min-width:0;flex:none;
  }
  /* Default: dalla sezione Home quando il titolo occupa meno righe. */
  .page-intro, .page-intro:has(.page-deck p),
  .method-page .page-intro:has(.page-deck p) {
    box-sizing:border-box;height:661px;min-height:661px;max-height:none;
    padding-top:69.2px;padding-bottom:88.8px;
  }
  .page-intro:has(.page-deck--profile){padding-bottom:88.8px;}
  /* I riquadri non cambiano larghezza; il margine inferiore riproduce
     il distacco fra immagine Home e linea delle città. */
  .page-intro .hero-art {top:calc(69.2px + 50px);bottom:30px;right:0;
    height:auto;width:var(--signature-size);margin-top:0;position:absolute;
    aspect-ratio:auto;}
}
@media (min-width:821px) and (max-width:1100px) {
  .page-intro, .page-intro:has(.page-deck p),
  .method-page .page-intro:has(.page-deck p){height:650px;min-height:650px;}
  .page-intro .hero-art{bottom:52px;}
}
@media (min-width:1421px) {
  .page-intro,.page-intro:has(.page-deck p),
  .method-page .page-intro:has(.page-deck p){
    height:clamp(725px,calc(644px + 5.625vw),734px);
    min-height:clamp(725px,calc(644px + 5.625vw),734px);
  }
  .page-intro .hero-art{bottom:64px;}
}
/* Su schermi piccoli l'intestazione si impagina naturalmente: il contenuto
   resta leggibile e il riquadro non viene stirato a tutta l'altezza della Home. */
@media (max-width:820px){
  .page-intro .hero-art{max-height:none;}
}
@media (max-width:820px){
  /* Anche con layout impilato la linea resta sotto le città, non sul testo. */
  .hero-bottom .hairline{
    position:absolute;left:0;right:0;top:calc(100% + 5px);
    width:100%;height:1px;min-width:0;flex:none;
  }
}
/* In sorgente i quattro motivi riprendono letteralmente le minuscole dopo i due
   punti dell'email; la prima lettera si mostra maiuscola nel riquadro autonomo. */
.value-reason-copy p::first-letter{text-transform:uppercase}
/* Correzione ottica alle soglie in cui il titolo della Home occupa un numero
   differente di righe. Replica la quota reale della stessa linea. */
@media (min-width:821px) and (max-width:849px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){height:742px;min-height:742px}
}
@media (min-width:850px) and (max-width:909px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){height:713px;min-height:713px}
}
@media (min-width:910px) and (max-width:939px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){height:667px;min-height:667px}
}
@media (min-width:940px) and (max-width:1100px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){height:650px;min-height:650px}
}
@media (min-width:1101px) and (max-width:1409px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){height:661px;min-height:661px}
}
@media (min-width:1410px){
 .page-intro,.page-intro:has(.page-deck p),.method-page .page-intro:has(.page-deck p){
   height:clamp(718px,calc(420px + 21.15vw),733.6px);
   min-height:clamp(718px,calc(420px + 21.15vw),733.6px);
 }
 .page-intro .hero-art{bottom:64px}
}
/* Il testo originale del Profilo non si abbrevia. Si recupera una piccola
   parte della spaziatura della griglia (non della foto) per evitare l'ultima
   parola isolata, senza toccare font, misura o interlinea. */
@media (min-width:561px){
  .page-deck--profile{
    max-width:none;
    width:calc(100% + clamp(11px,1.2vw,18px));
  }
}

/* BELLEMO 0022 — intros delle pagine interne più compatte, secondo il
   secondo screenshot approvato il 23/10/2026. Nessuna modifica alla Home.
   Il bordo superiore di firma/fotografia non si sposta; soltanto il bordo
   inferiore e il divisorio della sezione risalgono insieme. Per costruzione
   l'intero contenuto successivo risale della medesima quantità.
   Su schermi intermedi la riduzione è limitata per non sovrapporre il testo
   integrale del Profilo o i tre capoversi originali del Metodo. */
@media (min-width:1101px) and (max-width:1409px){
  .page-intro,
  .page-intro:has(.page-deck p),
  .method-page .page-intro:has(.page-deck p){
    height:616px;
    min-height:616px;
  }
}
@media (min-width:1410px){
  .page-intro,
  .page-intro:has(.page-deck p),
  .method-page .page-intro:has(.page-deck p){
    height:calc(clamp(718px,calc(420px + 21.15vw),733.6px) - 96px);
    min-height:calc(clamp(718px,calc(420px + 21.15vw),733.6px) - 96px);
  }
}

/* BELLEMO 0023 — maggior respiro fra testo e pannello nelle pagine interne.
   La Home rimane esclusa. Nella pagina Profilo si elimina inoltre la
   precedente estensione del testo verso il pannello, che annullava il distacco. */
@media (min-width:821px){
  .page-intro{column-gap:calc(clamp(20px,2.4vw,34px) + 30px)}
}
@media (min-width:561px) and (max-width:820px){
  .page-intro{column-gap:50px}
}
@media (min-width:561px){
  .page-intro .page-deck--profile{width:100%;max-width:100%}
}
/* Impaginazione delle ultime righe del Profilo senza alterare parole o interlinea. */
.page-intro .page-deck--profile p{text-wrap:pretty}
.page-intro .page-deck--profile p:last-child{text-wrap:pretty}

/* BELLEMO 0025 — monogramma GB approvato. Solo header e footer.
   La colonna/logo parte dal margine utile preesistente e il testo scorre a destra. */
.site-header .wordmark{display:inline-flex;flex-direction:row;align-items:center;gap:11px;min-width:0;flex-shrink:0}
.site-header .brand-type{display:flex;flex-direction:column;justify-content:center;gap:5px;line-height:1.04;min-width:0}
.brand-symbol{display:block;object-fit:contain;flex-shrink:0;width:62px;height:55px}
.site-footer .footer-brand{display:inline-flex;flex-direction:row;align-items:center;gap:13px}
.site-footer .footer-brand-type{display:flex;flex-direction:column;justify-content:center;gap:6px;line-height:1.12}
.site-footer .brand-symbol{width:66px;height:59px}
@media (max-width:1100px){
  .site-header .brand-symbol{width:52px;height:47px}
  .site-header .wordmark{gap:9px}
}
@media (max-width:820px){
  .site-header .brand-symbol{width:50px;height:45px}
  .header-inner{gap:14px}
}
@media (max-width:560px){
  .site-header .brand-symbol{width:43px;height:39px}
  .site-header .wordmark{gap:8px}
  .header-inner{gap:9px}
  .site-header .wordmark-name{font-size:20px}
  .site-header .wordmark-top{font-size:8px}
  .site-footer .brand-symbol{width:52px;height:47px}
  .site-footer .footer-brand{gap:10px}
}
@media (max-width:350px){
  .site-header .brand-symbol{width:38px;height:35px}
  .site-header .wordmark-name{font-size:18px}
  .site-header .wordmark-top{font-size:7px}
  .site-header .wordmark{gap:6px}
  .site-footer .footer-brand-name{font-size:21px}
}


/* BELLEMO 0026 — marchio GB approvato: leggibilità e centratura ottica. */
.site-header .brand-symbol{width:72px;height:64px}
.site-footer .brand-symbol{width:76px;height:68px}
.site-header .brand-type,.site-footer .footer-brand-type{position:relative;top:4px}
@media (max-width:1100px){.site-header .brand-symbol{width:61px;height:55px}}
@media (max-width:820px){.site-header .brand-symbol{width:56px;height:51px}}
@media (max-width:560px){
  .site-header .brand-symbol{width:48px;height:43px}
  .site-footer .brand-symbol{width:59px;height:53px}
  .site-header .brand-type,.site-footer .footer-brand-type{top:2px}
}
@media (max-width:350px){
  .site-header .brand-symbol{width:41px;height:37px}
  .site-footer .brand-symbol{width:53px;height:48px}
}
/* Corpo descrittivo uniforme: stessa misura e ritmo delle sezioni inferiori. */
.page-intro .page-deck{font-size:14px;line-height:1.98}
.page-intro .page-deck p{margin:0 0 23px}
.page-intro .page-deck p:last-child{margin-bottom:0}
@media (max-width:560px){
  .page-intro .page-deck{font-size:13px;line-height:1.9}
  .page-intro .page-deck p{margin-bottom:18px}
  .page-intro .page-deck p:last-child{margin-bottom:0}
}
/* Trattamento mirato della fine del capoverso, senza bilanciarne le righe. */
.page-intro .page-deck--profile p:last-child{text-wrap:pretty}
.page-intro .no-orphan{white-space:nowrap}
/* Geometria del riquadro fissata al primo paint dal CSS anziché ricalcolata
   in JavaScript durante il caricamento: nessuno scatto fra le pagine. */
@media (min-width:821px){
  .page-intro .hero-art{height:auto}
}


/* BELLEMO 0027 — quattro icone approvate, stessa altezza e stesso peso dei
   tratti; i disegni provengono dai file originari dell'utente. */
.section-value .value-icon{
  display:block; width:52px; height:52px; flex:0 0 52px;
  object-fit:contain; stroke:none;
}
@media (max-width:1100px){.section-value .value-icon{width:42px;height:42px;flex-basis:42px}}
@media (max-width:820px){.section-value .value-icon{width:49px;height:49px;flex-basis:49px}}
@media (max-width:560px){.section-value .value-icon{width:34px;height:34px;flex-basis:34px}}

/* Tutte le pagine interne: il pannello si allunga soltanto verso il basso;
   la sommità, la larghezza e la linea di separazione non si muovono. */
@media (min-width:821px) and (max-width:1100px){
  .page-intro .hero-art{bottom:36px}
}
@media (min-width:1101px) and (max-width:1409px){
  .page-intro .hero-art{bottom:14px}
}
@media (min-width:1410px){
  .page-intro .hero-art{bottom:48px}
}
/* Pannello firma Ulpiano: logo a sinistra, tutto il contenuto più centrato
   verticalmente. Il riquadro della Home e le foto delle aree restano intatti. */
.page-intro .signature-art .art-content{
  top:7%;bottom:7%;left:10%;right:10%;padding-top:0;
  display:flex;flex-direction:column;justify-content:center;
}
.page-intro .signature-art .art-brand{
  position:relative;top:auto;left:auto;display:flex;align-items:center;
  flex-direction:row;gap:calc(var(--signature-inner-size)*.023);
  margin-bottom:calc(var(--signature-inner-size)*.10);
  line-height:1.04;
}
.page-intro .signature-art .panel-brand-symbol{
  width:calc(var(--signature-inner-size)*.13);
  height:calc(var(--signature-inner-size)*.13);
  object-fit:contain;flex-shrink:0;
}
.page-intro .signature-art .panel-brand-type{
  min-width:0;display:flex;flex-direction:column;
  gap:calc(var(--signature-inner-size)*.0192);align-items:flex-start;
}
@media (max-width:560px){
  .page-intro .signature-art .art-content{top:7%;bottom:7%;padding-top:0}
  .page-intro .signature-art .art-brand{margin-bottom:calc(var(--signature-inner-size)*.08)}
}


/* BELLEMO 0029: sei banner fotografici a tutta larghezza per le pagine area.
   Le immagini NON contengono scritte, oscuramenti o sfumature incorporati.
   Dicitura soprastante e separatore inferiore restano fuori dal banner. */
.sector-detail .sector-banner-intro{
  display:block;position:relative;height:auto;min-height:0;
  padding-top:69.2px;padding-bottom:49px;
  border-bottom:1px solid var(--line);
}
.sector-detail .sector-banner-intro .page-intro-content{
  position:relative;z-index:1;max-width:none;
  margin-bottom:39px;
}
.sector-detail .sector-banner-intro .page-intro-content .eyebrow{margin-left:2px}
.sector-detail .sector-banner{
  display:block;position:relative;width:100%;aspect-ratio:2048 / 768;
  background:#dcdcd5;overflow:hidden;isolation:isolate;
}
.sector-detail .sector-banner-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;display:block;filter:none;
  transform:translate(var(--mobile-banner-x,0px),var(--mobile-banner-y,0px)) scale(var(--mobile-banner-zoom,1));
  transform-origin:center center;
}
/* BELLEMO 0045B: ombra testuale DIFFUSA, ispirata al mockup approvato.
   La leggibilità aumenta sia su desktop sia su mobile senza creare una velatura
   estesa sopra la fotografia: l'ombra resta ancorata al testo. */
.sector-detail .sector-banner-shade{display:none;}
.sector-detail .sector-banner-copy{
  position:absolute;z-index:2;left:6.7%;right:36%;top:50%;
  transform:translateY(-50%);color:#fff;
}
.sector-detail .sector-banner .breadcrumb{
  display:inline-flex;align-items:center;color:#fff;
  text-shadow:0 0 2px rgba(5,10,9,.22),0 0 13px rgba(5,10,9,.92),0 4px 24px rgba(5,10,9,.65);
  position:absolute;left:0;bottom:calc(100% + 24px);margin:0;
  /* Fuori dal flusso: la sua altezza NON sposta il centro dell'H1. */
}
.sector-detail .sector-banner .breadcrumb:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.sector-detail .sector-banner .breadcrumb svg{transform:rotate(180deg)}
.sector-detail .sector-banner h1{
  margin:0;padding:0;color:#fff;font-size:clamp(39px,4.65vw,69px);
  line-height:1.13;letter-spacing:-.044em;font-weight:400;
  font-family:var(--font-display);
  text-shadow:0 1px 2px rgba(5,10,9,.18),0 1px 20px rgba(5,10,9,.92),0 5px 35px rgba(5,10,9,.78),0 10px 55px rgba(5,10,9,.47);
  overflow-wrap:normal;
}
@media(max-width:1100px){
  .sector-detail .sector-banner-intro{padding-top:50.8px;padding-bottom:42px}
  .sector-detail .sector-banner-intro .page-intro-content{margin-bottom:27px}
  .sector-detail .sector-banner-copy{left:6%;right:25%}
  .sector-detail .sector-banner h1{font-size:clamp(36px,5vw,54px)}
}
@media(max-width:820px){
  .sector-detail .sector-banner{aspect-ratio:1.75 / 1;min-height:310px;
    width:calc(100% + 48px);margin-left:-24px}
  .sector-detail .sector-banner-photo{object-position:65% center}
  .sector-detail .sector-banner-copy{left:6%;right:9%;top:50%}
  .sector-detail .sector-banner-shade{
    background:linear-gradient(90deg,rgba(12,24,22,.83),rgba(12,24,22,.54) 58%,rgba(12,24,22,.12)),
      linear-gradient(0deg,rgba(12,24,22,.20),transparent 65%);
  }
  .sector-detail .sector-banner h1{font-size:clamp(32px,6.25vw,51px)}
}
@media(max-width:560px){
  .sector-detail .sector-banner-intro{padding-top:37.2px;padding-bottom:30px}
  .sector-detail .sector-banner-intro .page-intro-content{margin-bottom:24px}
  .sector-detail .sector-banner{height:clamp(255px,80vw,320px);aspect-ratio:auto;min-height:0;
    width:calc(100% + 38px);margin-left:-19px}
  .sector-detail .sector-banner-photo{object-position:68% center}
  .sector-detail .sector-banner-copy{left:7%;right:7%;top:50%}
  .sector-detail .sector-banner .breadcrumb{font-size:11px;bottom:calc(100% + 19px)}
  .sector-detail .sector-banner h1{font-size:clamp(35px,9vw,48px)}
}

/* Blocco monogramma e scritte della Home: stesse identiche regole dimensionali
   e stessi asset delle pagine secondarie, non una seconda interpretazione. */
.hero .hero-art{--signature-inner-size:calc(clamp(270px,30vw,416px) - 2px)}
.hero .hero-art .art-brand{
  display:flex;flex-direction:row;align-items:center;
  gap:calc(var(--signature-inner-size)*.023);line-height:1.04;
}
.hero .hero-art .panel-brand-symbol{
  display:block;width:calc(var(--signature-inner-size)*.13);
  height:calc(var(--signature-inner-size)*.13);
  object-fit:contain;flex-shrink:0;
}
.hero .hero-art .panel-brand-type{
  min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(var(--signature-inner-size)*.0192);
}
.hero .hero-art .art-brand .wordmark-top{
  font-size:calc(var(--signature-inner-size)*.028);letter-spacing:.27em;
}
.hero .hero-art .art-brand .wordmark-name{
  font-size:calc(var(--signature-inner-size)*.064);
  left:-1px;
}
@media(max-width:820px){
  .hero .hero-art{--signature-inner-size:calc(clamp(185px,28vw,230px) - 2px)}
}
@media(max-width:560px){
  .hero .hero-art{--signature-inner-size:calc(min(300px,100vw - 38px) - 2px)}
}


/* BELLEMO 0034 — STEP 3: spaziature verticali solo smartphone.
   Riferimento approvato: circa 30px fra il termine del testo della
   presentazione Home e il divisorio successivo. Non alterare i distacchi
   interni funzionali, il layout desktop, le sei fotografie e le loro fasce. */
@media (max-width:820px){
  /* Il menu 0033 distava 19px dal bordo inferiore della testata:
     gap visivo dimezzato da 18px a 9px (considerato il bordo di 1px della testata), senza spostare le voci tra loro. */
  .site-header .nav-links{top:calc(100% + 10px)}
}
@media (max-width:560px){
  /* Distacchi sezione / testo, da applicare solamente alle sezioni
     che presentavano vuoti maggiori del riferimento. */
  .section-value{padding-top:26px;padding-bottom:30px}
  .section-sectors,.section-approach,.section-principle{padding-top:30px;padding-bottom:30px}
  .section-sectors.hub-section{padding-top:30px}
  .section.page-body{padding-top:30px;padding-bottom:30px}
  .method-page .page-body{padding-top:0}
  .section.others-section{padding-top:30px;padding-bottom:30px}
  /* La prima scritta della fascia verde ha 6px di metrica interna:
     24px di padding portano il vuoto visivo a circa 30px. */
  .contact-band{padding-top:24px;padding-bottom:30px}
}


/* ======================================================================
   BELLEMO 0036 — ritocchi circoscritti sulla sola base 0034.
   Nessuna modifica tipografica generale derivata dalla 0035.
   ====================================================================== */

/* Aumento del 20% della fascia superiore, senza scalare loghi, testi o menu. */
.header-inner{height:113px}
@media (max-width:820px){.header-inner{height:90px}}

/* Eliminazione del riflesso azzurro Android sui controlli della testata.
   L'outline per navigazione da tastiera (:focus-visible) resta attivo. */
.site-header a,.site-header button{
  -webkit-tap-highlight-color:transparent;
}

/* Un solo pixel in piu' per l'Arial 15px desktop / 13px smartphone
   del testo introduttivo e dei sei titoli del metodo della Home. */
.hero-lead,.step-mini strong{font-size:16px}
@media (max-width:560px){
  .hero-lead,.step-mini strong{font-size:14px}
}

/* Inviti della Home: testo abbreviato, Arial grassetto, sempre una riga. */
.hero-actions .button{font-size:14px;white-space:nowrap}
.hero-actions .button span{white-space:nowrap}
@media (max-width:560px){
  .hero-actions .button{font-size:13px}
}

/* Elenco delle localita': ingrandimento limitato, non la resa 0035. */
.hero-bottom .hero-locations{font-size:11px}
.hero-bottom .hero-locations-label{font-size:11px}
@media (max-width:560px){
  .hero-bottom .hero-locations{font-size:10px}
}

/* Piè di pagina: solo smartphone, due corpi diversi per gerarchia. */
@media (max-width:560px){
  .site-footer .footer-description{font-size:13px}
  .site-footer .footer-contacts{font-size:14px}
}

/* Pannello Ulpiano: recuperata dalla 0035 SOLO la geometria del
   blocco monogramma + denominazione sulla Home mobile; non i suoi font,
   non le dimensioni delle citazioni e non l'altezza della testata 0035. */
@media (max-width:560px){
  .hero .hero-art .art-content{
    display:flex;flex-direction:column;justify-content:flex-start;
    top:9%;bottom:8%;left:9%;right:9%;
  }
  .hero .hero-art .art-brand{
    position:relative;top:auto;left:auto;align-items:center;
    gap:10px;margin-bottom:auto;flex:0 0 auto;
  }
  .hero .hero-art .panel-brand-symbol{width:54px;height:54px}
  .hero .hero-art .panel-brand-type{justify-content:center}
}

/* Evita che il maggior corpo delle città tocchi il pannello Ulpiano
   sulle sole larghezze in cui il contenuto richiede più spazio. */
@media (min-width:561px) and (max-width:820px){
  .hero{padding-bottom:75px}
}
@media (max-width:370px){
  .hero{padding-bottom:82px}
}


/* BELLEMO 0037 — adeguamento esclusivo dei paragrafi descrittivi Arial.
   Base: 0036. Non modificare titoli, testi Georgia, pulsanti, etichette,
   recapiti, fotografie, monogrammi o struttura HTML.
   Il riferimento e' il testo introduttivo Home (Arial 14/16 px).
   Linee sufficientemente ariose senza ampliare la scala dei titoli. */
.sector-card p,
.body-lead,
.prose,
.page-intro .page-deck{
  font-size:16px;
  line-height:1.94;
}
@media (max-width:560px){
  .sector-card p,
  .body-lead,
  .prose,
  .page-intro .page-deck{
    font-size:14px;
    line-height:1.82;
  }
}

/* Le intestazioni interne hanno un divisorio ad altezza predeterminata:
   maggiore compattezza dell'interlinea desktop, conservando Arial 16 px. */
@media (min-width:561px){
  .page-intro .page-deck{line-height:1.75}
}
/* Solo Profilo negli intervalli desktop intermedi: i capoversi
   interi devono rientrare prima del divisorio; crescita contenutistica
   senza tagli, con il pannello laterale che raggiunge il divisorio. */
@media (min-width:821px) and (max-width:1100px){
  .page-intro.page-intro:has(.page-deck--profile){
    height:auto;
    min-height:650px;
    padding-bottom:30px;
  }
}


/* BELLEMO 0038 — Uniformita' dei collegamenti CTA.
   Base 0037; NON variare testi descrittivi, titoli, testata, geometrie.
   Stessa tipografia dei due pulsanti principali della Home su tutti
   gli inviti all'azione e sui collegamenti di altre aree. */
.button,
.inline-link,
.sector-foot,
.other-sector strong,
.breadcrumb,
.sector-detail .sector-banner .breadcrumb{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.07em;
}
@media(max-width:560px){
  .button,
  .inline-link,
  .sector-foot,
  .other-sector strong,
  .breadcrumb,
  .sector-detail .sector-banner .breadcrumb{font-size:13px}
}
/* I pulsanti veri e propri conservano una sola riga. Le denominazioni
   molto lunghe nelle schede 'Altre aree' possono andare a capo. */
.button span{white-space:nowrap}


/* BELLEMO 0039 — SOLO le tre modifiche approvate, da base 0038.
   1. Numeri 01–06 Metodo Home: semigrassetto, altre proprietà intatte.
   2. Solo mobile: il pannello Ulpiano della Home adotta fedelmente
      la composizione delle pagine interne, scalata come blocco unico,
      a tutta larghezza e con gli spazi superiori/inferiori ridotti.
   3. Solo mobile: nascondere la firma nelle pagine interne e assicurare
      distanze uniformi tra fine introduzione, divisorio e sezione seguente.
   Desktop: salvo il peso dei sei numeri, resa invariata. */
.step-mini>span:first-child{font-weight:600}

@media (max-width:560px){
  /* Home: il pannello occupa tutta la larghezza dello schermo, non soltanto
     quella della colonna interna. Monogramma e diciture si ingrandiscono
     proporzionalmente, come nella firma delle pagine secondarie. */
  .hero .hero-art{
    --signature-inner-size:calc(min(100vw, 370px) - 2px);
    width:100vw;
    height:auto;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    aspect-ratio:auto;
    min-width:0;
  }
  .hero .hero-art .art-grid{background-size:23.08% 23.08%}
  .hero .hero-art .art-arch-1{
    width:86.54%;height:auto;aspect-ratio:1;
    top:-37.5%;right:-31.73%;
  }
  .hero .hero-art .art-arch-2{
    width:134.62%;height:auto;aspect-ratio:1;
    top:-69.71%;right:-54.33%;
  }
  /* Il riquadro della pagina interna aveva 7% di margine superiore
     e inferiore su un lato di 300px, cioè 21px. Li riduciamo del 20%. */
  .hero .hero-art .art-content{
    position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
    display:flex;flex-direction:column;justify-content:center;
    padding:16.8px 10%;
  }
  .hero .hero-art .art-brand{
    position:relative;top:auto;left:auto;
    display:flex;flex-direction:row;align-items:center;
    gap:calc(var(--signature-inner-size)*.023);
    margin:0 0 calc(var(--signature-inner-size)*.08);
    flex:0 0 auto;line-height:1.04;
  }
  .hero .hero-art .panel-brand-symbol{
    width:calc(var(--signature-inner-size)*.13);
    height:calc(var(--signature-inner-size)*.13);
    object-fit:contain;flex-shrink:0;
  }
  .hero .hero-art .panel-brand-type{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:calc(var(--signature-inner-size)*.0192);
  }
  .hero .hero-art .art-brand .wordmark-top{
    font-size:calc(var(--signature-inner-size)*.028);
    letter-spacing:.27em;
  }
  .hero .hero-art .art-brand .wordmark-name{
    font-size:calc(var(--signature-inner-size)*.064);
    left:-1px;
  }
  .hero .hero-art .art-latin-quote{
    font-size:calc(var(--signature-inner-size)*.065);
    line-height:1.12;
  }
  .hero .hero-art .art-rule{
    margin:calc(var(--signature-inner-size)*.0433) 0 calc(var(--signature-inner-size)*.0481);
  }
  .hero .hero-art .art-translation{
    font-size:calc(var(--signature-inner-size)*.038);
    line-height:1.25;
    margin:0 0 6px;
  }
  .hero .hero-art .art-source{
    font-size:calc(var(--signature-inner-size)*.029);
  }

  /* Le quattro pagine interne che contengono la firma (Profilo,
     Aree, Metodo, Contatti) conservano la linea di fondo e mostrano
     immediatamente dopo il contenuto successivo. */
  .page-intro:has(.signature-art){
    display:block;
    height:auto;
    min-height:0;
    padding-bottom:30px;
    gap:0;
    border-bottom:1px solid var(--line);
  }
  .page-intro .signature-art{display:none!important}
  .page-intro:has(.signature-art) + .section{padding-top:30px}
  /* Metodo: il separatore introduttivo è già la linea superiore del primo
     passo, che non deve quindi introdurre altro spazio ridondante. */
  .method-page .page-intro:has(.signature-art) + .page-body{padding-top:30px}
  .method-page .page-intro:has(.signature-art) + .page-body .timeline-item:first-child{padding-top:0}
}
/* Sotto 351px la testata usa il marchio da 41px: il pannello si
   adegua senza che il simbolo diventi più grande del riferimento. */
@media(max-width:350px){
  .hero .hero-art{--signature-inner-size:calc(min(100vw, 318px) - 2px)}
}


/* ========================================================================
   BELLEMO 0041 — FASE 2. Solo pagine di approfondimento delle sei aree.
   Il distacco foto -> contenuto e' quello gia' presente fra foto e vecchia
   riga orizzontale (padding-bottom di .sector-banner-intro: 49/42/30px).
   Nessuna modifica alle fotografie o alla configurazione mobile della 0040.
   ======================================================================== */
/* Via la riga sotto ogni banner fotografico, sia PC sia mobile. */
.sector-detail .sector-banner-intro{border-bottom:0}

/* Recuperato lo spazio che prima separava la riga dall'inizio del contenuto.
   Non tocca il margine gia' esistente tra bordo foto e vecchia riga. */
.sector-detail .section.page-body{padding-top:0}

/* Le tre pagine descrittive a colonna singola occupano tutta la larghezza
   della stessa .container usata dalla foto sul PC. Le altre tre pagine
   mantengono le loro strutture a due colonne e le intestazioni interne. */
.sector-detail .area-block--single > .prose{max-width:none;width:100%}


/* ========================================================================
   BELLEMO 0042 — FASE 3: solo Home smartphone (fino a 560 px).
   1. Raddoppiare i padding verticali INTERNI del pannello latino: 16.8 -> 33.6px.
   2. Lo spazio tra bordo inferiore del pannello e «Assistenza legale in»
      deve uguagliare quello tra il fondo dei due pulsanti e il bordo superiore
      del pannello (35.8 px nella geometria della 0041).
   Il blocco delle località entra nel flusso della griglia per mantenere
   lo stesso distacco anche quando le città vanno a capo: evita le
   sovrapposizioni che si verificavano attorno a 371–374px nella 0041.
   Le altre pagine, i layout >560px e le impostazioni immagini NON cambiano.
   ======================================================================== */
@media (max-width:560px){
  .home-page .hero .hero-art .art-content{
    padding-top:33.6px;
    padding-bottom:33.6px;
  }
  .home-page .hero{padding-bottom:9px}
  .home-page .hero-bottom{
    position:static;
    left:auto;right:auto;bottom:auto;
    grid-column:1;
    margin-top:7.8px;
  }
}


/* ======================================================================
   BELLEMO 0043 — FASE A. SOLO SMARTPHONE (fino a 560px).
   Tre monogrammi della Home: il riferimento geometrico è il footer 0042.
   Il simbolo GB nel pannello latino conserva i colori del suo SVG scuro.
   Immagini mobile: dimensioni e inquadratura calcolate in script.js;
   sul PC le foto e tutti i monogrammi rimangono identici alla 0042.
   ====================================================================== */
@media (max-width:560px){
  /* Testata: stesso simbolo e stessi valori tipografici del footer mobile. */
  .site-header .wordmark{gap:10px}
  .site-header .brand-symbol{width:59px;height:53px}
  .site-header .brand-type{
    gap:6px;line-height:1.12;top:2px;
  }
  .site-header .wordmark-top{
    font-family:var(--font-body);font-size:10px;letter-spacing:.22em;
    font-weight:700;color:#c8b18d;
  }
  .site-header .wordmark-name{
    font-family:var(--font-display);font-size:23px;
    letter-spacing:0;left:0;
  }

  /* Pannello grigio della Home: stesso blocco del footer, colori già approvati. */
  .home-page .hero .hero-art .art-brand{
    gap:10px;line-height:1.12;
  }
  .home-page .hero .hero-art .panel-brand-symbol{
    width:59px;height:53px;
  }
  .home-page .hero .hero-art .panel-brand-type{
    gap:6px;line-height:1.12;
  }
  .home-page .hero .hero-art .art-brand .wordmark-top{
    font-family:var(--font-body);font-size:10px;
    font-weight:700;letter-spacing:.22em;
  }
  .home-page .hero .hero-art .art-brand .wordmark-name{
    font-family:var(--font-display);font-size:23px;
    letter-spacing:0;left:0;
  }
}
@media (max-width:350px){
  /* Identico ridimensionamento del footer già previsto dalla 0042. */
  .site-header .brand-symbol,
  .home-page .hero .hero-art .panel-brand-symbol{width:53px;height:48px}
  .site-header .wordmark-name,
  .home-page .hero .hero-art .art-brand .wordmark-name{font-size:21px}
}


/* ======================================================================
   BELLEMO 0044 — FASE B.
   1. Home: invito testuale "Aree di attività" abbreviato.
   2. Home + Metodo: numeri 01–06 uniformati al tono chiaro della pagina Metodo.
   3. Home: segni di spunta leggermente più incisivi.
   4. Metodo mobile: numeri riallineati al bordo superiore del titolo.
   5. Mobile: sottolineatura della voce attiva nel menu hamburger più vicina al testo.
   6. Mobile: rimozione del bagliore blu su tutti i controlli interattivi,
      sostituito da un feedback tattile molto discreto.
   7. Home: il pulsante "Leggi il metodo di lavoro" adotta lo stesso verde
      del pulsante "Aree di attività".
   8. PC: la dicitura "IL VALORE DEI TUOI DIRITTI" diventa in grassetto.
   ====================================================================== */

/* PC: solo rinforzo di peso, senza alterare dimensioni o spaziature. */
@media (min-width:561px){
  .eyebrow{font-weight:800}
}

/* Home: il pulsante del metodo usa lo stesso verde del pulsante principale. */
.button-secondary{background:var(--forest);color:#fff}
.button-secondary:hover{background:#253b34}

/* Numerazione Home e pagina Metodo: stesso tono chiaro approvato. */
.step-mini>span:first-child,
.timeline-no{color:#bba783}
/* BELLEMO 0044A: spunte Home esattamente dello stesso colore dei numeri. */
.home-page .step-check{color:#bba783}

/* Home: i segni di spunta devono avere una presenza visiva leggermente maggiore. */
.step-check path{stroke-width:2.05}

@media (max-width:560px){
  /* Sottolineatura mobile del menu hamburger più prossima alla voce attiva. */
  .nav-links>a::after{bottom:15px}

  /* Timeline Metodo: allineamento superiore dei numeri con i titoli. */
  .timeline-item{align-items:start}
  .timeline-no{align-self:start;top:calc(-0.07em - 2px);line-height:.94}

}


/* ======================================================================
   BELLEMO 0045 — FASE C (base definitiva 0044A approvata).

   GIA' CONFERMATI NELLA 0044A E NON ALTERATI:
   - Il collegamento della Home si chiama "Approfondisci le aree di attività".
   - "Leggi il metodo di lavoro" e "Aree di attività" condividono
     il medesimo verde e il medesimo stato hover.

   COMPLETAMENTO FASE C:
   - Su tutti i collegamenti e pulsanti mobile, eliminazione del bagliore
     azzurro nativo del browser, senza compromettere :focus-visible.
   - Al tocco: variazione cromatica appena percettibile e immediata,
     SENZA movimento, scalatura o modifica della geometria.
   - Conservati gli hover e le transizioni PC esistenti: eliminata
     la precedente sovrascrittura globale delle transizioni mobile.
   ====================================================================== */
@media (max-width:820px){
  a,button{
    -webkit-tap-highlight-color:transparent;
  }
}
@media (max-width:820px) and (hover:none) and (pointer:coarse){
  a:active,button:active{
    opacity:.95;
    filter:brightness(.985);
  }
  /* Sui touch screen gli hover emulati non devono muovere le schede
     o i pulsanti durante o subito dopo il tocco. */
  .button:hover,.sector-card:hover,.other-sector:hover{
    transform:none;
  }
}


/* ======================================================================
   BELLEMO 0046 — quattro interventi concordati, base 0045B.
   (A) I sei link di ritorno sono eliminati dai relativi HTML: qui
       non si modificano fotografia, ombra morbida o posizione dei titoli.
   (B) Solo desktop >820px: monogrammi dei pannelli grigi e del footer
       fedeli alle dimensioni / tipografia del marchio nella barra verde.
       Il pannello usa ancora l'SVG con G leggermente piu' scura.
   (C) Solo desktop: nelle quattro introduzioni con firma, il pannello si
       allunga verso il basso di 16px; linea divisoria e sezione seguente
       scendono dello stesso valore. Il contenuto, gia' centrato con
       display:flex/justify-content:center, trasla naturalmente di ~8px.
   (D) Solo panoramica Aree desktop: bordo destro fermo e larghezza firma
       uguale alla terza scheda della griglia sottostante (3 colonne e
       due intervalli di 18px). Il contenuto si ricentra nel nuovo pannello.
   Nessun intervento al layout mobile o alla testata desktop di riferimento.
   ====================================================================== */
@media (min-width:821px){
  :root{
    --bellemo-header-symbol-width:72px;
    --bellemo-header-symbol-height:64px;
  }
  /* Footer: stesso blocco di simbolo e tipografia della testata. */
  .site-footer .footer-brand{
    gap:11px;line-height:1.04;letter-spacing:normal;
  }
  .site-footer .brand-symbol{
    width:var(--bellemo-header-symbol-width);
    height:var(--bellemo-header-symbol-height);
  }
  .site-footer .footer-brand-type,
  .home-page .hero-art .panel-brand-type,
  .inner-page .signature-art .panel-brand-type{
    display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start;gap:5px;line-height:1.04;
    position:relative;top:4px;
  }
  .site-footer .footer-brand-overline,
  .home-page .hero-art .art-brand .wordmark-top,
  .inner-page .signature-art .art-brand .wordmark-top{
    font-family:var(--font-body);font-size:10px;font-weight:700;
    letter-spacing:.25em;line-height:normal;
  }
  .site-footer .footer-brand-overline{color:#c6ae82!important}
  .site-footer .footer-brand-name,
  .home-page .hero-art .art-brand .wordmark-name,
  .inner-page .signature-art .art-brand .wordmark-name{
    font-family:var(--font-display);font-size:26px;font-weight:400;
    letter-spacing:.004em;line-height:normal;left:0;
  }
  .site-footer .footer-brand-name{color:#f8f7f3!important}
  .home-page .hero-art .art-brand,
  .inner-page .signature-art .art-brand{
    display:flex;flex-direction:row;align-items:center;gap:11px;
    line-height:1.04;
  }
  .home-page .hero-art .panel-brand-symbol,
  .inner-page .signature-art .panel-brand-symbol{
    display:block;flex-shrink:0;object-fit:contain;
    width:var(--bellemo-header-symbol-width);
    height:var(--bellemo-header-symbol-height);
  }
}
@media (min-width:821px) and (max-width:1100px){
  :root{
    --bellemo-header-symbol-width:61px;
    --bellemo-header-symbol-height:55px;
  }
}

/* Altezza della sezione introduttiva: si aggiungono sempre 16px alla base
   0045B (le dimensioni originarie dipendono dalle larghezze della finestra).
   Il riquadro ha gia' top e bottom assoluti: l'incremento aggiunge spazio
   soltanto sotto il pannello; il suo bordo superiore resta fermo. */
@media (min-width:821px) and (max-width:849px){
  .inner-page .page-intro:has(.signature-art){height:758px;min-height:758px}
}
@media (min-width:850px) and (max-width:909px){
  .inner-page .page-intro:has(.signature-art){height:729px;min-height:729px}
}
@media (min-width:910px) and (max-width:939px){
  .inner-page .page-intro:has(.signature-art){height:683px;min-height:683px}
}
@media (min-width:940px) and (max-width:1100px){
  .inner-page .page-intro:has(.signature-art){height:666px;min-height:666px}
}
@media (min-width:1101px) and (max-width:1409px){
  .inner-page .page-intro:has(.signature-art){height:632px;min-height:632px}
}
@media (min-width:1410px){
  .inner-page .page-intro:has(.signature-art){
    height:calc(clamp(718px, calc(420px + 21.15vw), 733.6px) - 80px);
    min-height:calc(clamp(718px, calc(420px + 21.15vw), 733.6px) - 80px);
  }
}
/* Panoramica Aree: larghezza identica alle tre card sottostanti (gap 18px).
   Non cambiare griglia, posizioni dei card o larghezza dei pannelli delle
   altre pagine. Il bordo destro rimane ancorato a right:0. */
@media (min-width:821px){
  .inner-page:has(.hub-section) .page-intro .signature-art{
    width:calc((100% - 36px) / 3);
    right:0;
  }
  /* Mantiene la stessa larghezza interna e lo stesso andamento delle righe
     precedenti; il blocco trasla a destra di metà della fascia eliminata. */
  .inner-page:has(.hub-section) .page-intro .signature-art .art-content{
    left:50%;right:auto;width:calc(var(--signature-size) * .8);
    transform:translateX(-50%);
  }
}
/* Finestra PC piu' stretta: mantenere il marchio monolitico senza tagli
   quando la larghezza della colonna impedirebbe le misure desktop piene.
   La barra superiore rimane sempre il modello invariato. */
/* Nei formati desktop intermedi il marchio della testata usa gia' un
   corpo da 22px: pannello e footer seguono anche questo adattamento. */
@media (min-width:821px) and (max-width:1100px){
  .site-footer .footer-brand-name,
  .home-page .hero-art .art-brand .wordmark-name,
  .inner-page .signature-art .art-brand .wordmark-name{
    font-size:22px;
  }
}
/* Il nome non deve andare a capo. Nelle finestre PC strette il marchio
   nel solo pannello scala come BLOCCO UNICO, per evitare che il ritaglio
   del pannello nella panoramica Aree alteri simbolo e scritte in modo diverso.
   La testata originale e il footer conservano la misura del riferimento. */
@media (min-width:821px){
  .inner-page .signature-art .art-brand .wordmark-name{white-space:nowrap}
  .inner-page .signature-art .art-brand{transform-origin:left center}
}
@media (min-width:821px) and (max-width:849px){
  .inner-page .signature-art .art-brand{transform:scale(.77)}
}
@media (min-width:850px) and (max-width:899px){
  .inner-page .signature-art .art-brand{transform:scale(.82)}
}
@media (min-width:900px) and (max-width:949px){
  .inner-page .signature-art .art-brand{transform:scale(.87)}
}
@media (min-width:950px) and (max-width:999px){
  .inner-page .signature-art .art-brand{transform:scale(.92)}
}
@media (min-width:1000px) and (max-width:1049px){
  .inner-page .signature-art .art-brand{transform:scale(.96)}
}
@media (min-width:1101px) and (max-width:1149px){
  .inner-page .signature-art .art-brand{transform:scale(.89)}
}
@media (min-width:1150px) and (max-width:1199px){
  .inner-page .signature-art .art-brand{transform:scale(.94)}
}
@media (min-width:1200px) and (max-width:1279px){
  .inner-page .signature-art .art-brand{transform:scale(.98)}
}

/* Sicurezza alle larghezze PC intermedie: se i capoversi della pagina Profilo
   (o di un'altra pagina con la stessa struttura) richiedono più altezza del
   riferimento fisso, la sezione cresce nel flusso anziché far passare il
   divisorio attraverso l'ultima riga. Il pannello mantiene top e bottom
   assoluti, quindi cresce verso il basso della stessa quantità. */
@media (min-width:821px){
  .inner-page .page-intro:has(.signature-art){
    height:auto;
    padding-bottom:40px;
  }
}

/* ========================================================================
   BELLEMO 0046 — CORREZIONE DELL'UNIFORMITA' DESKTOP DELLE QUATTRO PAGINE
   PROFILO / AREE DI ATTIVITA' / METODO / CONTATTI.
   La 0046 precedente aveva erroneamente riservato la larghezza ridotta
   al solo pannello Aree e permesso al testo di creare divisori a quote
   differenti. Questa correzione applica a TUTTE E QUATTRO le pagine:
   - identica larghezza del pannello (terza scheda della griglia Aree);
   - stesso bordo destro, quota superiore, larghezza e centratura interna;
   - una sola altezza INTRO per ciascuna larghezza desktop, dimensionata
     per contenere anche il testo del Profilo: divisori sempre coincidenti;
   - nessun intervento ai titoli, al testo e al mobile (max-width:820px).
   L'ombra fotografica approvata rimane invariata; cosi' pure il menu,
   la cui sottolineatura desktop sara' affrontata separatamente.
   ======================================================================== */
@media (min-width:821px){
  /* Geometria esattamente comune, non condizionata dalla presenza della
     sezione hub e non influenzata dall'altezza dei testi di ogni pagina. */
  body.inner-page .page-intro:has(.signature-art){
    box-sizing:border-box;
    height:var(--bellemo-intro-shared-height);
    min-height:var(--bellemo-intro-shared-height);
    max-height:none;
    padding-bottom:40px;
  }
  .inner-page .page-intro .signature-art{
    width:calc((100% - 36px) / 3);
    right:0;
  }
  /* Blocchi del logo, citazione e attribuzione tutti nella stessa colonna
     centrata: si conserva la composizione originale della 0046 Aree. */
  .inner-page .page-intro .signature-art .art-content{
    left:50%;
    right:auto;
    width:calc(var(--signature-size) * .8);
    transform:translateX(-50%);
  }
}
/* Altezze responsive COMUNI: le quote seguono l'ultima riga del Profilo,
   la pagina piu' lunga. I minimi non devono variare da pagina a pagina. */
@media (min-width:821px) and (max-width:849px){
  :root{--bellemo-intro-shared-height:774px}
}
@media (min-width:850px) and (max-width:909px){
  :root{--bellemo-intro-shared-height:calc(690px + 6vw)}
}
@media (min-width:910px) and (max-width:938px){
  :root{--bellemo-intro-shared-height:calc(694px + 5.7vw)}
}
@media (min-width:939px) and (max-width:999px){
  :root{--bellemo-intro-shared-height:calc(667px + 5.6vw)}
}
@media (min-width:1000px) and (max-width:1079px){
  :root{--bellemo-intro-shared-height:calc(634px + 5.9vw)}
}
@media (min-width:1080px) and (max-width:1100px){
  :root{--bellemo-intro-shared-height:673px}
}
@media (min-width:1101px) and (max-width:1148px){
  :root{--bellemo-intro-shared-height:calc(644px + 4.9vw)}
}
@media (min-width:1149px) and (max-width:1409px){
  :root{--bellemo-intro-shared-height:calc(584px + 5.2vw)}
}
@media (min-width:1410px){
  :root{--bellemo-intro-shared-height:668px}
}


/* ====================================================================
   BELLEMO 0049 — TEST SFONDO GEOMETRICO SU TUTTE LE UNDICI PAGINE.
   Base: 0046 corretta (2026-10-26 18:18), non versioni 0047/0048.
   - Solo scenografia dello sfondo, nessuna modifica a foto, pannelli,
     contenuti, geometrie, caratteri, animazioni o colori già approvati.
   - Lo stesso WebP compare dietro la parte introduttiva di Home,
     Profilo, Aree di attività, Metodo, Contatti e di tutte e sei le
     pagine con fotografie panoramiche.
   - Il WebP stesso sfuma nel colore neutro #F8F7F3, senza raccordi netti.
   - Non dipende dall'altezza totale delle pagine o dallo scrolling.
   ==================================================================== */
main#contenuto{
  position:relative;
  isolation:isolate;
}
main#contenuto::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:0;
  left:0;
  width:100%;
  height:clamp(620px, 55vw, 1020px);
  background-color:var(--paper);
  background-image:url("assets/bellemo-sfondo-geometrico-0049.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
@media(max-width:820px){
  main#contenuto::before{
    height:clamp(600px, 125vw, 930px);
    background-position:center top;
  }
}


/* =====================================================================
   BELLEMO 0050 — PANNELLI DELLA CITAZIONE SEMITRASPARENTI.
   Base 0049. Solo il pannello Ulpiano nella Home e nelle quattro pagine
   secondarie con il medesimo pannello: gli altri riquadri non cambiano.
   Il fondale geometrico della 0049 resta visibile in trasparenza;
   rilievo leggerissimo senza variazioni di misure o coordinate.
   ===================================================================== */
.home-page .hero .hero-art:not(.thematic-art),
.inner-page .page-intro .signature-art:not(.thematic-art){
  background-color:rgba(248,247,243,.72);
  border-color:rgba(255,255,255,.54);
  box-shadow:0 18px 45px rgba(29,44,37,.12),
             0 4px 12px rgba(29,44,37,.055),
             inset 0 1px 0 rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(3px) saturate(1.04);
  backdrop-filter:blur(3px) saturate(1.04);
}


/* =====================================================================
   BELLEMO 0052 — SOLO HOME PC: icone nelle intestazioni dei 6 riquadri.
   Base esatta 0051: sfondo corretto, pannelli e pagine interne inalterati.
   Riquadri, padding, paragrafi e loro metriche, griglia e testi intatti.
   I sei titoli possono adattarsi al solo spazio rimasto alla loro sinistra.
   CTA "Scopri di più" in basso a sinistra, come nel mockup approvato.
   Mobile <=820px inalterato, compreso "Approfondisci" originale.
   ===================================================================== */
.sector-title-row{display:contents}
.sector-icon{display:none}
.sector-foot-desktop{display:none}
@media (min-width:821px){
  :is(.home-page, .hub-section) .sector-card .sector-title-row{
    display:flex;
    align-items:center;
    gap:15px;
    min-height:78px;
    margin-bottom:14px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon{
    width:64px;height:64px;flex:0 0 64px;
    display:flex;align-items:center;justify-content:center;
    border:1.3px solid #af9060;border-radius:50%;
    color:#a38250;
    background:rgba(255,255,255,.19);
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon svg{width:36px;height:36px}
  :is(.home-page, .hub-section) .sector-card .sector-title-row h3{
    flex:1;min-width:0;
    font-size:clamp(21px,1.58vw,24px);
    line-height:1.17;
    letter-spacing:-.024em;
    margin:0;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot{
    justify-content:flex-start;
    text-align:left;
    padding-top:23px;
    gap:10px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot-label{
    border-bottom:1px solid var(--accent);
    padding-bottom:5px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot-desktop{display:inline}
  :is(.home-page, .hub-section) .sector-card .sector-foot-mobile{display:none}
  :is(.home-page, .hub-section) .sector-card .sector-foot .round-arrow{
    width:18px;height:18px;flex:0 0 18px;
    border:0;border-radius:0;background:none;
  }
  :is(.home-page, .hub-section) .sector-card:hover .sector-foot .round-arrow{
    background:none;color:var(--forest);
  }
}
@media (min-width:821px) and (max-width:1100px){
  :is(.home-page, .hub-section) .sector-card .sector-title-row{gap:10px;min-height:72px}
  :is(.home-page, .hub-section) .sector-card .sector-icon{width:49px;height:49px;flex-basis:49px}
  :is(.home-page, .hub-section) .sector-card .sector-icon svg{width:29px;height:29px}
  :is(.home-page, .hub-section) .sector-card .sector-title-row h3{font-size:clamp(18px,1.82vw,21px)}
}


/* =====================================================================
   BELLEMO 0053 — Raccordo della scenografia e menu desktop.
   Base: 0052 + asset originale ritoccato in 0051, entrambi invariati.
   Le tre modifiche non incidono su layout, dimensioni o testi.
   1) Fondale geometrico leggermente meno incisivo, con dissolvenza
      continua fino alla completa trasparenza sul fondo #f8f7f3.
   2) Home: ingresso progressivo nel colore originale della sezione
      sottostante, evitando la fascia orizzontale sotto l'elenco città.
   3) Desktop: trattino attivo/hover rialzato verso la voce del menu.
   ===================================================================== */
main#contenuto::before{
  opacity:.83;
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,#000 56%,
    rgba(0,0,0,.95) 64%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.32) 87%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    #000 0%,#000 56%,
    rgba(0,0,0,.95) 64%,
    rgba(0,0,0,.72) 75%,
    rgba(0,0,0,.32) 87%,
    transparent 100%);
}
/* La prima sezione della Home conserva #fbfaf6 dopo la dissolvenza. */
.home-page .section-value{
  background:linear-gradient(to bottom,
    rgba(251,250,246,0) 0px,
    rgba(251,250,246,.18) 48px,
    rgba(251,250,246,.55) 116px,
    #fbfaf6 228px);
}
/* Non alterare la sottolineatura già approvata nel menu mobile. */
@media(min-width:821px){
  .site-header .nav-links>a::after{bottom:33px}
}


/* ======================================================================
   BELLEMO 0054 — INTERVENTI APPROVATI, NON MODIFICARE ALTRI ELEMENTI.
   1) Leggibilita' dei soli testi introduttivi (Home e pagine interne).
   2) CTA desktop in basso A DESTRA, forma mista, freccia antracite.
   3) Cinque nuove icone approvate: PNG trasparenti, cerchio identico.
      Area 05 rimane il pittogramma 0053, in attesa di approvazione.
   4) Unico trattino SVG condiviso, lunghezza e quota CSS identiche.
   Lo sfondo e la navigazione della 0053 rimangono INALTERATI.
   ====================================================================== */
.home-page .hero h1 .heading-tail{color:#47554f}
.home-page .hero .hero-lead{color:#273631}
.inner-page .page-intro .page-deck,
.inner-page .page-intro .page-deck p{color:#273631}
/* Tutte le diciture introduttive usano lo STESSO file lineare. */
.hero .eyebrow-line,
.page-intro .eyebrow-line,
.sector-banner-intro .eyebrow-line{
  display:inline-block;
  flex:0 0 27px;
  width:27px;
  height:1px;
  background:transparent url("assets/bellemo-trattino-0055.svg") center / 27px 1px no-repeat;
}
@media(min-width:821px){
  :is(.home-page, .hub-section) .sector-card .sector-icon:has(img){
    border:0;
    background:transparent;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon img{
    display:block;width:64px;height:64px;object-fit:contain;flex:none;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot{
    justify-content:flex-end;
    text-align:right;
    text-transform:none;
    letter-spacing:0;
    color:#263231;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot-label{padding-bottom:4px}
  :is(.home-page, .hub-section) .sector-card .sector-foot-desktop{
    text-transform:none;
    font-family:var(--font-display);
    font-size:15px;
    font-weight:400;
    letter-spacing:0;
  }
  :is(.home-page, .hub-section) .sector-card .sector-foot .round-arrow,
  :is(.home-page, .hub-section) .sector-card .sector-foot .round-arrow svg{color:#1c2925}
}
@media(min-width:821px) and (max-width:1100px){
  :is(.home-page, .hub-section) .sector-card .sector-icon img{width:49px;height:49px}
}


/* ======================================================================
   BELLEMO 0055 — SFONDO PIU' DOCILE A SINISTRA, TRATTINO-IMMAGINE UNICO,
   PARETE FISSA PER RIDURRE IL LAMPO BIANCO TRA HOME E PAGINE SECONDARIE.
   Base: 0054. Nessuna modifica a contenuti, geometrie principali o icone.
   1) Il fondale geometrico non parte piu' da main::before ma da body::before,
      fisso, cosi' da restare come un "muro" nel passaggio fra le pagine.
   2) Sulla meta' sinistra viene applicata una velatura carta/avorio ampia,
      morbida e progressiva per non disturbare la leggibilita' dei testi.
   3) Il trattino accanto alle diciture introduttive usa un vero asset condiviso
      richiamato come immagine, con stesse misure e quota in tutte le pagine.
   ====================================================================== */
:root{--bellemo-header-height:94px;--bellemo-bg-top-height:clamp(620px,55vw,1020px)}
@media(max-width:820px){
  :root{--bellemo-header-height:75px;--bellemo-bg-top-height:clamp(600px,125vw,930px)}
}
body{position:relative;z-index:0;background-color:var(--paper)}
main#contenuto::before{content:none!important}
body::before{
  content:"";
  position:absolute;
  top:var(--bellemo-header-height);
  left:0;
  width:100%;
  height:var(--bellemo-bg-top-height);
  pointer-events:none;
  z-index:-1;
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,
      rgba(248,247,243,.92) 0%,
      rgba(248,247,243,.89) 14%,
      rgba(248,247,243,.79) 28%,
      rgba(248,247,243,.58) 41%,
      rgba(248,247,243,.29) 54%,
      rgba(248,247,243,.10) 64%,
      rgba(248,247,243,0) 74%),
    url("assets/bellemo-sfondo-geometrico-0049.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:left top,center top;
  background-size:100% 100%,cover;
  opacity:.82;
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,#000 55%,
    rgba(0,0,0,.94) 64%,
    rgba(0,0,0,.73) 75%,
    rgba(0,0,0,.36) 87%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    #000 0%,#000 55%,
    rgba(0,0,0,.94) 64%,
    rgba(0,0,0,.73) 75%,
    rgba(0,0,0,.36) 87%,
    transparent 100%);
}
@media(max-width:820px){
  body::before{
    background-image:
      linear-gradient(90deg,
        rgba(248,247,243,.94) 0%,
        rgba(248,247,243,.91) 23%,
        rgba(248,247,243,.78) 41%,
        rgba(248,247,243,.51) 58%,
        rgba(248,247,243,.18) 73%,
        rgba(248,247,243,0) 86%),
      url("assets/bellemo-sfondo-geometrico-0049.webp");
    background-position:left top,center top;
    background-size:100% 100%,cover;
    opacity:.80;
  }
}
.home-page .hero h1 .heading-tail{color:#3f4c48}
.home-page .hero .hero-lead{color:#22312d}
.inner-page .page-intro .page-deck,
.inner-page .page-intro .page-deck p{color:#22312d}
.home-page .section-value{
  background:linear-gradient(to bottom,
    rgba(251,250,246,0) 0px,
    rgba(251,250,246,.22) 52px,
    rgba(251,250,246,.62) 126px,
    rgba(251,250,246,.90) 205px,
    #fbfaf6 295px);
}
.hero .eyebrow-line,
.page-intro .eyebrow-line,
.sector-banner-intro .eyebrow-line,
.contact-band .eyebrow-line{
  display:block;
  flex:0 0 27px;
  width:27px;
  min-width:27px;
  height:1px;
  object-fit:cover;
}


/* ======================================================================
   BELLEMO 0056 — CORREZIONI CONCORDATE, BASE 0055.
   1. Lo sfondo mantiene IDENTICHE velatura/dissolvenza/scalatura 0055,
      ma e' ancorato al documento: scorre insieme alla pagina.
      position:absolute e' definito anche nello stile critico in HEAD,
      per evitare differenze al primo caricamento.
   2. Toni descrittivi ripristinati esattamente dai valori 0053.
   3. Solo desktop ampio: pannello Ulpiano HOME allungato esclusivamente
      verso l'alto; fondo immobile, contenuto interno traslato di meta'
      dell'incremento. Le pagine secondarie e il mobile restano invariati.
   ====================================================================== */
.home-page .hero h1 .heading-tail{color:#8a928b}
.home-page .hero .hero-lead{color:var(--ink-2)}
.inner-page .page-intro .page-deck,
.inner-page .page-intro .page-deck p{color:var(--ink-2)}

@media(min-width:1410px){
  .home-page .hero{--bellemo-0056-panel-raise:clamp(0px,calc((100vw - 1382px) * .104),10.5625px)}
  .home-page .hero .hero-art:not(.thematic-art){
    height:calc(555px + var(--bellemo-0056-panel-raise));
    transform:translateY(calc(var(--bellemo-0056-panel-raise) / -2));
  }
  .home-page .hero .hero-art:not(.thematic-art) .art-content{
    top:calc(55.3px + var(--bellemo-0056-panel-raise) / 2);
    bottom:calc(66.36px + var(--bellemo-0056-panel-raise) / 2);
  }
}

/* BELLEMO 0058 — sei riquadri della pagina Aree di attività
   UGUALI alla Home: stessa struttura HTML e stessi selettori CSS.
   La Home e tutte le altre pagine restano identiche alla 0057. */


/* BELLEMO 0059 — solo tre interventi richiesti.
   1. Nessuna linea corta nei titoli introduttivi di tutte le pagine.
      Preserva la quota di partenza del testo con l'ingombro vuoto.
   2. Linea separatrice secondarie identica alla linea Home: stesso
      elemento grafico 1px, stesso colore, senza spostare il divisorio.
   3. Icona polizza / frecce contrapposte 05 condivisa fra Home e Aree.
   Header, pannelli, menu, sfondo e navigazione 0058 invariati. */
.home-page .hero-copy>.eyebrow,
.inner-page .page-intro-content>.eyebrow{
  position:relative;
  top:-6px;
  margin-bottom:1px;
}
.home-page .hero-copy>.eyebrow::before,
.inner-page .page-intro-content>.eyebrow::before{
  content:"";
  display:block;
  flex:0 0 27px;
  width:27px;
  height:1px;
  background:none;
}
.home-page .hero-bottom .hairline,
.inner-page .page-intro::after{
  display:block;
  height:1px;
  background-color:var(--line);
}
.inner-page .page-intro{
  border-bottom-color:transparent;
}
.inner-page .page-intro::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  pointer-events:none;
}


/* ======================================================================
   BELLEMO 0060 — SOLO QUATTRO INTERVENTI APPROVATI (base 0059).
   1) LINEETTA INTRO: vero file WebP condiviso tramite <img>, senza
      pseudo-elementi CSS o SVG di sfondo sovrapposti.
   2) MOBILE: sei icone approvate a sinistra dei titoli sulla Home e
      sulla pagina "Aree di attivita'". Non cambia il testo descrittivo.
   3) MOBILE: dicitura "Scopri di piu'"; mantenere senza variazioni
      geometriche il cerchio con la freccia gia' esistente.
   4) MOBILE: riquadro Ulpiano in avorio piu' visibile, niente modifiche PC.
   ====================================================================== */
/* Il vecchio pseudoelemento 0059 aveva solo un ingombro vuoto: il nuovo
   tag img occupa esattamente lo stesso spazio, senza raddoppiare 27px. */
.home-page .hero-copy>.eyebrow::before,
.inner-page .page-intro-content>.eyebrow::before{
  content:none;
  display:none;
}
.home-page .hero-copy>.eyebrow>img.bellemo-short-rule,
.inner-page .page-intro-content>.eyebrow>img.bellemo-short-rule{
  display:block;
  flex:0 0 27px;
  width:27px;
  min-width:27px;
  height:1px;
  background:none;
  object-fit:fill;
  margin:0;
  padding:0;
  border:0;
}
@media(max-width:820px){
  /* IDENTICA regola condivisa per entrambe le griglie dei sei riquadri. */
  :is(.home-page, .hub-section) .sector-card .sector-title-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:59px;
    margin-bottom:13px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:55px;
    height:55px;
    flex:0 0 55px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon img{
    display:block;
    width:55px;
    height:55px;
    max-width:100%;
    object-fit:contain;
  }
  :is(.home-page, .hub-section) .sector-card .sector-title-row h3{
    min-width:0;
    flex:1;
    margin:0;
    font-size:clamp(20px,3.3vw,25px);
    line-height:1.17;
    letter-spacing:-.024em;
  }
  /* Solo il testo della CTA: il cerchio e l'SVG freccia non cambiano. */
  :is(.home-page, .hub-section) .sector-card .sector-foot-mobile{
    text-transform:none;
    letter-spacing:0;
    font-family:var(--font-display);
    font-size:15px;
    font-weight:400;
  }
  /* Fondo avorio piu' carico solo sulle citazioni mobili, senza alterare
     bordi, dimensioni, logo, testo, archi o pannelli desktop. */
  .home-page .hero .hero-art:not(.thematic-art),
  .inner-page .page-intro .signature-art:not(.thematic-art){
    background-color:rgba(233,225,208,.91);
    border-color:rgba(195,178,148,.49);
    box-shadow:0 18px 45px rgba(29,44,37,.12),
               0 4px 12px rgba(29,44,37,.055),
               inset 0 1px 0 rgba(255,255,255,.32);
  }
}
@media(max-width:560px){
  :is(.home-page, .hub-section) .sector-card .sector-title-row{
    gap:11px;
    min-height:56px;
    margin-bottom:13px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon{
    width:52px;height:52px;flex-basis:52px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon img{
    width:52px;height:52px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-title-row h3{
    font-size:clamp(20px,5.55vw,25px);
  }
}
@media(max-width:350px){
  :is(.home-page, .hub-section) .sector-card .sector-title-row{gap:9px}
  :is(.home-page, .hub-section) .sector-card .sector-icon{
    width:45px;height:45px;flex-basis:45px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-icon img{
    width:45px;height:45px;
  }
  :is(.home-page, .hub-section) .sector-card .sector-title-row h3{
    font-size:20px;
  }
}


/* ======================================================================
   BELLEMO 0061 — CORREZIONI CONCORDATE SULLA BASE 0060.
   1) Triangolo dorato SVG UNICO (base 7px, altezza orizzontale 14px).
      La sede grafica resta 27px: la dicitura non cambia posizione.
   2) Pannello latino MOBILE: grigio perla tenue e neutro.
   3) Mobile: sottolineatura della CTA "Scopri di più" su 12 schede;
      il centro della scritta con la sua linea coincide col cerchio.
   La stabilizzazione verticale della Home desktop e' in script.js.
   ====================================================================== */
.home-page .hero-copy>.eyebrow>img.bellemo-short-rule,
.inner-page .page-intro-content>.eyebrow>img.bellemo-short-rule{
  display:block;
  box-sizing:border-box;
  flex:0 0 27px;
  width:27px;
  min-width:27px;
  height:7px;
  max-height:7px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  object-fit:contain;
  object-position:right center;
}
@media (max-width:820px){
  /* Solo sul cellulare: non variare bordi, ombre, testi o geometria. */
  .home-page .hero .hero-art:not(.thematic-art),
  .inner-page .page-intro .signature-art:not(.thematic-art){
    background-color:rgba(225,226,226,.94);
  }
  /* Anche la sottolineatura partecipa al centro verticale della CTA. */
  :is(.home-page, .hub-section) .sector-card .sector-foot-label{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid var(--accent);
    padding:0 0 3px;
    margin:0;
    line-height:normal;
  }
}


/* ======================================================================
   BELLEMO 0062 — TRE MODIFICHE CONCORDATE (base 0061).
   1. Il triangolo SVG 0062 occupa tutti i 27px già riservati alla figura.
      La punta rimane ferma a destra e la base raggiunge il margine sinistro.
      Non cambiano posizione del testo, colore o centratura verticale.
   2. La regola 0059 per il separatore generico ::after NON deve
      ridisegnare un divisorio sotto le sei fotografie panoramiche.
      Tutti gli altri separatori delle altre pagine restano invariati.
   3. Swipe esclusivamente mobile sulla fotografia di ciascuna delle
      sei aree: scroll verticale nativo, navigazione circolare in script.js.
   ====================================================================== */
.inner-page.sector-detail .sector-banner-intro::after{
  content:none;
  display:none;
}
@media (max-width:820px) and (pointer:coarse){
  .sector-detail .sector-banner{touch-action:pan-y;}
}


/* ======================================================================
   BELLEMO 0063 — resa stabile della dicitura iniziale fra Home e interne.
   La vecchia trasformazione del contenitore Home usava una traslazione
   frazionaria (-26.8px) che creava un livello di compositing differente
   dalle pagine interne. Si conserva l'IDENTICA quota visiva mediante
   top relativo (senza transform), senza alterare il normale layout.
   La regolazione verticale del solo elemento eyebrow viene ora eseguita
   in script.js impostando top, non la proprieta' translate.
   Le geometrie e gli spazi delle altre parti restano invariati.
   ====================================================================== */
@media (min-width:821px){
  .home-page .hero-copy{position:relative;transform:none;top:-26.8px}
}
@media (min-width:821px) and (max-width:1320px){
  .home-page .hero-copy{top:-30px}
}

/* Nelle sei pagine di area tra 821 e 1100px la vecchia regola banner
   anticipava la dicitura di 18.390625px rispetto alle altre pagine.
   Si allinea la sola dicitura, senza spostare foto o separatori. */
@media (min-width:821px) and (max-width:1100px){
  .inner-page.sector-detail .sector-banner-intro .page-intro-content>.eyebrow{
    top:12.390625px;
  }
}
/* Stesso criterio su smartphone e tablet: evitare il layer transform
   ereditato dal contenitore Home, senza cambiare la quota visiva. */
@media (max-width:560px){
  .home-page .hero-copy{position:relative;transform:none;top:-7.8px}
}
@media (min-width:561px) and (max-width:820px){
  .home-page .hero-copy{position:relative;transform:none;top:-7.2px}
}
@media (max-width:820px){
  .home-page .hero-copy>.eyebrow{top:-6.015625px}
}


/* ======================================================================
   BELLEMO 0064 — INTRO DESKTOP UNICA E PERSISTENTE DURANTE LA NAVIGAZIONE.
   La stessa dicitura, con lo stesso SVG, e' un nodo del BODY non sostituito
   dal router (che aggiorna soltanto MAIN). Le copie strutturali nelle
   singole pagine restano in flusso per mantenere gli ingombri ma sono
   nascoste solo quando l'elemento persistente e' stato creato.
   Nessuna traslazione CSS/GPU e nessuna misura per-route del triangolo.
   Su mobile l'impaginazione 0063 continua ad essere utilizzata intatta.
   ====================================================================== */
@media (min-width:821px){
  html.bellemo-shared-label-ready .home-page .hero-copy>.eyebrow,
  html.bellemo-shared-label-ready .inner-page .page-intro-content>.eyebrow{
    opacity:0;
  }
  #bellemo-shared-eyebrow-shell{
    position:absolute;
    top:180.1875px;
    left:0;
    right:0;
    width:min(1260px,calc(100% - 104px));
    margin-inline:auto;
    z-index:5;
    pointer-events:none;
    white-space:nowrap;
    isolation:isolate;
    will-change:transform;
    transform:translateZ(0);
  }
  #bellemo-shared-eyebrow-shell>.eyebrow{
    position:static;
    display:inline-flex;
    margin-left:2px;
    padding:0;
    translate:none;
    transform:none;
    vertical-align:top;
  }
  #bellemo-shared-eyebrow-shell .bellemo-short-rule{
    display:block;
    box-sizing:border-box;
    flex:0 0 27px;
    width:27px;
    min-width:27px;
    height:7px;
    max-height:7px;
    margin:0;
    padding:0;
    border:0;
    background:none;
    object-fit:contain;
    object-position:right center;
  }
}
@media (min-width:821px) and (max-width:1100px){
  #bellemo-shared-eyebrow-shell{
    width:min(1260px,calc(100% - 70px));
  }
}
@media (max-width:820px){
  #bellemo-shared-eyebrow-shell{display:none}
}


/* ======================================================================
   BELLEMO 0065 — Modifiche puntuali.
   Il triangolo delle 11 testate ora misura esattamente 14 x 7 px:
   la base sinistra resta ferma, la punta e la scritta arretrano di 13px.
   Rimane intatto il nodo persistente desktop approvato nella 0064.
   Il gesto touch agisce sul contenuto intero della pagina, ma soltanto
   se iniziato sulla panoramica. Nessuna dissolvenza o luminosita' animata.
   ====================================================================== */
.home-page .hero-copy>.eyebrow>img.bellemo-short-rule,
.inner-page .page-intro-content>.eyebrow>img.bellemo-short-rule,
#bellemo-shared-eyebrow-shell .bellemo-short-rule{
  display:block;box-sizing:border-box;
  flex:0 0 14px;width:14px;min-width:14px;max-width:14px;
  height:7px;min-height:7px;max-height:7px;
  margin:0;padding:0;border:0;background:none;
  object-fit:contain;object-position:left center;
}
@media (max-width:820px) and (pointer:coarse){
  .sector-detail .sector-banner{touch-action:pan-y;}
}
/* La testata resta esterna e sovrapposta all'area di trascinamento.
   Il contenuto visibile dei due documenti scorre dentro una finestra
   bloccata sotto la testata, senza cambiare il layout del sito. */
.bellemo-swipe-stage{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  overflow:hidden;pointer-events:none;overscroll-behavior:contain;
  contain:layout paint;
}
.bellemo-swipe-track{position:absolute;inset:0;will-change:transform;transform:translate3d(0,0,0)}
.bellemo-swipe-sheet{position:absolute;left:0;right:0;width:100%;pointer-events:none;}
.bellemo-swipe-stage [id="contenuto"]{isolation:isolate;}
html.bellemo-swipe-active #contenuto:not(.bellemo-swipe-sheet #contenuto){visibility:hidden;}
@media (prefers-reduced-motion:reduce){.bellemo-swipe-track{transition-duration:0ms!important}}

/* BELLEMO 0068 — la testata del pannello non partecipa allo swipe.
   Il titolo e il trattino condivisi sono un unico elemento fisso, sotto la
   barra verde e sopra alle due pagine in movimento. */
.bellemo-swipe-stage .sector-banner-intro .page-intro-content > .eyebrow{visibility:hidden!important;}
#bellemo-swipe-fixed-eyebrow{
  position:fixed;z-index:95;pointer-events:none;white-space:nowrap;
  display:inline-flex;align-items:center;box-sizing:border-box;
  margin:0!important;padding:0!important;transform:none!important;
  translate:none!important;contain:layout style;
}
#bellemo-swipe-fixed-eyebrow > img.bellemo-short-rule{
  flex:0 0 14px;width:14px;min-width:14px;max-width:14px;height:7px;
  margin:0;padding:0;background:none;object-fit:contain;
}
/* La copia panoramica in movimento occupa interamente la stessa finestra
   della fotografia ordinaria, evitando il fondo grigio del contenitore. */
.bellemo-swipe-stage picture.bellemo-responsive-banner{
  display:block;position:absolute;inset:0;width:100%;height:100%;
}
.bellemo-swipe-stage .sector-banner-photo{display:block;visibility:visible;opacity:1;}


/* BELLEMO 0069 — SOLO MOBILE: colore della scritta CTA nei 12 riquadri.
   La sottolineatura resta dorata come nella 0068; sono invariati
   tipografia, spaziature, freccia e resa desktop. */
@media (max-width:820px){
  :is(.home-page,.hub-section) .sector-card .sector-foot-mobile{
    color:var(--ink);
  }
}

/* ======================================================================
   BELLEMO 0070 — soltanto i due interventi approvati.
   1) Trattino orizzontale: larghezza visibile 28px (prima 14px).
      Origine sinistra invariata, perciò la scritta si sposta di +14px.
      Un nuovo SVG vettoriale 28x7 evita qualsiasi deformazione ottica.
      Non cambiano ancoraggi, JS persistente, altezza o spessore.
   2) Titolo e testo introduttivo delle quattro pagine istituzionali:
      -1px PC / -2px mobile verso l’alto rispetto alla 0069,
      senza spostare nulla nel flusso.
      Sono esclusi la dicitura superiore, il pannello latino, il divisorio
      e tutte le sei pagine fotografiche delle aree di attività.
   ====================================================================== */
.home-page .hero-copy>.eyebrow>img.bellemo-short-rule,
.inner-page .page-intro-content>.eyebrow>img.bellemo-short-rule,
#bellemo-shared-eyebrow-shell .bellemo-short-rule,
#bellemo-swipe-fixed-eyebrow>img.bellemo-short-rule{
  flex:0 0 28px;
  width:28px;
  min-width:28px;
  max-width:28px;
  object-fit:contain;
}
.inner-page:not(.sector-detail) .page-intro .page-intro-content>h1,
.inner-page:not(.sector-detail) .page-intro .page-intro-content>.page-deck{
  position:relative;
  top:-1px;
}
@media (max-width:820px){
  .inner-page:not(.sector-detail) .page-intro .page-intro-content>h1,
  .inner-page:not(.sector-detail) .page-intro .page-intro-content>.page-deck{
    top:-3px;
  }
}

/* BELLEMO 0073 — fotografia mobile dimensionata sul contenuto originale.
   Si attiva solo quando lo script ha calcolato una copertura integrale.
   Titoli, finestra panoramica, visualizzazione desktop e swipe invariati. */
@media (max-width:820px){
  .sector-detail .sector-banner-photo.bellemo-mobile-photo-framed{
    inset:auto;max-width:none;max-height:none;object-fit:fill;
    object-position:center center;transform:none!important;
  }
}

/* BELLEMO 0074 — Contatti: elenco province senza righe vuote artificiali.
   L'andata a capo resta naturale quando lo schermo è stretto. */
.where-prose > p:first-child{margin-bottom:23px;}
.where-prose > p:nth-of-type(2){line-height:1.55;}

/* BELLEMO 0075 — Contatti: sopra e sotto le province lo stesso spazio mobile.
   A <=560px il margine del secondo paragrafo e' gia' 18px. */
@media (max-width:560px){
  .where-prose > p:first-child{margin-bottom:18px;}
}

/* BELLEMO 0076 — mobile: niente filetto bianco interno fra il bordo
   superiore e il fondo grigio perla del riquadro Ulpiano.
   Il fondo #E1E2E2 a opacita' .94, il bordo e le ombre esterne non cambiano. */
@media (max-width:820px){
  .home-page .hero .hero-art:not(.thematic-art),
  .inner-page .page-intro .signature-art:not(.thematic-art){
    box-shadow:0 18px 45px rgba(29,44,37,.12),
               0 4px 12px rgba(29,44,37,.055);
  }
}