/* ══════════════════════════════════════════════════════════════════
   Home page only (index.html). Loaded after css/style.css: rules keep
   the order they have in the design, so the cascade is the same.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Typography ---------- */
.on-dark .t-label{color:var(--oro-chiaro)}
.t-lead{font-family:var(--serif);font-size:clamp(24px,2.6vw,38px);line-height:1.3;font-weight:300;text-wrap:pretty}
.rule{display:block;width:64px;height:1px;background:var(--oro);border:0;margin:0}

/* ---------- Buttons ---------- */
.btn--line{border-color:var(--nero);color:var(--nero)}
.btn--line:hover,.btn--line:focus-visible,.btn--line:active{background:var(--nero);color:var(--bianco)}

/* ---------- Images ---------- */
.ph--dark{background:repeating-linear-gradient(135deg,rgba(212,188,138,.07) 0 1px,transparent 1px 14px),#1D1B18}
.ph--dark::after{color:#9E978B}
.hover-zoom{overflow:hidden}
.hover-zoom .ph{transition:transform 1.6s var(--ease),filter 1.6s var(--ease)}
.hover-zoom:hover .ph{transform:scale(1.05);filter:brightness(.92)}

/* ---------- Effect B — arc text and round badge ---------- */
.arc--in{margin:0 calc(-1 * var(--pad)) var(--s24);padding:0}
.badge{position:relative;display:grid;place-items:center;width:168px;height:168px;flex:none;color:inherit}
.badge svg{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.badge text{font:400 11.5px var(--sans);letter-spacing:.32em;text-transform:uppercase;fill:currentColor}
.badge__core{display:grid;place-items:center;width:84px;height:84px;border:1px solid var(--oro);border-radius:0;font:italic 300 22px/1 var(--serif);transition:border-radius .6s var(--ease),background-color .6s var(--ease),color .6s var(--ease)}
.badge:hover{color:inherit}
.badge:hover .badge__core,.badge:focus-visible .badge__core{border-radius:var(--r-btn);background:var(--oro);color:var(--nero)}

/* ---------- Scroll effects ---------- */
.feat .ph img{will-change:transform;transform-origin:50% 50%}
/* Words that light up */
[data-words] .w{color:rgba(11,11,11,.1);transition:color .35s var(--ease)}
[data-words] .w.is-lit{color:inherit}
/* Full-screen manifesto */
.manifesto-panel{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--s30) var(--pad)}
/* Concierge steps (cards) */
.hstep{flex:none;width:min(520px,78vw);height:min(600px,64svh);padding:var(--s12);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s8);border:1px solid rgba(184,151,90,.5);transition:border-radius .8s var(--ease)}
.hstep:hover{border-radius:var(--r-btn)}
.hstep__n{font:italic 300 clamp(96px,10vw,160px)/.8 var(--serif);color:var(--oro)}
.hstep p{margin:var(--s4) 0 0;color:var(--grigio)}
.hstep.s-nero p{color:#B5B0A6}
.hstep .link-arrow{align-self:flex-start}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;color:var(--bianco);overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__media .ph{position:absolute;inset:0}
.hero__media img{object-position:80% 40%} /* subject on the right: still visible on mobile */
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.js .hero__media .ph{transform:scale(1.12);transition:transform 3.2s var(--ease)}
.is-loaded .hero__media .ph{transform:scale(1.02)}
.hero__ai{position:absolute;right:var(--pad);bottom:var(--s6);z-index:4;padding:var(--s1) var(--s3);border:1px solid rgba(250,250,247,.4);background:rgba(11,11,11,.35);color:#E8E3DA;font:400 10px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero__veil{position:absolute;inset:0;z-index:2;background:rgba(11,11,11,.38)}
.hero__content{position:relative;z-index:3;width:100%;padding:0 var(--pad) var(--s24);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s10)}
.hero__content .t-display{margin-bottom:var(--s7)}
.hero__sub{max-width:460px;font-size:18px;color:#E8E3DA;margin:0 0 var(--s8)}

/* ---------- Manifesto ---------- */
.manifesto{max-width:1000px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s10)}
.manifesto .t-lead{font-size:clamp(28px,3.4vw,50px);line-height:1.22}
.manifesto .t-lead em{font-style:italic;color:var(--oro-testo)}

/* ---------- Buy or rent ---------- */
.formule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(184,151,90,.45)}
.formula{padding:var(--s20) var(--s16) 0 0;display:flex;flex-direction:column;gap:var(--s6)}
.formula+.formula{border-left:1px solid rgba(184,151,90,.45);padding-left:var(--s16);padding-right:0}
.formula ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.formula li{padding:var(--s4) 0;border-bottom:1px solid rgba(250,250,247,.12);font-size:15px;color:#CFC9BE}

/* ---------- Featured dresses: two-column header, then 4 dresses at staggered heights ---------- */
.featured{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8);align-items:start}
.featured__head{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s10);align-items:end;margin-bottom:var(--s16);padding-bottom:var(--s10);border-bottom:1px solid rgba(184,151,90,.5)}
.featured__title{display:flex;flex-direction:column;gap:var(--s6)}
.featured__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s6);max-width:420px;justify-self:end}
.featured__intro p{margin:0}
.featured .feat:nth-of-type(even){margin-top:var(--s30)}
.feat{display:flex;flex-direction:column;gap:var(--s5)}
.feat .ph{aspect-ratio:3/4}
.concierge-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s10);flex-wrap:wrap}

