/* ============================================================
   ITALMEDIA × grammatica Dysrupt — tema carta da manifesto
   salvia rgb(0,142,134) · magenta rgb(255,63,108) · lavanda #B6B5D8
   ============================================================ */
:root{
  --ink:      #0a0d0c;            /* nero (lievissimo cast verde) — sfondo */
  --ink-2:    #121816;           /* pannelli */
  --ink-3:    #172420;
  --paper:    #f2f0ea;           /* testo chiaro */
  --grey:     #8b9490;
  --salvia:   #9ed8b5;
  --salvia-l: #9ed8b5;   /* salvia leggibile su nero */
  --magenta:  #ec4f6a;
  --condo:    #B6B5D8;
  --condo-l:  #B6B5D8;            /* lilla, leggibile su nero */
  --condo-2:  #9d9bc9;
  --rule:     rgba(242,240,234,.16);
  --rule-2:   rgba(242,240,234,.34);
  --u-grey:   rgba(242,240,234,.28);
  --ease:     cubic-bezier(.19,1,.22,1);
  --disp:     'Inter Tight','Inter','Helvetica Neue',sans-serif;
  --body:     'Inter','Helvetica Neue',sans-serif;
}
@media (min-width:1900px){ :root{ font-size:.5208333vw } }
@media (max-width:1899px) and (min-width:992px){ :root{ font-size:.6944444vw } }
@media (max-width:991px) and (min-width:599px){ :root{ font-size:1.77936vw } }
@media (max-width:598px){ :root{ font-size:2.6666667vw } }

*{ margin:0; padding:0; box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top:10rem; overscroll-behavior-y:none }
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:1.5rem; line-height:1.65;
  overflow-x:hidden;
}
main{ overflow-x:clip }         /* nulla sborda in orizzontale */
/* selezione del testo: Safari rende semitrasparente un colore pieno, e dove le righe si sovrappongono
   compaiono strisce più scure. Con un'opacità del 99% il colore resta pieno e uguale su tutti i browser. */
::selection{ background:rgba(236,79,106,.99); color:#fff; text-shadow:none }
::-moz-selection{ background:rgba(236,79,106,.99); color:#fff }
a{ color:inherit; text-decoration:none }
a[href^="privacypolicy"], .u-underline{ text-decoration:underline; text-decoration-color:var(--u-grey); text-underline-offset:.3em }
img,svg{ display:block; max-width:100% }
:focus-visible{ outline:2px solid var(--salvia-l); outline-offset:3px }

body::after{
  content:''; position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.03;
  will-change:transform; transform:translateZ(0);   /* livello proprio, nessuna fusione: non rallenta le animazioni */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before{
  content:''; position:fixed; top:0; left:0; right:0; height:.3rem; z-index:997;
  background:var(--u-grey);
}

/* -------- scala tipografica -------- */
.t-mega  { font-family:var(--disp); font-weight:700; font-size:9.2rem; line-height:.98; letter-spacing:-.035em }
.t-sec   { font-family:var(--disp); font-weight:700; font-size:6.4rem; line-height:1;  letter-spacing:-.03em }
.t-h3    { font-family:var(--disp); font-weight:600; font-size:3.2rem; line-height:1.08; letter-spacing:-.02em }
.t-h4    { font-family:var(--disp); font-weight:600; font-size:2.4rem; line-height:1.15; letter-spacing:-.015em }
.t-lead  { font-size:2.1rem; line-height:1.45; letter-spacing:-.01em }
.t-body  { font-size:1.7rem; color:var(--grey) }
.t-label { font-family:var(--body); font-weight:600; font-size:1.5rem; letter-spacing:.14em; text-transform:uppercase }
.t-nmb   { font-family:var(--body); font-weight:600; font-size:1.3rem; letter-spacing:.08em }
@media (max-width:991px){
  .t-mega{ font-size:4.6rem; letter-spacing:-.03em }
  .t-sec { font-size:3.8rem }
  .t-lead{ font-size:1.8rem }
}
.o-container{ width:100%; max-width:160rem; margin:0 auto; padding:0 4rem }
@media (max-width:598px){ .o-container{ padding:0 2rem } }
.c-salvia{ color:var(--salvia-l) }
.c-magenta{ color:var(--magenta) }
.hline{ height:1px; background:var(--rule); width:100% }

/* -------- cursore -------- */
.cursor{
  position:fixed; z-index:999; left:0; top:0; width:1rem; height:1rem;
  background:#fff; pointer-events:none; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease);
  will-change:transform;   /* livello proprio: muoverlo non ridisegna la pagina sotto */
}
body.cur-hov .cursor{ width:5.2rem; height:5.2rem }
body.cur-big .cursor{ width:9rem; height:9rem; background:var(--paper); mix-blend-mode:difference }
@media (pointer:coarse){ .cursor{ display:none } }
body.cur-off .cursor{ opacity:0 }

/* -------- freccia corner-cut -------- */
.aico{ width:.8rem; height:1.6rem; flex:none }
.aico svg{ width:100%; height:100% }

/* -------- bottone -------- */
.c-bttn{
  display:inline-flex; align-items:center; gap:1.6rem;
  padding:1.5rem 2.4rem; border:1px solid var(--rule-2);
  position:relative; overflow:hidden; cursor:pointer;
  font-family:var(--body); background:transparent; color:var(--paper);
}
.c-bttn::before{
  content:''; position:absolute; inset:0; background:var(--salvia);
  transform:scale3d(1,0,1); transform-origin:50% 0;
  transition:transform .6s var(--ease);
}
.c-bttn.is-magenta::before{ background:var(--magenta) }
.c-bttn>*{ position:relative; z-index:1; transition:transform .45s var(--ease) }
.c-bttn .ico-wrap{ position:relative; width:.8rem; height:1.6rem; overflow:hidden }
.c-bttn .aico{ position:absolute; inset:0; transition:transform .45s var(--ease) }
.c-bttn .aico.hov{ transform:translateX(-140%) }
.c-bttn:hover::before{ transform:scale3d(1,1,1); transform-origin:50% 100% }
.c-bttn:hover{ color:var(--ink) }
.c-bttn:hover .aico.act{ transform:translateX(140%) }
.c-bttn:hover .aico.hov{ transform:translateX(0) }
.c-bttn:hover .lbl{ transform:translateX(.5rem) }

/* -------- link nav -------- */
.nv{
  position:relative; display:inline-block; padding:.6rem .5rem; overflow:hidden;
  transition:color .45s var(--ease);
}
.nv::before{
  content:''; position:absolute; inset:0; background:var(--salvia);
  transform:scale3d(1,0,1); transform-origin:50% 0; z-index:-1;
  transition:transform .55s var(--ease);
}
.nv:hover{ color:var(--ink) }
.nv:hover::before{ transform:scale3d(1,1,1); transform-origin:50% 100% }
.nv.is-magenta::before{ background:var(--magenta) }
.nv.is-condo::before{ background:var(--condo) }
.nv.is-condo:hover{ color:var(--ink) }

/* ============================================================ NAV */
.nav{
  position:fixed; z-index:100; top:0; left:0; right:0;
  transition:border-color .4s;
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top, 0px);   /* iPhone: la barra sale fin sotto ora e batteria e copre quella fascia */
}
/* fondo sfocato su un livello a parte: se la sfocatura fosse sulla .nav, Safari (iPhone) chiuderebbe
   il menu a tendina dentro l'altezza della barra. Cosi' la barra resta identica e il menu funziona ovunque */
.nav::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(10,13,12,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transition:opacity .4s }
.nav.scrolled::before{ opacity:1 }
/* fascia di ora e batteria su iPhone: sempre piena, anche quando la barra e' trasparente */
.nav::after{ content:''; position:absolute; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); background:var(--ink); z-index:-1; pointer-events:none }
.nav.scrolled{ border-bottom-color:var(--rule) }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:8.4rem }
.brand{ display:flex; align-items:center; gap:1rem }
.brand__logo{ height:3rem; width:auto }
.brand__word{ display:flex; align-items:baseline; gap:1rem }
.brand__word b{ font-family:var(--disp); font-weight:700; font-size:2.2rem; letter-spacing:-.02em }
.brand__word b .dot{ color:var(--magenta) }
.brand__word span{ font-size:1.1rem; color:var(--grey); letter-spacing:.1em; text-transform:uppercase }
.nav__links{ display:flex; align-items:center; gap:2.4rem }
.nav__links .nv{ font-size:1.35rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase }
.nav__links .nv.is-condo-nav{ color:var(--paper) }
.nav.scrolled .nav__links .nv.is-condo-nav{ color:var(--paper) }
.nav__links .nv.is-condo-nav::before{ background:var(--condo) }
.nav__links .nv.is-condo-nav:hover{ color:var(--ink) }
.lang{ display:inline-flex; align-items:center; gap:.7rem; margin-left:.2rem }
.lang__o{ display:block; width:2.1rem; height:1.4rem; border-radius:.3rem; overflow:hidden;
  opacity:.28; transition:opacity .3s, box-shadow .3s }
