/* ============================================================
   OLIMPIA D. — foglio di stile
   Per aggiornare i BRAND non serve toccare questo file: vai in brands.js
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200..600;1,300..500&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..450&display=swap');

:root{
  --paper:#F4F0E7;      /* crema, i muri caldi dello spazio */
  --paper-2:#EDE7DB;    /* crema più calda per fasce alterne */
  --ink:#221D18;        /* quasi-nero caldo, dal logo */
  --ink-soft:#4A423A;
  --wood:#8C6A48;       /* legno / tabacco, accento caldo */
  --wood-soft:#A38A6E;
  --line:rgba(34,29,24,0.14);
  --line-strong:rgba(34,29,24,0.30);

  --display:'Jost',system-ui,sans-serif;   /* geometrico sottile, come il logo */
  --body:'Newsreader',Georgia,serif;

  --gut:clamp(1.4rem,5vw,4rem);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--ink);color:var(--paper);}
:focus-visible{outline:2px solid var(--wood);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}

/* utility tipografiche */
.eyebrow{
  font-family:var(--display);font-weight:400;font-size:0.68rem;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--wood);margin:0;
}
.lede{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.4;font-weight:300;}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(244,240,231,0.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.site-head__inner{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut);height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.wordmark{
  font-family:var(--display);font-weight:300;font-size:1.05rem;
  letter-spacing:0.3em;padding-left:0.3em;text-decoration:none;
  text-transform:uppercase;white-space:nowrap;
}
.wordmark img{height:24px;width:auto;}
.nav{display:flex;gap:clamp(1.1rem,3vw,2.4rem);}
.nav a{
  font-family:var(--display);font-weight:300;font-size:0.72rem;
  letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-soft);padding:0.4rem 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--wood);}

/* ---------- hero foto (home / location) ---------- */
.hero-img{position:relative;min-height:clamp(420px,72vh,760px);display:grid;}
.hero-img img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;
  filter:saturate(0.92) brightness(0.9);
}
.hero-img__veil{grid-area:1/1;background:linear-gradient(180deg,rgba(20,15,10,0.12),rgba(20,15,10,0.52));}
.hero-img__inner{
  grid-area:1/1;position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#F7F3EC;
  padding:2rem;
}
.hero-img__logo{width:min(340px,72vw);margin-bottom:1.6rem;}
.hero-img__logo img{width:100%;}
.hero-img__rule{width:40px;height:1px;background:rgba(247,243,236,0.55);margin:0 0 1.4rem;}
.hero-img__tag{
  font-family:var(--display);font-weight:300;font-size:clamp(0.62rem,1.6vw,0.78rem);
  letter-spacing:0.34em;padding-left:0.34em;text-transform:uppercase;
}
.hero-img__scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:300;font-size:0.6rem;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(247,243,236,0.7);
}

/* hero testuale (brands / privacy) */
.hero-page{background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:clamp(4rem,11vw,8rem) 0 clamp(2rem,5vw,3.5rem);}
.hero-page__title{
  font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,9vw,6rem);
  letter-spacing:0.12em;text-transform:uppercase;margin:0;line-height:1;
}
.hero-page__meta{
  margin-top:clamp(1.6rem,4vw,2.6rem);padding-top:1.2rem;border-top:1px solid var(--line-strong);
  font-family:var(--display);font-weight:300;font-size:0.7rem;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--wood);
}

/* ---------- sezioni ---------- */
.section{padding:clamp(3.5rem,9vw,7rem) 0;border-bottom:1px solid var(--line);}
.section:last-of-type{border-bottom:0;}
.section--warm{background:var(--paper-2);}
.section__grid{
  display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:start;
}
@media(max-width:780px){.section__grid{grid-template-columns:1fr;gap:1rem;}}
.eyebrow--top{padding-top:0.5rem;}
.prose{max-width:60ch;}
.prose p{margin:0 0 1.15em;}
.prose p:last-child{margin-bottom:0;}
.prose a{color:var(--wood);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .2s;}
.prose a:hover{border-bottom-color:var(--wood);}