/* ---------- Concierge experience: 3 still cards ---------- */
.concierge-sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s10);flex-wrap:wrap}
.concierge-sec__head>div{display:flex;flex-direction:column;gap:var(--s6);max-width:620px}
.concierge-sec__head p{margin:0}
.csteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s16)}
.csteps .hstep{width:auto;height:auto;min-height:320px;padding:var(--s8);gap:var(--s6)}
.csteps .hstep__n{font-size:64px}
.csteps .hstep .t-sub{font-size:clamp(26px,2.4vw,34px)}
@media (max-width:960px){.csteps{grid-template-columns:1fr}.csteps .hstep{min-height:0}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .featured{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s16)}
  .featured .feat:nth-of-type(even){margin-top:var(--s20)}
}
@media (max-width:960px){
  .hero__content{grid-template-columns:1fr}
  .formule{grid-template-columns:1fr}
  .formula{padding-right:0}
  .formula+.formula{border-left:0;border-top:1px solid rgba(184,151,90,.45);padding-left:0;margin-top:var(--s14)}
}
@media (max-width:760px){
  .featured{grid-template-columns:1fr;row-gap:var(--s16)}
  .featured__head{grid-template-columns:1fr;margin-bottom:0}
  .featured__intro{justify-self:start}
  .featured .feat:nth-of-type(n){grid-column:1/-1;margin-top:0;width:86%}
  .featured .feat:nth-of-type(even){margin-left:auto}
  .arc--in{margin-bottom:var(--s12)}
  .badge{width:140px;height:140px}
  .hstep{width:auto;height:auto;padding:var(--s8) var(--s6);gap:var(--s6)}
  .hstep__n{font-size:80px}
  .manifesto-panel{padding:var(--s24) var(--pad)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .hero__media .ph{transform:none!important}
  .hover-zoom:hover .ph{transform:none!important}
  [data-words] .w{color:inherit}
}

/* ---------- Former inline styles (last, so they win as the inline styles did) ---------- */
.hero__label{margin-bottom:var(--s7)}
.manifesto__text{max-width:540px;margin:0}
.concierge-head__title{display:flex;flex-direction:column;gap:var(--s6);max-width:900px}
.concierge-head__text{max-width:400px;margin:0}
.formule{margin-top:var(--s24)}
.formula__text{margin:0}