.lang__o svg{ display:block; width:100%; height:100% }
.lang__o:hover{ opacity:.7 }
.lang__o.is-on{ opacity:1; box-shadow:0 0 0 1px rgba(242,240,234,.55); cursor:default }
.nav__cta{ display:inline-flex; align-items:center; gap:1.2rem; font-size:1.2rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia-l) }
.burger{ display:none }
/* --- mobile: pannello che scorre da destra --- */
@media (max-width:991px){
  /* iPhone: Safari colora la fascia di ora e batteria con il fondo della barra fissa in alto.
     Se la barra e' trasparente, li' si vede scorrere la pagina: quindi su telefono la barra e' nera piena, sempre */
  .nav, .nav.scrolled{ background-color:#000; border-bottom-color:var(--rule) }
  .nav::before, .nav::after{ display:none }
  /* Safari prende il PRIMO elemento fisso in cima allo schermo per colorare la fascia dell'ora.
     La grana su tutta la pagina e la linea grigia in alto sono fisse e quasi trasparenti: Safari vedeva quelle
     e lasciava trasparire il testo. Su telefono le togliamo: in cima resta solo la barra nera, come fa APA */
  body::before, body::after{ display:none !important }
  .nav__links{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(34rem, 86vw); height:100svh;
    background:var(--ink-2); border-left:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:calc(11rem + env(safe-area-inset-top, 0px)) 2.6rem calc(3rem + env(safe-area-inset-bottom, 0px));
    transform:translateX(110%); transition:transform .55s var(--ease);
    box-shadow:-2rem 0 6rem rgba(16,32,28,.12);
    z-index:99;
  }
  .nav__links.open{ transform:translateX(0) }
  .nav__links .nv{ font-size:1.9rem; padding:1.5rem .2rem; width:100%; border-bottom:1px solid var(--rule) }
  .nav__cta{ margin-top:2.4rem; font-size:1.4rem }
  .lang{ margin:2.8rem 0 0; gap:1.2rem }
  .lang__o{ width:3rem; height:2rem }
  .burger{
    display:flex; flex-direction:column; gap:.6rem; background:none; border:0;
    cursor:pointer; padding:1rem; position:relative; z-index:101;
  }
  .burger span{ width:2.6rem; height:2px; background:var(--paper); transition:transform .4s var(--ease), opacity .3s }
  .burger.open span:nth-child(1){ transform:translateY(.8rem) rotate(45deg) }
  .burger.open span:nth-child(2){ opacity:0 }
  .burger.open span:nth-child(3){ transform:translateY(-.8rem) rotate(-45deg) }
}

/* ============================================================ HERO */
.hero{ padding:16rem 0 0 }
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:6rem; align-items:center }
.hero__title{ max-width:120rem; overflow-wrap:break-word }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.08em }
.hero__title .ln>span{ display:block; transform:translateY(115%); transition:transform 1s var(--ease) }
body.loaded .hero__title .ln>span{ transform:translateY(0) }
body.loaded .hero__title .ln:nth-child(2)>span{ transition-delay:.08s }
body.loaded .hero__title .ln:nth-child(3)>span{ transition-delay:.16s }
.hero__cta{ margin-top:4.8rem; display:flex; align-items:center; gap:3rem; flex-wrap:wrap }
.hero__sub{ max-width:44rem; color:var(--grey); font-size:1.5rem }