/* immagine larga fra le sezioni */
.band{border-bottom:1px solid var(--line);}
.band img{width:100%;height:clamp(280px,52vh,620px);object-fit:cover;filter:saturate(0.92);}
.band figcaption{
  font-family:var(--display);font-weight:300;font-size:0.66rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--wood);padding:0.9rem var(--gut);
  max-width:var(--maxw);margin-inline:auto;
}

/* coppia di immagini */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-bottom:1px solid var(--line);}
.duo img{width:100%;height:clamp(240px,40vh,460px);object-fit:cover;filter:saturate(0.92);}
@media(max-width:640px){.duo{grid-template-columns:1fr;}}

/* servizi */
.services{list-style:none;margin:0;padding:0;max-width:60ch;}
.services li{
  border-top:1px solid var(--line);padding:1.05rem 0;display:grid;
  grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline;
}
.services li:last-child{border-bottom:1px solid var(--line);}
.services .svc-name{font-family:var(--display);font-weight:400;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;}
.services .svc-desc{color:var(--ink-soft);font-size:0.98rem;}
@media(max-width:560px){.services li{grid-template-columns:1fr;gap:0.3rem;}}

/* ============================================================
   BRAND INDEX
   ============================================================ */
.brand-group{margin-bottom:clamp(2.6rem,6vw,4.5rem);}
.brand-group__head{
  display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-strong);
  padding-bottom:0.7rem;
}
.brand-group__name{font-family:var(--display);font-weight:400;font-size:0.8rem;letter-spacing:0.28em;text-transform:uppercase;margin:0;}
.brand-group__rule{flex:1;}
.brand-group__count{font-family:var(--display);font-weight:300;font-size:0.75rem;letter-spacing:0.1em;color:var(--wood);font-variant-numeric:tabular-nums;}
.brand-list{list-style:none;margin:0;padding:0;}
.brand-row{border-bottom:1px solid var(--line);}
.brand-row__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(0.6rem,1.6vw,1rem) 0;text-decoration:none;color:var(--ink);}
.brand-row__name{
  font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,4.4vw,2.9rem);
  line-height:1.08;letter-spacing:0.04em;text-transform:uppercase;
  transition:letter-spacing .28s ease,color .28s ease;
}
.brand-row__mark{
  font-family:var(--display);font-weight:300;font-size:0.72rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--wood);opacity:0;transform:translateX(-6px);
  transition:opacity .28s,transform .28s;white-space:nowrap;
}
a.brand-row__inner:hover .brand-row__name,a.brand-row__inner:focus-visible .brand-row__name{letter-spacing:0.14em;color:var(--wood);}
a.brand-row__inner:hover .brand-row__mark,a.brand-row__inner:focus-visible .brand-row__mark{opacity:1;transform:translateX(0);}
.brand-row__inner--plain{cursor:default;}
.brand-row__inner--plain .brand-row__name{color:var(--wood-soft);}
.brands-note{color:var(--ink-soft);font-size:0.98rem;max-width:56ch;margin:0;}
.brands-note a{color:var(--wood);text-decoration:none;border-bottom:1px solid var(--line-strong);}

/* ---------- gallery location ---------- */
.floor{margin-bottom:clamp(2.6rem,6vw,4.5rem);}
.floor__head{display:flex;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-strong);padding-bottom:0.7rem;margin-bottom:1.4rem;}
.floor__name{font-family:var(--display);font-weight:400;font-size:0.8rem;letter-spacing:0.28em;text-transform:uppercase;margin:0;}
.floor__desc{font-family:var(--display);font-weight:300;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--wood);margin-left:auto;}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(0.5rem,1.2vw,0.9rem);}
.gallery figure{margin:0;}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;background:var(--paper-2);filter:saturate(0.92);}
.gallery .tall{grid-row:span 2;}
.gallery .tall img{aspect-ratio:4/6;}
.gallery .wide{grid-column:span 2;}
.gallery .wide img{aspect-ratio:16/9;}
@media(max-width:560px){.gallery .wide{grid-column:span 1;}.gallery .tall{grid-row:span 1;}.gallery .tall img,.gallery .wide img{aspect-ratio:4/3;}}

