/* ══════════════════════════════════════════════════════════
   Alessio Aliberti · Immobili di pregio · Roma
   Bianco e nero. Scritto PRIMA per il telefono:
   le regole di base sono quelle dell'iPhone, i computer
   arrivano dopo nelle @media (min-width).
   ══════════════════════════════════════════════════════════ */

/* Il fondo della pagina, dietro a tutto.
   Su iPhone, quando la barra degli indirizzi si ritira, Safari scopre
   una striscia in fondo e la riempie col colore della tela, che prende
   da qui. Col bianco si vedeva una sfumatura chiara sotto l'apertura.
   Nero: se anche si scopre qualcosa, non si nota. */
html{background:#000000}

:root{
  /* ═══ PALETTE LUXURY COLLECTION — manuale BHHS 2024, pag. 75 ═══
     "the Luxury Collection introduces the staple of Black & White, and blends
      shades of Dark Platinum, Silver, Light Platinum, and eye-catching Metallic"
     Il Cabernet, colore della BHHS ordinaria, nella Luxury e' solo accento
     (pag. 70) e non va MAI usato sul testo. */
  --nero:#000000;            /* Black */
  --bianco:#FFFFFF;          /* White */
  --platino-scuro:#63666F;   /* Dark Platinum */
  --argento:#A7A9B4;         /* Silver */
  --platino-chiaro:#D9DAE4;  /* Light Platinum */
  --cabernet:#670038;        /* solo accento su elementi grafici, MAI sul testo */

  /* ruoli sul sito */
  --bg:#FFFFFF;
  --ink:#000000;
  --soft:#63666F;            /* Dark Platinum: testo secondario */
  --faint:#A7A9B4;           /* Silver: filetti e note */
  --line:#D9DAE4;            /* Light Platinum: filetti chiari */
  --dark:#000000;
  --on-dark:#FFFFFF;
  --on-dark-soft:#A7A9B4;    /* Silver su fondo nero */
  --on-dark-line:rgba(217,218,228,.22);

  --gut:20px;
  --maxw:1180px;
  --head-h:60px;
}
@media (min-width:700px){ :root{ --gut:40px; --head-h:70px } }
@media (min-width:1100px){ :root{ --gut:72px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Manrope",Arial,system-ui,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Montserrat",system-ui,sans-serif;font-weight:400;margin:0;text-wrap:balance}
.inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.on-dark a:focus-visible,.site-head a:focus-visible,.site-head button:focus-visible{outline-color:#FFFFFF}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#FFFFFF;color:#000000;padding:12px 20px;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ── segnaposto foto ── */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background-color:#F2F2F2;
  background-image:repeating-linear-gradient(135deg,#E0E0E0 0 1px,transparent 1px 12px);
  border:1px solid #E0E0E0;overflow:hidden;
}
.ph span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#8A8A8A;background:#F2F2F2;padding:5px 8px;border:1px solid #E0E0E0;
  text-align:center;line-height:1.5;max-width:88%;
}
.ph--dark{background-color:#141414;background-image:repeating-linear-gradient(135deg,#242424 0 1px,transparent 1px 12px);border-color:#242424}
.ph--dark span{color:#7A7A7A;background:#141414;border-color:#242424}

/* ══════════ TESTATA — telefono ══════════ */
.site-head{
  position:sticky;top:0;z-index:1000;
  height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
  background:var(--dark);color:var(--on-dark);
}
.wordmark{font-family:"Montserrat",system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;color:#FFFFFF}
.burger{
  width:44px;height:44px;margin-right:-10px;   /* 44px: la misura minima per un dito */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:0;cursor:pointer;
}
.burger i{display:block;width:22px;height:1.5px;background:#FFFFFF;transition:transform 260ms ease,opacity 200ms ease}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.site-nav{
  position:fixed;inset:var(--head-h) 0 0 0;z-index:999;
  background:var(--dark);
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 var(--gut) 14vh;
  transform:translateY(-100%);
  /* Chiuso deve sparire davvero: il suo riquadro sconfina sopra la testata
     e, senza questo, copre di nero il logo e il pulsante del menu.
     visibility toglie anche il menu chiuso dal giro dei tasti. */
  visibility:hidden;
  transition:transform 380ms cubic-bezier(.6,0,.2,1),visibility 0s linear 380ms;
}
.site-nav[data-open="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform 380ms cubic-bezier(.6,0,.2,1),visibility 0s;
}
.site-nav a{
  font-family:"Montserrat",system-ui,sans-serif;font-size:26px;letter-spacing:.06em;
  color:var(--on-dark);padding:14px 0;border-bottom:1px solid var(--on-dark-line);
}
.site-nav a[aria-current="page"]{color:#FFFFFF}
.site-nav a[aria-current="page"]::before{content:"— ";color:var(--on-dark-soft)}
.nav-tel{margin-top:26px;font-family:"Manrope",Arial,sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);border:0!important;padding:0!important}

/* Instagram e LinkedIn in fondo al menu. Il riquadro toccabile e' 44px
   pieni anche se il disegno ne misura 22: sotto quella misura il dito
   sbaglia bersaglio. */
.nav-social{display:flex;justify-content:center;gap:10px;margin-top:30px}
.nav-social a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0!important;border:0!important;
  color:var(--on-dark-soft);
}
.nav-social a:hover,.nav-social a:focus-visible{color:#FFFFFF}
.nav-social svg{width:22px;height:22px;display:block}
.head-tel{display:none}
body.nav-open{overflow:hidden}

@media (min-width:900px){
  .burger{display:none}
  .site-nav{
    position:static;inset:auto;transform:none;background:transparent;
    flex-direction:row;align-items:center;gap:clamp(18px,2.2vw,30px);
    padding:0;justify-content:flex-end;
    visibility:visible;transition:none;
  }
  .site-nav a{
    font-family:"Manrope",Arial,sans-serif;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--on-dark-soft);border:0;padding:0;
    transition:color 180ms ease;
  }
  .site-nav a:hover{color:#FFFFFF}
  .site-nav a[aria-current="page"]::before{content:none}
  .site-nav a[aria-current="page"]{color:#FFFFFF;border-bottom:1px solid #FFFFFF;padding-bottom:3px}
  .nav-tel{display:none}
  .nav-social{margin-top:0;gap:2px}
  .nav-social a{width:34px;height:34px}
  .nav-social svg{width:18px;height:18px}
  .head-tel{
    display:inline-block;margin-left:26px;font-size:12px;letter-spacing:.12em;
    color:#FFFFFF;border:1px solid rgba(255,255,255,.35);padding:8px 15px;white-space:nowrap;
    transition:background 200ms ease,color 200ms ease;
  }
  .head-tel:hover{background:#FFFFFF;color:#000000}
  .wordmark{font-size:15px;letter-spacing:.24em}
}

/* ══════════ APERTURA ══════════ */
.hero{position:relative;overflow:hidden;background:var(--dark)}
.hero-media{position:absolute;inset:-10% 0;will-change:transform}
.hero-media .ph{
  height:100%;width:100%;border:0;
  /* etichetta in alto a destra: al centro finiva sopra il titolo */
  align-items:flex-start;justify-content:flex-end;padding:14px;
}
.hero-stage{
  position:relative;z-index:2;
  min-height:calc(76vh - var(--head-h));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gut) 40px;
  background:linear-gradient(to top,rgba(0,0,0,.94) 12%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.62));
}
.hero-stage h1{font-size:34px;line-height:1.12;color:#FFFFFF;margin-bottom:14px}
.hero-sub{margin:0;color:var(--on-dark-soft);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scrollcue{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-soft)}
.scrollcue i{display:block;width:32px;height:1px;background:var(--on-dark-soft);transform-origin:left}
.ch{display:inline-block;will-change:transform,opacity}
@media (min-width:700px){ .hero-stage h1{font-size:46px} .hero-stage{padding:150px var(--gut) 56px} }
@media (min-width:1100px){ .hero-stage h1{font-size:62px;max-width:16ch} .hero-sub{font-size:13px} }

/* ══════════ SEZIONI ══════════ */
.sec{padding:56px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec-h{font-family:"Montserrat",system-ui,sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;font-weight:600}
.sec-dek{margin:0 0 32px;color:var(--soft);max-width:60ch;font-size:15px}
.page-head{background:var(--dark);color:var(--on-dark);padding:44px 0 40px}
.page-head .sec-h{color:var(--on-dark-soft)}
.page-head h1{font-size:32px;line-height:1.15;color:#FFFFFF;margin-bottom:12px}
.page-head p{margin:0;color:var(--on-dark-soft);max-width:56ch;font-size:15px}
@media (min-width:700px){ .sec{padding:80px 0} .page-head{padding:64px 0 60px} .page-head h1{font-size:46px} }
@media (min-width:1100px){ .sec{padding:104px 0} }

.dark{background:var(--dark);color:var(--on-dark);border-bottom:0}
.dark .sec-h{color:var(--on-dark-soft)}
.dark .sec-dek{color:var(--on-dark-soft)}
.dark h2,.dark h3{color:#FFFFFF}

/* ── immobili ── */
.row{display:grid;gap:22px;margin-bottom:48px}
.row:last-child{margin-bottom:0}
.curtain{position:relative;overflow:hidden}
.curtain .ph{aspect-ratio:3/2;will-change:transform}
.tagline{display:inline-block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:4px 10px;margin-bottom:14px}
.dark .tagline{color:#FFFFFF;border-color:rgba(255,255,255,.5)}
.row-txt h3{font-size:23px;line-height:1.2;margin-bottom:6px}
.loc{margin:0 0 16px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--soft)}
.price{font-family:"Montserrat",system-ui,sans-serif;font-size:27px;margin:0 0 18px;font-variant-numeric:tabular-nums}
.specs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.specs li{font-size:11.5px;color:var(--soft);border:1px solid var(--line);padding:6px 12px}
.more{display:inline-block;font-size:11px;letter-spacing:.19em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px;transition:opacity 180ms ease}
.more:hover{opacity:.55}
@media (min-width:840px){
  .row{grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;margin-bottom:76px}
  .row.flip{grid-template-columns:1fr 1.15fr}
  .row.flip .row-txt{order:-1}
  .row-txt h3{font-size:28px}
  .price{font-size:32px}
}

/* ── numeri ── */
.stat-row{display:grid;gap:30px;margin-bottom:44px}
.stat .v{font-family:"Montserrat",system-ui,sans-serif;font-size:46px;line-height:1;margin:0;font-variant-numeric:tabular-nums;color:#FFFFFF}
.stat .k{margin:10px 0 0;font-size:13.5px;color:var(--on-dark-soft);line-height:1.5}
@media (min-width:760px){ .stat-row{grid-template-columns:repeat(3,1fr);gap:34px} .stat .v{font-size:58px} }

/* ── tabella ── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.listino{width:100%;border-collapse:collapse;font-size:13.5px;min-width:480px}
table.listino caption{text-align:left;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);padding-bottom:14px}
table.listino th{text-align:left;font-weight:400;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);padding:0 14px 11px 0;border-bottom:1px solid var(--on-dark-line)}
table.listino th.n,table.listino td.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
table.listino td{padding:14px 14px 14px 0;border-bottom:1px solid rgba(244,244,244,.09)}
table.listino td.name{font-family:"Montserrat",system-ui,sans-serif;font-size:15px;color:#FFFFFF}

/* ── chi sono ── */
.about{display:grid;gap:26px}
.about .ph{aspect-ratio:4/5}
.about h2{font-size:25px;line-height:1.22;margin-bottom:18px}
.about p{margin:0 0 15px;color:var(--soft)}
.about strong{color:var(--ink);font-weight:600}
.dark .about p{color:var(--on-dark-soft)}
.dark .about strong{color:#FFFFFF}
.creds{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.creds li{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:7px 13px}
.dark .creds li{color:var(--on-dark-soft);border-color:var(--on-dark-line)}
@media (min-width:840px){ .about{grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center} .about h2{font-size:34px} }

/* ── squadra ── */
/* ══════════ LA RETE: BHHS e Berkshire Hathaway ══════════ */
.rete-sez{padding:0 0 52px}
.rete-foto .ph,.rete-video{margin:0 0 34px}
.rete-foto .ph{aspect-ratio:3/2}
@media (min-width:760px){ .rete-foto .ph{aspect-ratio:21/9;max-height:62vh} }
.rete-video video{display:block;width:100%;height:auto;background:#000000;aspect-ratio:16/9;object-fit:cover}
.rete-video-guscio{position:relative;aspect-ratio:16/9;background:#000000}
.rete-video-guscio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Il velo trasparente sopra al filmato: intercetta il tocco prima che
   arrivi a YouTube, altrimenti il loro pannello -- che abbiamo appena
   tolto -- ricompare al primo dito. A filmato fermo mostra un triangolo
   di play al centro. */
.rete-velo{
  position:absolute;inset:0;z-index:2;border:0;cursor:pointer;
  background:transparent;display:flex;align-items:center;justify-content:center;
}
.rete-segno{
  width:66px;height:66px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.7);
  position:relative;transition:opacity 220ms ease,transform 220ms ease;
}
.rete-segno::before{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:16px solid #FFFFFF;border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.in-marcia .rete-segno{opacity:0;transform:scale(.8)}
.rete-velo:hover .rete-segno{transform:scale(1.06)}
.in-marcia .rete-velo:hover .rete-segno{opacity:.85;transform:scale(1)}

/* I comandi sono nostri: il filmato parte muto -- e' l'unico modo per
   partire da solo -- e senza questi tasti non si saprebbe ne' come
   fermarlo ne' come accendere l'audio. */
.rete-comandi{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:14px}
.rete-tasto{
  min-height:44px;padding:0 22px;
  background:transparent;color:#FFFFFF;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);
  font-family:"Manrope",Arial,sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  transition:background 200ms ease,color 200ms ease;
}
.rete-tasto:hover{background:#FFFFFF;color:#000000}
@media (prefers-reduced-motion:reduce){ .rete-segno{transition:none} }
.rete-testo h2{
  font-size:26px;line-height:1.18;margin:0 0 20px;color:#FFFFFF;
  text-wrap:balance;hyphens:none;-webkit-hyphens:none;
}
.rete-testo p{
  margin:0 auto 16px;max-width:58ch;
  font-size:15px;line-height:1.75;color:var(--on-dark-soft);
  text-align:center;text-wrap:pretty;hyphens:none;-webkit-hyphens:none;
}
.rete-testo strong{color:#FFFFFF;font-weight:600}
.rete-link{margin-top:24px}
@media (min-width:760px){ .rete-testo h2{font-size:38px} .rete-testo p{font-size:16px} }

/* ══════════ LA SCHEDA DI UNA PERSONA ══════════ */
.agente-testa{background:var(--dark);color:var(--on-dark);border-bottom:0}
.agente-testa .sec-h a{color:var(--on-dark-soft)}
.agente-testa .sec-h a:hover{color:#FFFFFF}
.agente-carta{display:grid;gap:22px;margin-top:18px}
.membro-foto--grande{aspect-ratio:2/3;max-width:320px;margin:0 auto;width:100%}
.agente-chi{text-align:center}
.agente-chi h1{font-size:30px;line-height:1.1;margin:0 0 8px;color:#FFFFFF}
.agente-ruolo{
  margin:0 0 4px;font-family:"Manrope",Arial,sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);
}
.agente-dove{margin:0;font-size:13px;color:var(--on-dark-soft)}
.agente-nota{
  margin:16px auto 0;max-width:46ch;font-size:12.5px;line-height:1.7;
  color:var(--on-dark-soft);text-align:center;
}
.apri-contatti--scuro{margin-top:20px}
@media (min-width:760px){
  .agente-carta{grid-template-columns:320px 1fr;gap:38px;align-items:center;margin-top:26px}
  .membro-foto--grande{margin:0}
  .agente-chi{text-align:left}
  .agente-chi h1{font-size:42px}
  .apri-contatti--scuro{justify-content:flex-start}
  .agente-nota{margin-left:0;text-align:left}
}

.titolo-team{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:38px;line-height:1;letter-spacing:.02em;
  text-align:center;margin:0 0 10px;
}
@media (min-width:760px){ .titolo-team{font-size:56px} }
@media (min-width:1100px){ .titolo-team{font-size:68px} }

/* ══════════ LA SQUADRA: due per riga, ritratto rettangolare ══════════
   Il ritratto sta sopra, nome e ruolo sotto. Rettangolo 3:4 e non
   tondo: una faccia tagliata in un cerchio perde le spalle, e con le
   spalle se ne va meta' della posa. */
.team{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px}
.membro{
  display:flex;flex-direction:column;gap:9px;text-align:center;min-width:0;
  color:inherit;
}
.membro .membro-foto{transition:opacity 260ms ease}
.membro:hover .membro-foto,.membro:focus-visible .membro-foto{opacity:.82}
.membro:hover .nome{text-decoration:underline;text-underline-offset:4px}
.membro-foto{
  /* 2:3 e non 3:4. I ritratti dell'ufficio non sono tutti uguali: alcuni
     sono mezzibusti, altri figure intere davanti all'insegna. Con un
     riquadro piu' corto la sforbiciata mangiava la testa a chi e'
     ripreso da lontano; con questo taglia appena i bordi e le facce
     restano dentro. */
  display:block;position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;
  background:var(--platino-chiaro);
}
.membro-foto img{width:100%;height:100%;object-fit:cover;display:block}
.membro-foto--vuota{
  background:var(--dark);
  display:flex;align-items:center;justify-content:center;
}
.membro-foto--vuota span{
  font-family:"Montserrat",system-ui,sans-serif;font-size:30px;letter-spacing:.06em;
  color:rgba(255,255,255,.34);
}
.membro .nome{font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.25}
.membro .ruolo{
  font-family:"Manrope",Arial,sans-serif;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soft);line-height:1.5;
}
.membro.lead .nome{font-weight:600}
@media (min-width:760px){
  .team{grid-template-columns:repeat(3,1fr);gap:32px 20px}
  .membro .nome{font-size:18px}
}
@media (min-width:1100px){ .team{grid-template-columns:repeat(5,1fr)} }

/* ── consigli ── */
.advice-grid{display:grid;gap:34px}
.advice-grid article{display:flex;flex-direction:column;gap:11px}
.advice-grid .ph{aspect-ratio:3/2}
.kicker{margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.advice-grid h3{font-size:20px;line-height:1.3}
.advice-grid p{margin:0;font-size:14px;color:var(--soft);line-height:1.62}
.readtime{margin:auto 0 0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@media (min-width:760px){ .advice-grid{grid-template-columns:repeat(3,1fr);gap:34px} }

/* ── contatti ── */
.contact-grid{display:grid;gap:38px}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:17px}
.contact-list li{display:flex;flex-direction:column;gap:3px}
.contact-list .lab{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft)}
.contact-list a,.contact-list .val{font-size:17px;color:#FFFFFF}
.contact-list a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;width:fit-content}
.form{display:flex;flex-direction:column;gap:15px;background:rgba(255,255,255,.05);padding:22px;border:1px solid var(--on-dark-line)}
.form h3{font-size:19px;color:#FFFFFF}
.form .hint{margin:0;font-size:13px;color:var(--on-dark-soft)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-soft)}
.field input,.field textarea{
  font:inherit;font-size:16px;   /* 16px: sotto, l'iPhone ingrandisce da solo la pagina */
  color:#FFFFFF;background:rgba(255,255,255,.07);
  border:1px solid var(--on-dark-line);padding:13px 14px;border-radius:0;
  -webkit-appearance:none;
}
.field textarea{resize:vertical;min-height:100px}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,244,244,.38)}
.btn{
  font:inherit;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  background:#FFFFFF;color:#000000;border:0;padding:16px 28px;cursor:pointer;
  align-self:stretch;min-height:48px;
}
.btn:hover{opacity:.85}
.privacy{margin:0;font-size:11.5px;color:var(--on-dark-soft);line-height:1.55}
@media (min-width:840px){ .contact-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start} .form{padding:30px} .btn{align-self:flex-start} }

/* ── richiamo in fondo ── */
.cta-band{background:var(--dark);color:var(--on-dark);padding:52px 0}
.cta-band h2{font-size:26px;line-height:1.2;color:#FFFFFF;margin-bottom:10px}
.cta-band p{margin:0 0 24px;color:var(--on-dark-soft);max-width:46ch}
.cta-band .btn{display:inline-block;text-align:center}
@media (min-width:700px){ .cta-band h2{font-size:34px} .cta-band .btn{align-self:flex-start} }

/* ── piede ── */
.site-foot{background:var(--dark);color:var(--on-dark-soft);padding:32px 0;font-size:12px;border-top:1px solid var(--on-dark-line)}
.foot-inner{display:flex;flex-direction:column;gap:10px}
.site-foot a{border-bottom:1px solid rgba(156,156,156,.4)}
@media (min-width:760px){ .foot-inner{flex-direction:row;justify-content:space-between;align-items:center} }

/* ══════════ SEQUENZA D'APERTURA ══════════ */
.intro{display:none}
.intro.on{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;z-index:200;background:#000000;padding:20px}
.intro-inner{position:relative;width:min(680px,90vw);display:flex;flex-direction:column;align-items:center}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:50;background:#FFFFFF;transform:scaleX(0);transform-origin:left;opacity:0}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} }

/* ── la foto vera si sovrappone al segnaposto ── */
.ph img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* quando la foto vera c'e', via il tratteggio di sotto */
.ph--piena{background-image:none;background-color:#0F0F0F;border-color:transparent}

/* ── il listino completo: quaranta schede compatte ── */
.listino-griglia{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.scheda{
  background:var(--bg);padding:16px;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"zona prezzo" "citta dati";
  gap:3px 14px;align-items:baseline;
  transition:background 160ms ease;
}
.scheda:hover{background:#F6F6F6}
.scheda-zona{grid-area:zona;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.25}
.scheda-citta{grid-area:citta;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.scheda-prezzo{grid-area:prezzo;font-family:"Montserrat",system-ui,sans-serif;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.scheda-dati{grid-area:dati;font-size:11.5px;color:var(--soft);text-align:right;white-space:nowrap}
.nota-listino{margin:18px 0 0;font-size:11.5px;color:var(--faint)}
@media (min-width:760px){
  .listino-griglia{grid-template-columns:1fr 1fr}
  .scheda{padding:18px 20px}
}
@media (min-width:1100px){ .listino-griglia{grid-template-columns:repeat(3,1fr)} }

/* ══════════ HOME: ritratto orizzontale + nome ══════════ */
.ritratto{
  position:relative;background:var(--dark);
  /* Sul telefono riempie tutto lo schermo. svh e' l'altezza REALE
     visibile su iPhone: con vh la barra degli indirizzi di Safari
     taglia il fondo e il nome finisce sotto il bordo. */
  /* meno l'altezza della barra in alto, che sta gia' occupando spazio:
     senza sottrarla il nome finisce sotto il bordo dello schermo */
  height:calc(100svh - var(--head-h));min-height:480px;
}
.ritratto .ph{position:absolute;inset:0;height:100%;width:100%;border:0}
/* il volto resta in vista anche quando il riquadro taglia */
.ritratto .ph img{
  /* 44% invece di 28%: taglia la parete sopra di lui e fa salire il busto.
     Lo scatto e' molto verticale, quindi un po' di ingrandimento avvicina. */
  object-position:center 58%;
  transform:scale(1.3);
}
.ritratto-nome{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--gut) 74px;
  background:linear-gradient(to top,rgba(0,0,0,.9) 30%,rgba(0,0,0,0));
  padding-top:70px;
}
.ritratto-nome h1{font-size:30px;line-height:1.1;color:#FFFFFF;margin:0 0 6px}
.ritratto-nome p{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
@media (min-width:700px){
  /* sul computer non serve tutto lo schermo: si vedrebbe solo la foto
     e niente di quello che c'e' sotto */
  .ritratto{height:auto;aspect-ratio:16/8;max-height:82vh}
  .ritratto .ph{position:relative}
  .ritratto .ph img{object-position:center 46%;transform:scale(1.16)}
  .ritratto-nome{padding-bottom:64px}
  .ritratto-nome h1{font-size:46px}
  .ritratto-nome p{font-size:13px}
}
@media (min-width:1100px){ .ritratto{aspect-ratio:16/7} }

/* la frase */
.frase{padding:44px 0;border-bottom:1px solid var(--line)}
.frase p{
  margin:0;font-family:"Montserrat",system-ui,sans-serif;font-size:21px;line-height:1.45;
  max-width:24ch;
}
@media (min-width:700px){ .frase{padding:72px 0} .frase p{font-size:30px;max-width:30ch} }

/* ultimi tre immobili */
.ultimi{display:grid;gap:26px}
.ultimo{display:grid;gap:4px;grid-template-columns:1fr auto;grid-template-areas:"foto foto" "zona prezzo" "citta dati"}
.ultimo .ph{grid-area:foto;aspect-ratio:3/2;margin-bottom:12px}
.ultimo-zona{grid-area:zona;font-family:"Montserrat",system-ui,sans-serif;font-size:19px;line-height:1.2}
.ultimo-citta{grid-area:citta;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.ultimo-prezzo{grid-area:prezzo;font-family:"Montserrat",system-ui,sans-serif;font-size:19px;white-space:nowrap}
.ultimo-dati{grid-area:dati;font-size:11.5px;color:var(--on-dark-soft);text-align:right}
@media (min-width:760px){ .ultimi{grid-template-columns:repeat(3,1fr);gap:30px} }

/* la banda che porta alla mappa */
.banda-mappa{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  background:var(--dark);color:var(--on-dark);
  padding:52px var(--gut);
  min-height:300px;
}
.banda-sfondo{
  position:absolute;inset:0;
  z-index:0;isolation:isolate;      /* la mappa di sfondo resta nel suo mondo */
}
.banda-velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.92) 18%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.75));
}
.banda-testo{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}
.banda-titolo{
  font-family:"Montserrat",system-ui,sans-serif;font-size:30px;line-height:1.12;color:#FFFFFF;
}
.banda-sotto{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.banda-freccia{position:relative;z-index:2;flex:none;width:44px;color:#FFFFFF;margin-bottom:6px}
.banda-freccia svg{width:100%;height:auto}
.banda-mappa:hover .banda-freccia{transform:translateX(6px);transition:transform 220ms ease}
@media (min-width:700px){
  .banda-mappa{padding:80px var(--gut);min-height:380px}
  .banda-titolo{font-size:46px}
  .banda-freccia{width:60px}
}

/* ══════════ LA MAPPA ══════════ */
.mappa-guscio{
  position:relative;background:#0B0B0B;
  /* Leaflet usa priorita' di sovrapposizione altissime (fino a 1000) per i
     suoi strati e comandi. Senza questo, il menu a tendina si apriva SOTTO
     la mappa e non si vedeva. `isolation` chiude la mappa in un mondo suo,
     cosi' tutte le sue priorita' restano dentro e non salgono sul menu. */
  z-index:0;isolation:isolate;
}
#mappa{height:min(72vh,620px);width:100%}
.mappa-guscio--bassa #mappa{height:280px}
.mappa-noscript{padding:30px var(--gut);margin:0;color:var(--soft)}
/* ── mappa nera ──
   Le mattonelle di OpenStreetMap sono chiare: le rovesciamo in negativo
   e le portiamo in bianco e nero. Il filtro tocca SOLO lo strato delle
   mattonelle, quindi i segnalini bianchi e i riquadri restano come sono. */
/* niente piu' filtro: le mattonelle Esri sono gia' grigio-scure */
.leaflet-container{font-family:"Manrope",Arial,system-ui,sans-serif;background:#0B0B0B}
.leaflet-control-zoom a{
  background:#000000;color:#FFFFFF;border-color:#2A2A2A;
}
.leaflet-control-zoom a:hover{background:#1C1C1C;color:#FFFFFF}
.leaflet-bar{border:1px solid #2A2A2A}
.leaflet-control-attribution{
  background:rgba(0,0,0,.72);color:#8A8A8A;font-size:10px;
}
.leaflet-control-attribution a{color:#B8B8B8}
.leaflet-popup-tip{background:#FFFFFF}
.leaflet-popup-content-wrapper{border-radius:0;box-shadow:0 8px 26px -12px rgba(0,0,0,.5)}
.leaflet-popup-content{margin:16px 18px;display:flex;flex-direction:column;gap:3px}
.pop-zona{font-family:"Montserrat",system-ui,sans-serif;font-size:16px;line-height:1.25}
.pop-prezzo{font-family:"Montserrat",system-ui,sans-serif;font-size:17px}
.pop-dati{font-size:12px;color:var(--soft);margin-bottom:8px}
.pop-link{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;align-self:flex-start;
}
.page-head--stretta{padding-bottom:34px}

/* ══════════ SCHEDA DEL SINGOLO IMMOBILE ══════════ */
.scheda-immobile{display:grid;gap:26px}
.scheda-immobile .ph{aspect-ratio:3/2}
.dati-immobile{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.dato{background:var(--bg);padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dato dt{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.dato dd{margin:0;font-family:"Montserrat",system-ui,sans-serif;font-size:17px;font-variant-numeric:tabular-nums}
.avviso-scheda{margin:24px 0 0;font-size:13.5px;color:var(--soft);max-width:56ch}
.cta-titolo{font-size:26px;margin-bottom:14px}
.cta-testo{color:var(--on-dark-soft);margin:0 0 24px}
@media (min-width:840px){ .scheda-immobile{grid-template-columns:1.3fr 1fr;gap:44px;align-items:start} }

/* ── il marchio dell'agenzia, in alto a sinistra sulla foto ── */
.marchio{
  /* sotto titolo e sottotitolo, non piu' in alto a sinistra */
  margin-top:20px;
  max-width:min(56vw,230px);
}
.marchio img{
  width:100%;height:auto;
  /* un velo scuro dietro non serve: il logo bianco su foto chiara
     rischia di sparire, quindi gli diamo una lieve ombra */
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
@media (min-width:700px){
  .marchio{margin-top:24px;max-width:250px}
}

/* ── selettore di lingua, in alto a destra ── */
.lingue{
  display:flex;align-items:center;gap:6px;
  margin-left:auto;margin-right:4px;
  font-size:11px;letter-spacing:.14em;color:var(--on-dark-soft);
}
.lingue span{opacity:.4}
.lingua{
  padding:10px 4px;min-height:44px;display:flex;align-items:center;
  transition:color 160ms ease;
}
.lingua:hover{color:#FFFFFF}
.lingua[aria-current="true"]{color:#FFFFFF;border-bottom:1px solid #FFFFFF}
@media (min-width:900px){
  .lingue{margin-left:26px;margin-right:0;font-size:12px}
  .lingua{min-height:0;padding:2px 3px}
}

/* ── il marchio dell'agenzia nel menu a tendina ── */
.nav-marchio{
  width:190px;max-width:70%;height:auto;
  margin-top:34px;opacity:.85;
}
@media (min-width:900px){ .nav-marchio{display:none} }

/* ── il marchio nel piede ── */
.foot-marchio{
  width:170px;height:auto;margin:0 0 22px;opacity:.8;
}
.site-foot .foot-inner{padding-top:20px;border-top:1px solid var(--on-dark-line)}
@media (min-width:760px){ .foot-marchio{width:190px;margin-bottom:26px} }

/* ── la fascia fotografica in cima alla pagina dello studio ── */
.fascia-studio .ph{
  aspect-ratio:3/4;border:0;
}
.fascia-studio .ph img{object-position:center 40%}
@media (min-width:700px){
  .fascia-studio .ph{aspect-ratio:16/9;max-height:76vh}
  .fascia-studio .ph img{object-position:center 34%}
}

/* ── la mappa dell'ufficio ── */
.mappa-guscio--media #mappa{height:min(46vh,380px)}
.indirizzo-ufficio{
  display:flex;flex-direction:column;gap:5px;
  padding-top:26px;
}
.ind-via{font-family:"Montserrat",system-ui,sans-serif;font-size:21px}
.ind-citta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.indirizzo-ufficio .more{margin-top:12px;align-self:flex-start}


/* ══════════ LE DUE ANTE DELL'INGRESSO ══════════
   Al primo ingresso il sito e' coperto da due ante nere che si
   scostano. Sono nascoste di base: le accende la classe .con-ante,
   messa dalla testa della pagina PRIMA che si veda qualcosa.
   Chi non ha JavaScript, o ha chiesto meno movimento, non le vede mai. */
.ante{position:fixed;inset:0;z-index:1200;pointer-events:none;display:none}
.con-ante .ante{display:block}
.anta{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:#000000;
  transition:transform 1.5s cubic-bezier(.72,0,.18,1);
  will-change:transform;
}
/* Qui c'era un filo di luce bianca fra le due ante: in apertura, su
   telefono, si leggeva come una sfumatura chiara. Tolto. */
.anta.sx{left:0}
.anta.dx{right:0}
body.aperto .anta.sx{transform:translateX(-100%)}
body.aperto .anta.dx{transform:translateX(100%)}

/* ══════════ MARCHI — regole del manuale BHHS 2024 ══════════
   Il marchio non si deforma (p.68): mai width e height forzate insieme.
   Niente ombre, filtri, rotazioni, ritagli (p.68).
   Marchio Luxury mai sotto 72 px di larghezza, nemmeno su telefono (p.62),
   e attorno va lasciato vuoto pari all'altezza del suo cerchio. */
.wordmark{display:flex;align-items:center;padding:6px 0}
.wordmark img{height:26px;width:auto;display:block}
@media (min-width:900px){ .wordmark img{height:30px} }

.marchio-lux{
  position:absolute;right:0;bottom:0;z-index:3;
  /* larghezza esplicita: essendo in posizione assoluta, senza questa il
     riquadro si restringe sul contenuto e il marchio collassa al minimo */
  width:calc(104px + var(--gut));
  padding:0 var(--gut) 26px 0;
}
.marchio-lux img{
  width:104px;      /* manuale p.62: mai sotto 72 px, nemmeno su telefono */
  height:auto;display:block;
}
@media (min-width:700px){
  .marchio-lux{width:calc(140px + var(--gut));padding-bottom:38px}
  .marchio-lux img{width:140px}
}

.foot-legale{
  margin:0 0 18px;font-size:11px;line-height:1.6;color:var(--on-dark-soft);
  max-width:78ch;
}

/* ══════════ IL VIDEO DELL'AGENZIA IN APERTURA ══════════
   Il filmato e' verticale, girato col telefono: su uno schermo stretto
   riempie tutto, su uno largo verrebbe stirato. Quindi compare solo sul
   telefono, e sul computer resta la fotografia della sede. */
.apertura-video{display:none}
@media (max-width:699px){
  .apertura-video{
    display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:center 42%;
    background:#000000;
  }
  /* con il video acceso la fotografia sotto non serve */
  .ritratto.con-video .ph{visibility:hidden}
}
/* chi ha chiesto meno movimento non vede un video che parte da solo:
   resta il fotogramma di copertina, fermo */
@media (prefers-reduced-motion:reduce){
  .apertura-video{display:none!important}
  .ritratto.con-video .ph{visibility:visible!important}
}

/* ══════════ COLLEZIONE RISERVATA e VALUTAZIONE ══════════ */
.riservata{display:grid;gap:36px}
.riservata-testo p{margin:0 0 18px;color:var(--on-dark-soft);font-size:15.5px;line-height:1.7;max-width:52ch}
.riservata-forte{
  font-family:"Montserrat",system-ui,sans-serif;font-size:20px;line-height:1.4;
  color:#FFFFFF!important;max-width:30ch;
}
.val-testo p{margin:0 0 18px;color:var(--soft);font-size:15.5px;line-height:1.7;max-width:58ch}
.val-testo .riservata-forte{color:var(--ink)!important}

/* le tre barriere abbassate */
.tre-barriere{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 34px;padding:0;
}
.tre-barriere li{
  font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);padding:9px 16px;
}
@media (min-width:840px){
  .riservata{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .riservata-forte{font-size:26px}
}

/* ══════════════════════════════════════════════════════════
   TUTTO CENTRATO, TESTI GIUSTIFICATI
   Richiesta del committente. Sul testo corrente uso justify
   INSIEME a hyphens:auto: senza la sillabazione, giustificare
   su una colonna stretta da telefono apre voragini fra le
   parole. Con la sillabazione le righe si riempiono davvero.
   ══════════════════════════════════════════════════════════ */
html{hyphens:auto;-webkit-hyphens:auto}

.inner,
.page-head .inner,
.sec > .inner{text-align:center}

/* titoli e occhielli al centro */
h1,h2,h3,h4,
.sec-h,.sec-dek,.page-head p,
.frase p,.banda-testo,.cta-band,
.riservata-forte,.val-testo,
.consigli-sotto,.nota-listino{text-align:center}

/* i paragrafi lunghi: giustificati e centrati come blocco */
.about p,.riservata-testo p,.val-testo p,
.sec-dek,.page-head p,.advice-grid p,.post p,
.contatti-lead,.contact-lead,.avviso-scheda,
.foot-legale,.privacy,.form .hint{
  text-align:justify;
  text-align-last:center;      /* l'ultima riga resta centrata, non stirata */
  margin-left:auto;margin-right:auto;
}

/* i blocchi di testo prendono una misura leggibile e stanno al centro */
.sec-dek,.page-head p,.avciso,.avviso-scheda,.foot-legale{max-width:62ch}
.riservata-forte{margin-left:auto;margin-right:auto}
.creds,.tre-barriere,.specs,.chips{justify-content:center}
.ultimo,.scheda,.membro{text-align:center}
.scheda{grid-template-columns:1fr;grid-template-areas:"zona" "citta" "prezzo" "dati";gap:4px;justify-items:center}
.scheda-dati{text-align:center}
.ultimo{grid-template-columns:1fr;grid-template-areas:"foto" "zona" "citta" "prezzo" "dati";justify-items:center}
.ultimo-dati{text-align:center}
.dato{justify-content:center;gap:10px;flex-direction:column;text-align:center}
.contact-list li{align-items:center}
.contact-list a{width:auto}
.field label{text-align:center}
.btn{align-self:center}
.form{align-items:stretch}
.foot-inner{flex-direction:column;text-align:center;align-items:center}
.foot-marchio{margin-left:auto;margin-right:auto}
.more{margin-left:auto;margin-right:auto;display:table}
.banda-mappa{flex-direction:column;text-align:center;gap:18px}
.banda-testo{align-items:center}
.about{justify-items:center}
.riservata{justify-items:center}
.riservata-testo{max-width:56ch}

/* l'apertura: nome e pulsanti al centro */
.ritratto-nome{text-align:center}
.insegna{margin:0 auto 14px;display:block;max-width:min(74vw,300px)}
.insegna img{width:100%;height:auto;display:block}
.ritratto-nome p{margin-left:auto;margin-right:auto;max-width:34ch;text-align:center}

/* ── il pulsante Contattaci: tre modi in tre tocchi ── */
.apri-contatti{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-top:22px;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;
  border:1px solid rgba(255,255,255,.55);
  font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;
  transition:background 200ms ease,color 200ms ease;
}
.pill:hover{background:#FFFFFF;color:#000000}
@media (min-width:700px){
  .insegna{max-width:340px}
  .apri-contatti{margin-top:28px;gap:12px}
  .pill{padding:0 26px;font-size:12.5px}
}

/* la testata resta ai lati: logo a sinistra, comandi a destra */
.site-head{text-align:left}
.wordmark img{height:30px}
@media (min-width:900px){ .wordmark img{height:38px} }
@media (min-width:1280px){ .wordmark img{height:44px} }

/* la sillabazione serve SOLO ai paragrafi giustificati.
   Su titoli, occhielli e righe in maiuscolo spaziato spezzava le
   parole a meta' ("NEL CEN-TRO DI ROMA"): li' va spenta. */
h1,h2,h3,h4,
.sec-h,.ritratto-nome p,.hero-sub,.banda-titolo,.banda-sotto,
.pill,.creds li,.tre-barriere li,.specs li,.scheda-zona,.scheda-citta,
.scheda-prezzo,.scheda-dati,.ultimo-zona,.ultimo-citta,.ultimo-prezzo,
.ultimo-dati,.membro .nome,.membro .ruolo,.kicker,.readtime,.lab,
.dato dt,.dato dd,.foot-inner,.price,.loc,.tagline,.more,.btn,
.intro-name,.intro-role,.wordmark,.site-nav a,.lingua,
.porta-titolo,.porta-sotto,.porta-num,.porta-new,
.ris-zona,.ris-citta,.ris-prezzo,.ris-dati,.bollo-lux,.pag-tasto{
  hyphens:none;-webkit-hyphens:none;
}

/* i tre modi di contatto stanno in una riga sola anche a 375 px */
@media (max-width:520px){
  .apri-contatti{gap:7px;flex-wrap:nowrap}
  .pill{padding:0 12px;font-size:10.5px;letter-spacing:.1em;flex:1}
}

/* ══════════ RITOCCHI ALL'APERTURA ══════════ */

/* 1. il marchio Luxury in testata, piu' grande */
.wordmark img{height:40px}
@media (min-width:900px){ .wordmark img{height:48px} }
.site-head{height:auto;min-height:var(--head-h);padding-block:12px}

/* 2. il logo dell'ufficio piu' in basso, vicino al fondo */
.ritratto-nome{padding-bottom:30px}
@media (min-width:700px){ .ritratto-nome{padding-bottom:40px} }

/* 3. la frase sotto il logo: due righe, non spezzate */
.ritratto-nome p{max-width:none;line-height:1.9}

/* 4. IL BIANCO COMINCIA PIU' GIU'
   L'apertura e' alta quanto lo schermo, ma su iPhone la barra degli
   indirizzi si nasconde e si scopre una striscia di quello che c'e'
   sotto. Invece di rincorrere le altezze dello schermo, la sezione
   subito dopo il video e' nera: la striscia che si scopre e' nera
   anche lei, e il bianco parte dopo. */
.frase{
  background:var(--dark);color:var(--on-dark);
  border-bottom:0;
  padding-top:56px;
}
.frase p{color:#FFFFFF}
@media (min-width:700px){ .frase{padding-top:84px} }

/* ══════════ IL LOGO DELL'UFFICIO, CENTRATO DAVVERO ══════════ */
.ritratto-nome{display:flex;flex-direction:column;align-items:center}
.insegna{margin:0 0 14px;width:min(74vw,290px);max-width:none}
@media (min-width:700px){ .insegna{width:330px} }

/* ══════════ I TRE RIQUADRI-PULSANTE ══════════ */
/* ══════════ IL RIQUADRO GRANDE ══════════
   Stessa famiglia di Chiama / WhatsApp / Email -- profilo bianco
   sottile, maiuscoletto spaziato, si riempie di bianco al tocco --
   ma grande quanto serve perche' sia l'unica cosa da toccare. */
.tre-porte-sez{padding:34px 0 26px;border-bottom:0}
.riquadro{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:170px;padding:34px 22px;text-align:center;
  border:1px solid rgba(255,255,255,.55);color:#FFFFFF;
  transition:background 220ms ease,color 220ms ease;
}
.riquadro-num{
  font-family:"Montserrat",system-ui,sans-serif;font-size:46px;line-height:1;
}
.riquadro-titolo{
  font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
}
.riquadro-sotto{
  font-family:"Manrope",Arial,sans-serif;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-soft);max-width:30ch;
}
.riquadro-freccia{margin-top:8px;color:rgba(255,255,255,.62)}
.riquadro-freccia svg{width:32px;height:10px;display:block}
.riquadro:hover,.riquadro:focus-visible{background:#FFFFFF;color:#000000}
.riquadro:hover .riquadro-sotto,.riquadro:hover .riquadro-freccia{color:#000000}
@media (prefers-reduced-motion:reduce){ .riquadro{transition:none} }
@media (min-width:760px){
  .riquadro{min-height:220px;padding:44px 30px}
  .riquadro-num{font-size:60px}
  .riquadro-titolo{font-size:13px}
}

/* ══════════ GLI ULTIMI ARRIVATI ══════════ */
.ultimi-sez{padding-top:10px}
.ultimi-sez .sec-h{margin-bottom:22px}
.ultimo-foto{
  grid-area:foto;position:relative;display:block;overflow:hidden;
  aspect-ratio:3/2;margin-bottom:12px;background:rgba(255,255,255,.06);
}
.ultimo-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════ CHI SIAMO ══════════ */
.chi-siamo{padding:0}
.chi-foto .ph{aspect-ratio:3/4;border:0;max-height:78vh}
@media (min-width:760px){ .chi-foto .ph{aspect-ratio:16/10;max-height:74vh} }
.chi-testo{padding-block:44px 52px}
.chi-testo h2{margin-bottom:20px}
.chi-testo p{
  max-width:56ch;margin-left:auto;margin-right:auto;
  /* Centrato, con le righe bilanciate: il browser sceglie dove andare
     a capo perche' non resti una parola sola in fondo. E niente
     sillabazione: una parola spezzata, in mezzo a un testo centrato,
     si nota subito. */
  text-align:center;
  text-wrap:pretty;
  hyphens:none;-webkit-hyphens:none;
}
.chi-testo h2{text-wrap:balance;hyphens:none;-webkit-hyphens:none}
.chi-link{margin-top:26px}
@media (min-width:700px){ .chi-testo{padding-block:64px 76px} }

/* ══════════ MENU A TENDINA: titoli piu' piccoli e al centro ══════════ */
@media (max-width:899px){
  .site-nav{align-items:center;text-align:center;gap:0}
  .site-nav a{
    font-family:"Montserrat",system-ui,sans-serif;
    font-size:19px;letter-spacing:.04em;
    padding:13px 0;width:100%;text-align:center;
  }
  .site-nav a[aria-current="page"]::before{content:none}
  .site-nav a[aria-current="page"]{color:#FFFFFF;text-decoration:underline;text-underline-offset:6px}
  .nav-tel{font-size:12px!important;margin-top:22px}
  .nav-social{margin-top:24px}
}

/* la fascia nera dopo il video: alta circa la meta' di quanto era
   la sezione della frase che stava qui prima */
.fascia-nera{background:var(--dark);height:95px}
@media (min-width:700px){ .fascia-nera{height:140px} }

/* logo dell'ufficio in testata, marchio Luxury al centro dell'apertura */
.wordmark img{height:30px}
@media (min-width:900px){ .wordmark img{height:36px} }
.insegna{width:min(56vw,215px)}
@media (min-width:700px){ .insegna{width:260px} }

/* ══════════ LA RICERCA: FILTRI E RISULTATI ══════════ */
.filtri-sez{background:var(--dark);color:var(--on-dark);padding:18px 0 20px}

/* I filtri stanno ripiegati dentro <details>: si apre da solo, senza
   JavaScript. Il triangolino di serie va tolto in due modi diversi,
   uno per Safari e uno per tutti gli altri. */
/* Il bollo Luxury Collection sulla fotografia. Sta in basso a sinistra,
   su una banda scura, perche' sopra una foto chiara il bianco sparisce. */
.bollo-lux{
  position:absolute;left:0;bottom:0;z-index:2;
  background:rgba(0,0,0,.78);color:#FFFFFF;
  font-family:"Manrope",Arial,sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  padding:7px 11px;
}
.ris-foto{position:relative;display:block;overflow:hidden}

/* L'esca per i programmi: fuori dallo schermo, non display:none --
   certi robot saltano quello che e' nascosto del tutto, mentre questo
   lo compilano e si tradiscono. Le persone non la vedono e non ci
   finiscono nemmeno col tasto di tabulazione. */
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.esito{
  margin:14px 0 0;padding:12px 14px;font-size:14px;line-height:1.6;
  border-left:2px solid var(--line);
}
.esito--bene{border-left-color:var(--ink);background:rgba(0,0,0,.035)}
.esito--male{border-left-color:var(--cabernet);background:rgba(103,0,56,.06)}
.esito--male a{border-bottom:1px solid currentColor}
.dark .esito,.riservata .esito{color:var(--on-dark)}
.dark .esito--bene{background:rgba(255,255,255,.07);border-left-color:#FFFFFF}
.dark .esito--male{background:rgba(255,255,255,.07)}

.solo-voce{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.filtri-box{border:0}
.filtri-tasto{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 16px;
  border:1px solid var(--on-dark-line);
  font-family:"Manrope",Arial,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#FFFFFF;
}
.filtri-tasto::-webkit-details-marker{display:none}
.filtri-tasto:hover{border-color:#FFFFFF}
/* display:inline-flex batte il display:none che il browser da' da solo
   agli elementi con hidden: senza questa riga il pallino comparirebbe
   anche a zero filtri. */
.filtri-quanti[hidden]{display:none}
.filtri-quanti{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#FFFFFF;color:#000000;font-size:11px;letter-spacing:0;
}
.filtri-freccia svg{width:13px;height:9px;display:block;transition:transform 200ms ease}
.filtri-box[open] .filtri-freccia svg{transform:rotate(180deg)}
.filtri-box[open] .filtri-tasto{border-bottom-color:transparent}
.filtri-box .filtri{padding:16px 0 4px}
@media (prefers-reduced-motion:reduce){ .filtri-freccia svg{transition:none} }
.filtri{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.filtri .f{display:flex;flex-direction:column;gap:5px}
.filtri label{
  font-family:"Manrope",Arial,sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);text-align:left;
}
.filtri select{
  font:inherit;font-size:14px;color:#FFFFFF;
  background:rgba(255,255,255,.07);border:1px solid var(--on-dark-line);
  padding:11px 28px 11px 12px;border-radius:0;-webkit-appearance:none;appearance:none;
  text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,#FFF 50%),linear-gradient(135deg,#FFF 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  min-height:44px;
}
.filtri select option{background:#111111;color:#FFFFFF}
.azzera{
  grid-column:1/-1;font:inherit;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;color:var(--on-dark-soft);
  border:1px solid var(--on-dark-line);padding:12px;cursor:pointer;min-height:44px;
}
.azzera:hover{color:#FFFFFF;border-color:#FFFFFF}
.conteggio{
  margin:16px 0 0;font-family:"Manrope",Arial,sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);text-align:center;
}
.conteggio #conteggio{color:#FFFFFF;font-weight:800}
.conteggio a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.4)}
@media (min-width:700px){
  .filtri{grid-template-columns:repeat(4,1fr);gap:16px}
  .azzera{grid-column:auto;align-self:end}
}
/* Otto caselle (sette filtri piu' il tasto per azzerare). Con sei
   colonne ne restavano due orfane, una per riga, e la fila sembrava
   rotta. Quattro per riga fanno due righe piene. */
@media (min-width:1000px){ .filtri{grid-template-columns:repeat(4,1fr)} }

/* ══════════ LA GALLERIA DELL'IMMOBILE ══════════
   Un nastro che scorre in orizzontale e si aggancia a ogni scatto.
   Lo scorrimento col dito e l'aggancio li fa il browser da solo: il
   JavaScript serve solo alle frecce e al contatore. Se lo script non
   parte, col dito si sfoglia lo stesso. */
.galleria{position:relative;margin:0 0 26px}
.galleria-nastro{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  gap:0;background:var(--dark);
}
.galleria-nastro::-webkit-scrollbar{display:none}
.galleria-foto{
  flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;
  aspect-ratio:3/2;background:var(--dark);
}
.galleria-foto img{width:100%;height:100%;object-fit:cover;display:block}
.galleria-freccia{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:0;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);color:#FFFFFF;
}
.galleria-freccia svg{width:10px;height:18px;display:block}
.galleria-freccia:hover{background:rgba(0,0,0,.78)}
.galleria-freccia.sx{left:0}
.galleria-freccia.dx{right:0}
.galleria-freccia[disabled]{opacity:.25;cursor:default}
/* Le frecce servono a chi ha un mouse. Sul telefono c'e' il dito. */
@media (hover:hover) and (min-width:760px){ .galleria-freccia{display:flex} }
.galleria-conta{
  position:absolute;right:12px;bottom:12px;margin:0;
  background:rgba(0,0,0,.6);color:#FFFFFF;
  font-family:"Manrope",Arial,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;padding:5px 10px;
}
.galleria-nastro:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
@media (min-width:760px){
  .galleria{margin-bottom:34px}
  .galleria-foto{aspect-ratio:16/9}
}

/* il racconto dell'immobile */
.racconto{max-width:60ch;margin:26px auto 0;text-align:left}
.racconto p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--ink)}
.racconto p:last-child{color:var(--soft);font-size:14px}

/* ══════════ I NUMERI DI PAGINA ══════════ */
.pagine{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
  margin:34px 0 4px;
}
.pag-tasto{
  font-family:"Manrope",Arial,sans-serif;font-size:13px;font-weight:700;
  min-width:44px;height:44px;padding:0 10px;
  background:transparent;color:var(--ink);
  border:1px solid var(--line);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.pag-tasto:hover:not(:disabled){border-color:var(--nero);}
.pag-tasto--qui{background:var(--nero);color:#FFFFFF;border-color:var(--nero)}
.pag-tasto:disabled{opacity:.28;cursor:default}
.pag-punti{color:var(--soft);padding:0 2px;letter-spacing:.08em}

.risultati{display:grid;gap:22px}
.ris{display:flex;flex-direction:column;gap:0;text-align:center}
.ris-foto{display:block;aspect-ratio:3/2;overflow:hidden;background:#F2F2F2}
.ris-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms cubic-bezier(.2,0,.2,1)}
.ris:hover .ris-foto img{transform:scale(1.04)}
.ris-vuota{
  background-image:repeating-linear-gradient(135deg,#E0E0E0 0 1px,transparent 1px 12px);
  border:1px solid #E0E0E0;
}
.ris-corpo{display:flex;flex-direction:column;gap:4px;padding-top:14px}
.ris-zona{font-family:"Montserrat",system-ui,sans-serif;font-size:19px;line-height:1.25}
.ris-citta{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ris-prezzo{
  font-family:"Manrope",Arial,sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.01em;margin-top:3px;
}
.ris-dati{font-size:12.5px;color:var(--soft)}
.niente{margin:34px auto 0;max-width:48ch;color:var(--soft);text-align:center}
@media (min-width:640px){ .risultati{grid-template-columns:1fr 1fr;gap:26px} }
@media (min-width:1000px){ .risultati{grid-template-columns:repeat(3,1fr);gap:30px} }

/* le celle di una griglia non si restringono sotto il contenuto, se non
   glielo si dice: senza queste due righe i menu a tendina sfondano a destra */
.filtri .f{min-width:0}
.filtri select,.filtri .azzera{width:100%;max-width:100%;box-sizing:border-box}