/* quartieri di Roma — scroller verticale in prospettiva (stile OUTFRONT case studies) */
.hero__right{ display:flex; align-items:center; justify-content:flex-end }
.qrt{ width:100% }
.qrt__stage{
  position:relative; height:46rem; overflow:hidden;
  perspective:110rem; perspective-origin:50% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
/* il piano inclinato — è QUI la prospettiva permanente, stile OUTFRONT:
   rotateX piega il piano indietro, rotateY lo fa recedere verso destra,
   rotate dà la diagonale alle righe */
.qrt__plane{
  position:absolute; inset:-8rem -2rem; display:flex; align-items:flex-start;
  transform:rotateX(14deg) rotateY(-16deg) rotate(6deg);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .8s var(--ease);
}
.qrt__stage:hover .qrt__plane{ transform:rotateX(10deg) rotateY(-11deg) rotate(4deg) }
.qrt__track{
  display:flex; flex-direction:column; transform-style:preserve-3d;
  animation:qrtscroll var(--qdur,28s) linear infinite; will-change:transform;
  padding-left:6rem;
}
@keyframes qrtscroll{ from{ transform:translateY(0) } to{ transform:translateY(calc(-1 * var(--qshift,50%))) } }
.qrt__stage:hover .qrt__track{ animation-play-state:paused }
.qrt__item{
  position:relative; display:flex; align-items:center; gap:1.6rem;
  padding:1.5rem 2.6rem 1.5rem 1.8rem;
  font-family:var(--disp); font-weight:700; font-size:5.6rem; line-height:1;
  letter-spacing:-.03em; color:var(--paper); white-space:nowrap;
  transition:opacity .5s var(--ease), transform .6s var(--ease), color .3s;
  transform:translateZ(0);
}
/* pannello che sale dal basso, come i tasti dell'header — vive sul piano
   inclinato, quindi si riempie IN PROSPETTIVA insieme alla parola */
.qrt__item::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:scale3d(1,0,1); transform-origin:50% 0;
  transition:transform .55s var(--ease);
}
.qrt__item[data-c="s"]::before{ background:var(--salvia) }
.qrt__item[data-c="m"]::before{ background:var(--magenta) }
.qrt__item:hover::before{ transform:scale3d(1,1,1); transform-origin:50% 100% }
.qrt__item .nmb{
  font-family:var(--body); font-weight:600; font-size:1.3rem; letter-spacing:.08em;
  color:var(--grey); width:4.2rem; flex:none; transition:color .35s;
}
/* hover sullo stage: la lista si ferma, gli altri si spengono,
   il puntato viene avanti (translateZ) mentre il pannello lo riempie dal basso */
.qrt__stage:hover .qrt__item{ opacity:.22 }
.qrt__stage .qrt__item:hover{ opacity:1; transform:translateZ(9rem) translateX(.8rem); color:var(--ink) }
.qrt__item:hover .nmb{ color:rgba(10,13,12,.65) }
.qrt__cap{
  margin-top:1.4rem; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
}
.qrt__cap b{ color:var(--paper) }
@media (max-width:991px){
  .hero{ padding-top:13rem }
  .hero__grid{ grid-template-columns:1fr; gap:4rem }
  .hero__right{ order:2; justify-content:flex-start }
  .qrt__stage{ height:30rem; perspective:80rem }
  .qrt__plane{ inset:-5rem -1rem; transform:rotateX(11deg) rotateY(-10deg) rotate(4deg) }
  .qrt__track{ padding-left:2rem }
  .qrt__item{ font-size:3.4rem }
}
@media (prefers-reduced-motion:reduce){
  .qrt__track{ animation:none }
  .qrt__plane{ position:static; inset:auto; transform:none }
  .qrt__stage{ -webkit-mask-image:none; mask-image:none; overflow-y:auto }
  .qrt__stage:hover .qrt__item, .qrt__item{ opacity:1; transform:none }
}