/* ---------- contatti ---------- */
.contact{background:var(--ink);color:#E8E1D6;padding:clamp(3.5rem,8vw,6rem) 0;}
.contact .eyebrow{color:var(--wood-soft);}
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:clamp(1.6rem,4vw,3rem);margin-top:2.2rem;}
.contact__block h3{font-family:var(--display);font-weight:400;font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--wood-soft);margin:0 0 0.8rem;}
.contact__block p{margin:0 0 0.35rem;}
.contact__block a{text-decoration:none;border-bottom:1px solid rgba(232,225,214,0.3);transition:border-color .2s;}
.contact__block a:hover{border-bottom-color:#E8E1D6;}
.contact__cta{display:inline-block;margin-top:1rem;font-family:var(--display);font-weight:400;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;background:var(--paper);color:var(--ink);padding:0.9rem 1.6rem;border:0;transition:background .2s;}
.contact__cta:hover{background:#fff;}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--wood-soft);border-top:1px solid rgba(232,225,214,0.12);padding:2rem 0;font-family:var(--display);font-weight:300;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;}
.site-foot__inner{display:flex;flex-wrap:wrap;gap:0.75rem 1.75rem;align-items:center;justify-content:space-between;}
.site-foot a{text-decoration:none;}
.site-foot a:hover{color:#E8E1D6;}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;}

/* ---------- animazioni ---------- */
.reveal{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.22,1,.36,1) forwards;}
.reveal:nth-child(2){animation-delay:.08s;}
.reveal:nth-child(3){animation-delay:.16s;}
@keyframes rise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}.reveal{opacity:1;transform:none;}}

/* ============================================================
   TRANSIZIONI — minimal, curate
   ============================================================ */

/* hero: zoom lentissimo continuo */
.hero-img img{ animation:kenburns 22s ease-in-out infinite alternate; transform-origin:center; }
@keyframes kenburns{ from{transform:scale(1.0);} to{transform:scale(1.08);} }

/* ingresso logo hero: sfocatura che mette a fuoco + lettere che si aprono */
.hero-img__logo{ opacity:0; animation:logoIn 1.8s cubic-bezier(.2,.7,.2,1) .35s forwards; }
@keyframes logoIn{
  from{opacity:0; transform:translateY(16px) scale(.98); filter:blur(7px);}
  to  {opacity:1; transform:none;                        filter:blur(0);}
}
.hero-img__rule{ width:0; animation:ruleIn 1s cubic-bezier(.2,.7,.2,1) 1.5s forwards; }
@keyframes ruleIn{ to{width:40px;} }
.hero-img__tag{ opacity:0; animation:fadeIn 1.4s ease 1.9s forwards; }
.hero-img__scroll{ opacity:0; animation:fadeIn 1.2s ease 2.4s forwards, bob 2.6s ease-in-out 3.8s infinite; }
@keyframes fadeIn{ to{opacity:1;} }
@keyframes bob{ 0%,100%{transform:translate(-50%,0);opacity:.7;} 50%{transform:translate(-50%,6px);opacity:.35;} }