.hero__panel{ margin-top:8rem }
.tabs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.tab{
  display:flex; align-items:flex-start; gap:1.2rem; padding:2rem 2rem 2rem 0;
  border-left:1px solid var(--rule); padding-left:2rem; cursor:pointer;
  color:var(--grey); font-size:1.4rem; line-height:1.35; background:none; border-top:0;border-bottom:0;border-right:0;
  font-family:var(--body); text-align:left; transition:color .4s;
}
.tab:first-child{ border-left:0; padding-left:0 }
.tab .aico{ margin-top:.35rem; color:var(--grey); transition:color .4s, transform .4s var(--ease) }
.tab.on{ color:var(--paper) }
.tab.on .aico{ color:var(--magenta); transform:translateX(.4rem) }
.pane{ position:relative; min-height:24rem; display:flex; align-items:center; overflow:hidden }
.pane__item{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; transform:translateY(2rem); transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.pane__item.on{ opacity:1; transform:translateY(0) }
.pane__item .t-mega{ font-size:7.6rem; line-height:1.06; padding-bottom:.06em }
@media (max-width:991px){
  .hero{ padding-top:13rem }
  .tabs{ grid-template-columns:repeat(2,1fr) }
  .tab:nth-child(3){ border-left:0; padding-left:0 }
  .pane__item .t-mega{ font-size:3.2rem }
  .pane{ min-height:12rem }
}

/* ============================================================ SHOWREEL */
.reel{ padding:12rem 0; position:relative }
.reel__stage{ position:relative }
.reel__word{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  pointer-events:none; mix-blend-mode:difference; color:#fff;
}
.reel__word span{
  font-family:var(--disp); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(4rem, 13vw, 15rem); white-space:nowrap;
  transition:letter-spacing .1s linear, opacity .1s linear;
}
.reel__clip{
  position:relative; margin:0 auto; aspect-ratio:16/9; max-height:86vh;
  clip-path:inset(0 18% round 0); will-change:clip-path;
  border:1px solid var(--rule-2); background:var(--ink-3);
}
.reel__clip iframe{
  position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  border:0; transform:scale(1.06); will-change:transform;
}
.reel__frame{ position:absolute; inset:0; z-index:3; pointer-events:none }
.reel__frame i{ position:absolute; width:2rem; height:2rem; border:0 solid var(--paper) }
.reel__frame i:nth-child(1){ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px }
.reel__frame i:nth-child(2){ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px }
.reel__frame i:nth-child(3){ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px }
.reel__frame i:nth-child(4){ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px }
.reel__tag{
  margin-top:2rem; font-size:1.2rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); max-width:100%; overflow-wrap:break-word;
}
.reel__tag b{ color:var(--paper); font-weight:600 }
.reel__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; margin-bottom:3rem }
.reel__meta .t-nmb{ color:var(--grey) }
@media (max-width:991px){
  .reel{ padding:8rem 0 }
  .reel__clip{ clip-path:inset(0 6% round 0) }
  .reel__tag{ font-size:1.1rem; letter-spacing:.06em }
}
@media (prefers-reduced-motion:reduce){
  .reel__clip{ clip-path:inset(0 0) !important }
  .reel__clip iframe{ transform:none !important }
  .reel__word{ display:none }
}

/* ============================================================ MARQUEE */
.marq{ overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:2.2rem 0 }
.marq__track{ display:flex; align-items:center; width:max-content; will-change:transform; animation:marq var(--dur,44s) linear infinite }
.marq__track span{ font-family:var(--disp); font-weight:600; font-size:2rem; letter-spacing:-.01em; white-space:nowrap; color:var(--grey); padding-right:6rem }
.marq__track span i{ font-style:normal; margin-right:1.4rem }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(calc(-1 * var(--shift,50%))) } }
.marq:hover .marq__track{ animation-play-state:paused }
/* clienti: loghi bianchi su nero, verso destra, grandi */
.clients{ padding:8rem 0 }
.clients .marq{ border:0; padding:1.5rem 0; margin-top:4rem }
.clients .marq__track{ --dur:80s; animation-direction:reverse }
.clients .marq__track .cl{ display:flex; align-items:center; flex:none; padding-right:8rem }
.clients .marq__track img{
  height:17rem; width:auto; max-width:60rem; object-fit:contain;
  opacity:.7; filter:brightness(0) invert(1); transition:opacity .3s;
}
.clients .marq__track .cl:hover img{ opacity:1 }
.clients .marq__track .cl-txt{ font-family:var(--disp); font-weight:700; font-size:8rem; color:var(--paper); opacity:.7; white-space:nowrap }
@media (max-width:991px){
  .clients .marq__track img{ height:11rem }
  .clients .marq__track .cl-txt{ font-size:5rem }
}
.sec-label{ display:flex; align-items:center; gap:2.4rem }
.sec-label .hline{ flex:1 }

/* ============================================================ SEZIONI /01 /02 /03 */
.sec{ padding:10rem 0 }
.num-art{ padding:6rem 0 0 }
.num-art .top{ display:grid; grid-template-columns:10rem 1fr; gap:2rem; border-top:1px solid var(--rule); padding-top:2rem }
.num-art .t-nmb{ color:var(--grey) }
.num-art .inner{ display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; border-left:1px solid var(--rule); padding-left:4rem }
/* alternanza: nelle sezioni pari il titolo passa a destra */
.num-art.alt .inner > div:first-child{ order:2 }
.num-art.alt .inner > .txt{ order:1 }
.num-art h3{ max-width:52rem }
.num-art .txt{ text-align:center }
.num-art .txt p{ color:var(--grey); font-size:1.7rem; max-width:44rem; margin-left:auto; margin-right:auto }
.num-art .txt p+p{ margin-top:1.8rem }
.num-art .syn{ font-family:var(--disp); font-weight:600; font-size:2.4rem; letter-spacing:-.015em; line-height:1.3; max-width:38rem; margin:0 auto 2.4rem; color:var(--paper) }
/* riquadro immagine (foto reale, fallback grafico se manca) */
.ph-img{
  margin-top:3.2rem; aspect-ratio:4/3; max-width:52rem; overflow:hidden;
  position:relative; background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--rule) calc(50% - .5px), var(--rule) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--rule) calc(50% - .5px), var(--rule) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--ink-2);
}
.ph-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease) }
.ph-img:hover img{ transform:scale(1.04) }
.ph-img span{
  position:absolute; left:1.4rem; bottom:1.2rem;
  font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.ph-img img + span{ display:none }        /* se la foto c'è, niente etichetta */
@media (max-width:991px){
  .num-art .top{ grid-template-columns:5rem 1fr }
  .num-art .inner{ grid-template-columns:1fr; gap:3rem; padding-left:0; border-left:0 }
  .num-art.alt .inner > div:first-child{ order:0 }   /* su mobile ordine naturale */
  .num-art.alt .inner > .txt{ order:0 }
}
.facts{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:4rem; border-top:1px solid var(--rule) }
.fact{ padding:2.4rem 1rem 0; border-right:1px solid var(--rule); text-align:center }
.fact:last-child{ border-right:0 }
.fact .n{ font-family:var(--disp); font-weight:700; font-size:4.2rem; letter-spacing:-.03em; line-height:1 }
.fact .l{ margin-top:.8rem; font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
@media (max-width:991px){ .fact .n{ font-size:2.8rem } .fact .l{ font-size:1rem } }

/* ============================================================ FORMATI */
.fmt{ margin-top:6rem }
.fmt-row{
  display:grid; grid-template-columns:10rem 1fr auto; align-items:center; gap:3rem;
  padding:2.8rem 0; border-top:1px solid var(--rule); position:relative; cursor:default;
}
.fmt-row:last-child{ border-bottom:1px solid var(--rule) }
.fmt-row .t-nmb{ color:var(--grey); transition:color .4s }
.fmt-code{
  font-family:var(--disp); font-weight:700; font-size:5.4rem; letter-spacing:-.03em; line-height:1;
  transition:transform .55s var(--ease), color .4s;
}
.fmt-code .x{ font-size:1em; vertical-align:baseline; margin:0 .04em }
.fmt-rect{ border:1px solid var(--rule-2); position:relative; overflow:hidden; flex:none }
.fmt-rect::before{
  content:''; position:absolute; inset:0; transform:scale3d(1,0,1); transform-origin:50% 100%;
  transition:transform .6s var(--ease);
}
.fmt-row[data-c="s"] .fmt-rect::before{ background:var(--salvia) }
.fmt-row[data-c="m"] .fmt-rect::before{ background:var(--magenta) }
.fmt-row:hover .fmt-rect::before{ transform:scale3d(1,1,1) }
.fmt-row:hover .fmt-code{ transform:translateX(1.6rem) }
.fmt-row[data-c="s"]:hover .fmt-code, .fmt-row[data-c="s"]:hover .t-nmb{ color:var(--salvia-l) }
.fmt-row[data-c="m"]:hover .fmt-code, .fmt-row[data-c="m"]:hover .t-nmb{ color:var(--magenta) }
.fmt-note{ margin-top:2rem; color:var(--grey); font-size:1.3rem }
@media (max-width:991px){
  .fmt-row{ grid-template-columns:4rem 1fr auto; gap:1.2rem }
  .fmt-code{ font-size:2.6rem }
  .fmt-row:hover .fmt-code{ transform:none }
  .fmt-rect{ transform:scale(.7); transform-origin:right center }
}

/* ============================================================ GALLERY */
/* gallery — striscia rotante: card attaccate sul lato corto, label che scorre
   sotto ogni immagine, loop infinito, si ferma all'hover (come i clienti) */
.galstrip{ overflow:hidden; margin-top:6rem }
.galstrip__track{
  display:flex; width:max-content; will-change:transform;
  animation:marq var(--dur,55s) linear infinite;
}
.galstrip:hover .galstrip__track{ animation-play-state:paused }
.galcard{ flex:none; display:flex; flex-direction:column }
.galcard__frame{
  height:48rem; overflow:hidden; background:var(--ink-2);
  display:block; padding:0; border:0; cursor:zoom-in; position:relative;
}
.galcard__frame img{
  display:block; height:100%; width:auto;              /* attaccate sul lato corto */
  object-fit:cover; transition:transform 1.2s var(--ease);
}
.galcard:hover .galcard__frame img{ transform:scale(1.04) }
/* label nascosta di default, appare sotto l'immagine all'hover */
.galcard__cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:2rem;
  padding:0 2rem; height:0; overflow:hidden;
  font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
  opacity:0; transition:height .45s var(--ease), padding .45s var(--ease), opacity .4s var(--ease);
}
.galcard:hover .galcard__cap{ height:4.8rem; padding:1.6rem 2rem; opacity:1 }
.galcard__cap b{ color:var(--paper); font-weight:600 }
@media (max-width:991px){
  .galcard__frame{ height:32rem }
  .galstrip__track{ --dur:40s }
}

/* lightbox — immagine a schermo intero */
.lbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,13,12,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:4rem;
  opacity:0; transition:opacity .4s var(--ease);
}
.lbox[hidden]{ display:none }
.lbox.is-open{ opacity:1 }
.lbox__inner{
  display:flex; flex-direction:column; align-items:center; gap:2rem; max-width:100%; max-height:100%;
  transform:scale(.96); transition:transform .5s var(--ease);
}
.lbox.is-open .lbox__inner{ transform:scale(1) }
.lbox__img{
  max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain; display:block;
}
.lbox__cap{ font-size:1.3rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }
.lbox__close{
  position:absolute; top:2.4rem; right:2.4rem; width:5rem; height:5rem; padding:1.3rem;
  background:none; border:1px solid var(--rule-2); color:var(--paper); cursor:pointer;
  transition:background .3s, color .3s;
}
.lbox__close:hover{ background:var(--paper); color:var(--ink) }
.lbox__close svg{ width:100%; height:100% }
@media (max-width:598px){
  .lbox{ padding:2rem 1.4rem }
  .lbox__img{ max-height:76vh }
  .lbox__close{ top:1.4rem; right:1.4rem; width:4.2rem; height:4.2rem; padding:1.1rem }
}
@media (prefers-reduced-motion:reduce){
  .galstrip__track{ animation:none; overflow-x:auto }
}