/* hero testuale (brands/location): titolo che sale a fuoco */
.hero-page__title{ opacity:0; animation:logoIn 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.hero-page__meta{ opacity:0; animation:fadeIn 1.2s ease .8s forwards; }

/* reveal on scroll: le sezioni salgono con dissolvenza morbida */
.io{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.io.in{ opacity:1; transform:none; }

/* immagini: un velo che si scioglie + micro-zoom in uscita */
.io-img{ overflow:hidden; }
.io-img img{ transform:scale(1.06); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.io-img.in img{ transform:scale(1); }

/* brand rows: comparsa a cascata */
.brand-row{ opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.brand-row.in{ opacity:1; transform:none; }

/* transizione morbida generale sui link raffinati */
.prose a, .nav a, .brand-row__name, .brand-row__mark{ transition:all .3s cubic-bezier(.2,.7,.2,1); }

@media(prefers-reduced-motion:reduce){
  .hero-img img,.hero-img__logo,.hero-img__rule,.hero-img__tag,.hero-img__scroll,
  .hero-page__title,.hero-page__meta{ animation:none !important; opacity:1 !important; width:auto; }
  .io,.io-img img,.brand-row{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   EFFETTI — illuminazione brand, numeri, cursore
   ============================================================ */

/* brand che si "illuminano" al passaggio */
.brand-row__name{ transition:letter-spacing .3s cubic-bezier(.2,.7,.2,1), color .3s, text-shadow .3s, filter .3s; }
a.brand-row__inner:hover .brand-row__name,
a.brand-row__inner:focus-visible .brand-row__name{
  color:var(--ink);
  letter-spacing:0.14em;
  text-shadow:0 0 22px rgba(140,106,72,0.35);
  filter:brightness(1.06);
}
a.brand-row__inner:hover .brand-row__mark{ color:var(--wood); }

/* sezione NUMERI */
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.5rem,4vw,3rem); text-align:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.stat__num{
  font-family:var(--display); font-weight:200; line-height:1;
  font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:0.01em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.stat__unit{ font-family:var(--display); font-weight:300; font-size:1rem; color:var(--wood); margin-top:-.4rem; }
.stat__lab{
  font-family:var(--display); font-weight:400; font-size:.66rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--iron,#6E655B);
}

/* cursore raffinato: anello che insegue (solo desktop con mouse) */
.cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(34,29,24,0.4); border-radius:50%;
  pointer-events:none; z-index:9999; opacity:0;
  transition:width .25s ease, height .25s ease, margin .25s ease,
             border-color .25s ease, opacity .3s ease, background .25s ease;
  mix-blend-mode:multiply;
}
.cursor-ring.on{ opacity:1; }
.cursor-ring.big{ width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:rgba(140,106,72,0.55); background:rgba(140,106,72,0.06); }
@media (hover:none), (pointer:coarse){ .cursor-ring{ display:none !important; } }

/* un filo più di movimento: reveal leggermente più ampio */
.io{ transform:translateY(32px); }

/* ============================================================
   LOCATION — galleria a scorrimento orizzontale
   ============================================================ */
.rail{ position:relative; margin:0 0 clamp(2rem,5vw,3.5rem); }
.rail__track{
  display:flex; gap:clamp(.6rem,1.4vw,1rem);
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding:0 var(--gut) .8rem; margin:0 calc(-1 * var(--gut));
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.rail figure{
  margin:0; flex:0 0 auto; scroll-snap-align:center;
  width:clamp(260px,64vw,720px); overflow:hidden;
}
.rail figure.portrait{ width:clamp(200px,44vw,430px); }
.rail img{
  width:100%; height:clamp(240px,52vh,560px); object-fit:cover;
  filter:saturate(.94); transform:scale(1.04);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s;
  user-select:none; -webkit-user-drag:none;
}
.rail figure:hover img{ transform:scale(1); filter:saturate(1); }
.rail figcaption{
  font-family:var(--display); font-weight:300; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--wood);
  padding-top:.7rem;
}
.rail__hint{
  font-family:var(--display); font-weight:300; font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--wood);
  display:flex; align-items:center; gap:.6rem; margin-top:.4rem;
}
.rail__hint span{ display:inline-block; width:26px; height:1px; background:var(--wood);
  animation:slide 2.4s ease-in-out infinite; }
@keyframes slide{ 0%,100%{transform:translateX(0);opacity:.4;} 50%{transform:translateX(9px);opacity:1;} }

/* barra di avanzamento sottile */
.rail__bar{ height:1px; background:var(--line); margin:0 0 .2rem; position:relative; }
.rail__bar i{ position:absolute; left:0; top:0; height:1px; width:20%;
  background:var(--wood); transition:width .15s linear, left .15s linear; }

/* ---------- pagina contatti ---------- */
.contact-page{ padding:clamp(3rem,8vw,6rem) 0; }
.contact-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1.5rem,4vw,2.5rem); margin-top:2rem;
}
.ccard{ border-top:1px solid var(--line-strong); padding-top:1.2rem; }
.ccard h3{
  font-family:var(--display); font-weight:400; font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--wood); margin:0 0 .9rem;
}
.ccard p{ margin:0 0 .4rem; }
.ccard a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.ccard a:hover{ border-bottom-color:var(--wood); color:var(--wood); }
.maps-note{ font-size:.86rem; color:var(--iron,#6E655B); margin-top:.6rem; }