/* ============================================================ CONDOMINI — jacaranda */
.condo-sec{ background:var(--condo); color:var(--ink); border-top:1px solid rgba(10,13,12,.2); border-bottom:1px solid rgba(10,13,12,.2) }
.condo-sec .grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:8rem; padding:10rem 0; align-items:center }
.condo-sec .hline{ background:rgba(10,13,12,.24) }
.condo-sec .t-label{ color:rgba(10,13,12,.7) }
.condo-sec p{ color:rgba(10,13,12,.75) }
.condo-sec .syn{ color:var(--ink) }
.condo-sec .ph-img{ margin-top:0; background:
  linear-gradient(to top right, transparent calc(50% - .5px), rgba(10,13,12,.24) calc(50% - .5px), rgba(10,13,12,.24) calc(50% + .5px), transparent calc(50% + .5px)),
  linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(255,255,255,.24) calc(50% - .5px), rgba(255,255,255,.24) calc(50% + .5px), transparent calc(50% + .5px)),
  var(--condo-2);
}
.condo-sec .ph-img span{ color:rgba(10,13,12,.6) }
/* teaser: immagine più piccola, non a tutta colonna */
.condo-teaser__img{ max-width:42rem; aspect-ratio:4/3; justify-self:start }
@media (max-width:991px){ .condo-teaser__img{ max-width:none } }
/* campi form su blu */
.condo-sec .field input,.condo-sec .field textarea{ border-bottom-color:rgba(10,13,12,.42); color:var(--ink) }
.condo-sec .field .fl{ background:rgba(10,13,12,.7) }
.condo-sec .field ::placeholder{ color:rgba(10,13,12,.5) }
.condo-sec .privacy{ color:rgba(10,13,12,.7) }
.condo-sec .privacy input{ --ck-b:rgba(10,13,12,.45); --ck-on:var(--ink);
  --ck-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") }
.condo-sec .privacy a{ color:var(--ink) }
.condo-sec .formnote{ color:var(--ink) }
/* bottone su blu: riempimento bianco, testo blu */
.condo-sec .c-bttn{ color:var(--ink); border-color:rgba(10,13,12,.45) }
.condo-sec .c-bttn::before{ background:var(--ink) }
.condo-sec .c-bttn:hover,
.condo-sec .c-bttn:hover .lbl,
.condo-sec .c-bttn:hover .aico{ color:var(--condo) }
@media (max-width:991px){
  .condo-sec .grid{ grid-template-columns:1fr; gap:4rem; padding:6rem 0 }
}

/* ============================================================ CONTATTI */
.contact{ background:var(--ink-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.contact .grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:8rem; padding:10rem 0; align-items:center }
.contact .lead{ color:var(--paper) }
.cline{ display:flex; gap:2.4rem; padding:2rem 0; border-bottom:1px solid var(--rule); font-size:1.5rem; flex-wrap:wrap }
.cline .k{ width:9rem; flex:none; color:var(--grey); font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.3rem }
.cline a{ position:relative; overflow-wrap:anywhere }
.cline a::after{ content:''; position:absolute; left:0; bottom:-.3rem; height:1px; width:100%; background:var(--u-grey); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease) }
.cline a:hover::after{ transform:scaleX(1) }
.cline a:hover{ color:var(--salvia-l) }
form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:3rem }
.field{ position:relative; margin-bottom:3.4rem }
.field input,.field textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--rule-2);
  color:inherit; font-family:var(--body); font-size:1.7rem; padding:1.2rem 0;
  outline:none; resize:vertical;
}
.field textarea{ min-height:10rem; display:block; vertical-align:top }   /* niente spazio sotto: la riga animata coincide col bordo */
.field .fl{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--u-grey); transform:scale3d(0,1,1); transform-origin:left; transition:transform .5s var(--ease) }
.field input:focus~.fl,.field textarea:focus~.fl{ transform:scale3d(1,1,1) }
.field ::placeholder{ color:var(--grey) }
.privacy{ display:flex; gap:1.3rem; align-items:center; font-size:1.45rem; line-height:1.4; color:var(--grey); margin-bottom:3rem; cursor:pointer }
/* casella disegnata: grande, facile da toccare */
.privacy input{ --ck-b:rgba(242,240,234,.45); --ck-on:var(--salvia);
  --ck-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  appearance:none; -webkit-appearance:none; flex:none; width:2.4rem; height:2.4rem; margin:0; border-radius:.6rem; cursor:pointer;
  border:1.5px solid var(--ck-b); background:transparent center/1.6rem no-repeat; transition:background-color .2s, border-color .2s, transform .15s }
.privacy input:hover{ border-color:var(--ck-on) }
.privacy input:checked{ background-color:var(--ck-on); border-color:var(--ck-on); background-image:var(--ck-mark) }
.privacy input:active{ transform:scale(.92) }
.privacy input:focus-visible{ outline:2px solid var(--ck-on); outline-offset:3px }
.formnote{ margin-top:1.6rem; font-size:1.3rem; color:var(--salvia-l); min-height:1.8rem }
/* reCAPTCHA: niente badge fisso nell'angolo (coprirebbe il pulsante WhatsApp); al suo posto la dicitura che Google richiede */
.grecaptcha-badge{ visibility:hidden !important }
.rc-note{ margin-top:.6rem; font-size:1.1rem; line-height:1.5; opacity:.55 }
.rc-note a{ color:inherit; text-decoration:underline; text-underline-offset:.2em }
.rc-note[hidden]{ display:none }
.hp{ position:absolute; left:-9999px }
@media (max-width:991px){
  .contact .grid{ grid-template-columns:1fr; gap:5rem; padding:6rem 0 }
  form .row2{ grid-template-columns:1fr }
}

/* ============================================================ FOOTER */
.footer{ padding:8rem 0 4rem }
.footer .cols{
  display:grid; grid-template-columns:1fr auto; gap:6rem;
  padding:4rem 0; border-top:1px solid var(--rule); align-items:start;
}
.footer .cols p{ color:var(--grey); font-size:1.4rem }
.footer__brand .brand__logo{ height:3.4rem }
.footer__brand p{ margin-top:1.6rem; max-width:34ch }
/* social: icone nude sotto logo e slogan, senza riquadri */
.socials{ display:flex; gap:2.2rem; margin-top:2.4rem }
.socials a{
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); transition:color .3s, transform .3s var(--ease);
}
.socials a svg{ width:2.4rem; height:2.4rem }
.socials a:nth-child(1):hover{ color:var(--salvia-l) }
.socials a:nth-child(2):hover{ color:var(--magenta) }
.socials a:nth-child(3):hover{ color:var(--condo) }
.socials a:hover{ transform:translateY(-.3rem) }
/* office: tutto a destra */
.footer__office{ text-align:right; justify-self:end }
.footer__office h5{ font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin-bottom:1.6rem; font-weight:600 }
.footer__office a{ display:block; padding:.3rem 0; color:var(--grey); transition:color .3s }
.footer__office a:hover{ color:var(--salvia-l) }
.legal{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-top:3rem; border-top:1px solid var(--rule); color:var(--grey); font-size:1.2rem }
.legal a:hover{ color:var(--paper) }
@media (max-width:991px){
  .footer .cols{ grid-template-columns:1fr; gap:4rem }
  .footer__office{ text-align:left; justify-self:start }
}

/* -------- reveal -------- */
.rv{ opacity:0; transform:translateY(3rem); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.rv.in{ opacity:1; transform:translateY(0) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  .hero__title .ln>span{ transform:none }
}

/* ---- firma #DoveRomaGuarda: Dove verde, Roma bianco, Guarda rosso ---- */
.hashtag{ white-space:nowrap; font-weight:700; letter-spacing:.02em }
.hashtag b{ font-weight:inherit; color:var(--paper) }
.hashtag i{ font-style:normal }
.hashtag .h-g{ color:var(--salvia-l) }
.hashtag .h-w{ color:var(--paper) }
.hashtag .h-r{ color:var(--magenta) }
.hashtag .h-dot{ font-weight:inherit; color:var(--paper) }
.footer__brand p .hashtag{ display:inline-block; margin-top:.6rem; font-family:var(--disp); font-size:2rem; letter-spacing:.02em }

/* ---- BOTTONI MOBILE: piu' compatti su tutto il sito ---- */
@media (max-width:767px){
  html body .c-bttn{ padding:.8rem 1.3rem; border-radius:.8rem; gap:.8rem }
  html body .c-bttn .lbl, html body .c-bttn .lbl.t-label{ font-size:1.3rem }
  html body .c-bttn .ico-wrap{ width:1.25rem; height:1.25rem }
  html body .hero-f__cta .c-bttn{ padding:.85rem 1.4rem; border-radius:.8rem }
  html body .hero-f__cta{ gap:1rem; margin-top:2.6rem }
}

/* ---- KOMEN: semicerchio rosa appoggiato al bordo basso della pagina, al centro del footer.
        Al passaggio del cursore (o al tocco sul telefono) sale a tendina un pannello che copre il footer:
        foto del cartello da un lato, logo Komen Italia e frase dall'altro. Apertura/chiusura gestite in main.js
        (con un piccolo ritardo in chiusura, cosi' non sfarfalla). Sul telefono si chiude con la X o toccando fuori. ---- */
.legal__l{ display:inline-flex; align-items:center; gap:1.4rem; flex-wrap:wrap }
.footer{ position:relative }
.komen{ --k:#e5679f; --r:3.4rem; --ease:cubic-bezier(.7,0,.2,1); position:absolute; inset:0; z-index:40; pointer-events:none }
/* velo scuro sulla pagina SOPRA il footer (non e' fisso: cosi' il rimbalzo di Safari in fondo resta rosa) */
.komen-velo{ position:absolute; left:0; right:0; bottom:100%; height:400vh; z-index:39; background:rgba(8,6,6,.55); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .5s ease .1s, visibility 0s linear .6s }   /* nascosto davvero quando chiuso: niente da disegnare durante lo scorrimento */
html.komen-on{ background:#e5679f }
/* pannello */
.komen__pop{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; background:var(--k); color:#fff; overflow:hidden;
  clip-path:inset(100% 0 0 0); transition:clip-path .6s var(--ease) .05s; pointer-events:none }
.komen__img{ position:relative; background:#d55690 url('../../img/komen.jpg') 56% 35%/cover no-repeat; transform:scale(1.12); transition:transform .6s var(--ease) }
/* foto: impianto 120×180 in Viale Giulio Cesare, Metro Lepanto. La foto e' gia' ritagliata attorno all'impianto: resta centrato su ogni schermo */
.komen__img{ background-image:image-set(url('../../img/komen.webp') type('image/webp'), url('../../img/komen.jpg') type('image/jpeg')) }
.komen__body{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:5rem 7rem 5rem 6.4rem; max-width:62rem }
.komen__logo{ display:block; width:31rem; height:auto }
.komen__line{ display:block; width:100%; max-width:40rem; height:1px; margin:3rem 0 2.6rem; background:rgba(255,255,255,.45); transform-origin:0 50% }
.komen__txt{ display:block; max-width:40rem; font-size:1.9rem; line-height:1.45; font-weight:400; color:rgba(255,255,255,.92) }
.komen__txt b{ font-weight:600; color:#fff }
.komen__logo, .komen__txt{ opacity:0; transform:translateY(1.6rem); transition:opacity .2s ease, transform .3s var(--ease) }
.komen__line{ transform:scaleX(0); transition:transform .3s var(--ease) }
.komen__wm{ position:absolute; right:-4rem; bottom:-8rem; height:40rem; width:auto; opacity:0; transform:rotate(-10deg) translateY(4rem); pointer-events:none;
  transition:opacity .3s ease, transform .5s var(--ease) }
.komen__x{ display:none }
/* pillola al centro del footer, allineata alla riga privacy / copyright */
.komen__btn{ position:absolute; left:50%; bottom:3.2rem; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.8rem;
  padding:.5rem 1.3rem .5rem .55rem; border:1px solid rgba(242,240,234,.16); border-radius:10rem; background:transparent; color:#a8a39c;
  font:inherit; font-size:1.2rem; line-height:1; white-space:nowrap; cursor:pointer; pointer-events:auto;
  transition:background .35s ease, border-color .35s ease, color .35s ease, opacity .3s ease }
.komen__btn::before{ content:''; position:absolute; inset:-1rem -1.2rem } /* area di aggancio un po' piu' larga */
.komen__dot{ width:2.3rem; height:2.3rem; border-radius:50%; background:var(--k); display:grid; place-items:center; flex:none; pointer-events:none;
  transition:background .35s ease }
.komen__dot img{ display:block; width:auto; height:1.35rem; transition:transform .6s cubic-bezier(.34,1.56,.64,1) }
.komen__lbl{ pointer-events:none }
.komen__btn:hover, .komen__btn:focus-visible{ background:var(--k); border-color:var(--k); color:#fff }
.komen__btn:hover .komen__dot, .komen__btn:focus-visible .komen__dot{ background:rgba(255,255,255,.22) }
.komen__btn:hover .komen__dot img{ transform:rotate(-10deg) scale(1.08) }
/* aperto */
.komen.is-open .komen__pop{ clip-path:inset(0 0 0 0); pointer-events:auto; transition:clip-path .85s var(--ease) }
.komen.is-open .komen__img{ transform:none; transition:transform 1.6s var(--ease) }
.komen.is-open .komen__logo{ opacity:1; transform:none; transition:opacity .6s ease .35s, transform .9s var(--ease) .35s }
.komen.is-open .komen__line{ transform:scaleX(1); transition:transform 1s var(--ease) .5s }
.komen.is-open .komen__txt{ opacity:1; transform:none; transition:opacity .6s ease .6s, transform .9s var(--ease) .6s }
.komen.is-open .komen__wm{ opacity:.08; transform:rotate(-10deg); transition:opacity 1s ease .5s, transform 1.6s var(--ease) .3s }
.komen.is-open .komen__btn{ opacity:0 }
.komen.is-open + .komen-velo{ opacity:1; visibility:visible; transition:opacity .5s ease .1s, visibility 0s }
@media (max-width:991px){ html body .footer{ padding-bottom:9.5rem } .komen__btn{ bottom:2.8rem } }
@media (max-width:1199px){ .komen__body{ padding:4rem 4.4rem } .komen__logo{ width:27rem } .komen__txt{ font-size:1.7rem } }
/* telefono / touch: foto sopra, testo sotto; X per chiudere */
@media (max-width:767px), (hover:none){
  html body .footer{ padding-bottom:9.5rem }
  .komen__btn{ bottom:2.6rem; font-size:1.3rem }
  .komen__pop{ grid-template-columns:1fr; grid-template-rows:1fr auto }
  .komen__body{ padding:3.6rem 2.6rem 6rem; max-width:none }
  .komen__logo{ width:25rem }
  .komen__line{ margin:2.4rem 0 2rem; max-width:none }
  .komen__txt{ font-size:1.6rem; max-width:30rem }
  .komen__wm{ height:28rem; right:-5rem; bottom:-5rem }
  .komen__x{ display:grid; place-items:center; position:absolute; top:3rem; right:2.2rem; z-index:2; width:4.2rem; height:4.2rem; border-radius:50%;
    border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; cursor:pointer; opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s var(--ease) }
  .komen__x svg{ width:1.6rem; height:1.6rem; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none }
  .komen.is-open .komen__x{ opacity:1; transform:none; transition:opacity .4s ease .6s, transform .6s var(--ease) .6s }
}
@media (prefers-reduced-motion:reduce){
  .komen *, .komen__pop, .komen-velo{ transition-duration:.01s !important; transition-delay:0s !important }
}

/* footer: hashtag tutto bianco e piu' piccolo, logo piu' piccolo (ancora di piu' su telefono) */
.footer__brand p .hashtag{ font-size:1.6rem }
.footer__brand p .hashtag i, .footer__brand p .hashtag b{ color:var(--paper) }
.footer__brand .logo-anim{ width:min(100%, 24rem) }
.footer__brand .logo-anim > img{ height:3rem }
@media (max-width:598px){
  .footer__brand .logo-anim{ width:min(100%, 16rem) }
  .footer__brand .logo-anim > img{ height:2.2rem }
}

/* footer su computer: proporzioni piu' armoniche. Logo leggermente piu' largo del testo sotto,
   slogan su due righe bilanciate, testi a sinistra e a destra della stessa misura */
@media (min-width:992px){
  .footer .cols .footer__brand .logo-anim{ width:28rem }
  .footer .cols .footer__brand p{ font-size:1.5rem; line-height:1.6; max-width:27rem; text-wrap:balance; margin-top:1.6rem }
  .footer .cols .footer__brand p .hashtag{ margin-top:1rem; font-size:1.5rem }
  .footer .cols .footer__brand .socials{ margin-top:2.2rem; gap:2rem }
  .footer .cols .footer__brand .socials a svg{ width:2.1rem; height:2.1rem }
  .footer .cols .footer__office p, .footer .cols .footer__office a{ font-size:1.5rem; line-height:1.6 }
  .footer .cols .footer__office a{ padding:0 }
  .footer .cols .footer__office a:first-of-type{ margin-top:1.2rem }
}