/* ============================================================
   Camilla Casula — Make-up Artist
   Palette: cipria / rosa antico / nocciola / crema
   ============================================================ */

:root{
  --cream:      #FDFAF7;
  --cream-2:    #F8F1EB;
  --sand:       #F3E7DF;
  --blush:      #F4DCD7;
  --blush-2:    #EBC7C0;
  --rose:       #DDA79E;
  --rose-deep:  #C4837A;
  --brown:      #A98070;
  --brown-2:    #8A6555;
  --brown-deep: #5E463D;
  --ink:        #2A211E;
  --muted:      #8B7A73;
  --line:       rgba(94,70,61,.16);
  --white:      #fff;

  --f-script: 'Parisienne', 'Segoe Script', cursive;
  --f-serif:  'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --f-sans:   'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.9,.28,1);
  --nav-h: 74px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 18px;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:3px; border-radius:2px; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--brown); font-weight:400; margin:0 0 1.1em;
}
.script{ font-family:var(--f-script); font-weight:400; }

.h2{
  font-family:var(--f-serif);
  font-size:clamp(2.1rem,4.6vw,3.9rem);
  font-weight:300; line-height:1.08; letter-spacing:-.01em;
  margin:0 0 .55em;
}
.h2 em, .h3 em, .h4 em{ font-style:italic; color:var(--brown-2); }
.h2 .script{ font-size:1.28em; line-height:.9; color:var(--rose-deep); }

.h3{
  font-family:var(--f-serif);
  font-size:clamp(1.7rem,3.2vw,2.7rem);
  font-weight:300; line-height:1.15; margin:0 0 .6em;
}
.h4{
  font-family:var(--f-serif);
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:300; margin:0 0 .4em;
}
.lead{ font-size:1.12em; color:var(--brown-deep); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.05em 2.1em;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  text-decoration:none; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:999px; cursor:pointer; position:relative; overflow:hidden;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--solid:hover{ --bg:var(--rose-deep); --bd:var(--rose-deep); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:rgba(42,33,30,.42); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--sm{ padding:.85em 1.7em; font-size:.66rem; }
.btn--full{ width:100%; }
.btn i{ font-style:normal; transition:transform .4s var(--ease); }
.btn:hover i{ transform:translateY(2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
/* velo chiaro: tiene leggibili i link anche sopra la foto dell'hero */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(253,250,247,.94) 0%, rgba(253,250,247,.62) 52%, rgba(253,250,247,0) 100%);
  transition:opacity .5s var(--ease);
}
.nav.is-stuck::before{ opacity:0; }
.nav.is-stuck{
  background:rgba(253,250,247,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{
  font-family:var(--f-script); font-size:1.7rem; text-decoration:none;
  line-height:1; color:var(--ink);
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease);
  pointer-events:none;
}
.nav.is-stuck .nav__logo{ opacity:1; transform:none; pointer-events:auto; }
.nav__links{ display:flex; align-items:center; gap:34px; margin-left:auto; }
.nav__links a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); position:relative; padding:6px 0;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links .nav__cta{
  border:1px solid rgba(42,33,30,.4); border-radius:999px; padding:.62em 1.4em;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__links .nav__cta::after{ display:none; }
.nav__links .nav__cta:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.nav__burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav__burger span{
  width:24px; height:1px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:79;
  background:var(--cream-2);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
  opacity:0; transition:opacity .4s var(--ease);
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu.is-open{ opacity:1; }
.mobilemenu nav{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.mobilemenu nav a{
  font-family:var(--f-serif); font-size:2.1rem; font-weight:300;
  text-decoration:none; padding:.24em 0;
}
.mobilemenu__foot{
  margin-top:40px; display:flex; gap:26px;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brown);
}
.mobilemenu__foot a{ text-decoration:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  background:var(--cream);
  isolation:isolate;
}
.hero__panel{
  grid-column:1; grid-row:1; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 40px) clamp(24px,4.4vw,74px) 100px var(--pad);
  background:
    radial-gradient(120% 90% at 0% 20%, var(--blush) 0%, rgba(244,220,215,0) 62%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 60%, var(--sand) 100%);
  position:relative; z-index:2;
}
.hero__inner{ max-width:540px; }

/* lockup di marca: script + "MAKEUP ARTIST" spaziato, come sul portfolio */
.lockup{
  margin:0 0 30px; display:block; max-width:100%;
}
.lockup__name{
  display:block;
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(3.1rem,7.4vw,6.2rem);
  line-height:1.06; color:var(--ink);
  /* Parisienne ha discendenti lunghi: evita il taglio */
  padding-bottom:.06em;
}
.lockup__role{
  display:block; margin-top:-.14em;
  font-family:var(--f-sans); font-weight:300;
  font-size:clamp(1.05rem,2.25vw,1.85rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}

.hero__rule{
  width:74px; height:1px; background:var(--brown); opacity:.5; margin:26px 0;
}
.hero__tag{
  font-size:.76rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brown-2); margin:0 0 22px; line-height:2.1;
}
.hero__tag em{ font-style:normal; color:var(--muted); letter-spacing:.28em; }

.hero__lede{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.18rem,1.7vw,1.55rem); line-height:1.5;
  color:var(--brown-deep); margin:0 0 40px; max-width:24ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__media{
  grid-column:2; grid-row:1; position:relative; overflow:hidden; background:var(--sand);
}
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none; } }

/* soft feather between panel and photo */
.hero__media::before{
  content:''; position:absolute; inset:0 auto 0 0; width:22%; z-index:2;
  background:linear-gradient(90deg, var(--cream-2) 0%, rgba(248,241,235,0) 100%);
  pointer-events:none;
}
.hero__grain{ display:none; }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:34px; z-index:4;
  display:flex; align-items:center; gap:14px; text-decoration:none;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--brown);
}
.hero__scroll-line{
  display:block; width:56px; height:1px; background:var(--brown); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--ink);
  transform:translateX(-100%); animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:auto; }
  .hero__media{ grid-column:1; grid-row:1; height:min(78svh,660px); }
  .hero__media::before{ inset:auto 0 0 0; width:auto; height:26%;
    background:linear-gradient(0deg, var(--cream-2) 0%, rgba(248,241,235,0) 100%); }
  .hero__media img{ object-position:50% 20%; }
  .hero__panel{ grid-row:2; padding:44px var(--pad) 64px; }
  .hero__inner{ max-width:none; }
  .hero__scroll{ display:none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden; background:var(--ink); color:var(--cream);
  padding:15px 0; position:relative; z-index:5;
}
.marquee__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:marq 46s linear infinite;
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; white-space:nowrap;
}
.marquee__track i{ font-style:normal; color:var(--rose); font-size:.55rem; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(80px,11vw,150px) var(--pad);
}
.about__grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,6vw,86px); align-items:center;
}
.about__figure{ margin:0; position:relative; isolation:isolate; }
.about__figure img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 30%;
  filter:grayscale(1) contrast(1.04);
}
.about__figure::after{
  content:''; position:absolute; inset:auto -18px -18px auto;
  width:58%; height:44%; border:1px solid var(--rose); z-index:-1;
}
.about__figure figcaption{
  margin-top:14px; font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted);
}
.about__body p{ margin:0 0 1.15em; color:var(--brown-deep); }
.about__body strong{ font-weight:500; color:var(--ink); }
.about__body em{ font-style:italic; }

.about__facts{
  list-style:none; margin:38px 0 0; padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.about__facts li{ display:flex; flex-direction:column; gap:4px; }
.about__facts strong{
  font-family:var(--f-serif); font-size:2.1rem; font-weight:300;
  line-height:1; color:var(--rose-deep);
}
.about__facts span{ font-size:.72rem; line-height:1.55; color:var(--muted); }

.about__sign{
  font-family:var(--f-script); font-size:2.6rem; color:var(--brown);
  margin:30px 0 0; line-height:1;
}

@media (max-width: 860px){
  .about__grid{ grid-template-columns:1fr; }
  .about__figure{ max-width:420px; }
  .about__facts{ grid-template-columns:1fr; gap:16px; }
  .about__facts li{ flex-direction:row; align-items:baseline; gap:14px; }
  .about__facts strong{ font-size:1.5rem; min-width:56px; }
}

/* ============================================================
   BAND (eyes)
   ============================================================ */
.band{ position:relative; height:min(62svh,540px); overflow:hidden; }
.band__img{
  position:absolute; inset:-12% 0; background-size:cover;
  background-position:50% 42%; will-change:transform;
}
.band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(42,33,30,.5) 0%, rgba(42,33,30,.12) 55%, rgba(42,33,30,.34) 100%);
}
.band__quote{
  position:absolute; inset:auto auto 0 0; z-index:2;
  padding:0 var(--pad) clamp(36px,6vw,64px); color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.band__quote p{
  font-family:var(--f-script); font-size:clamp(2.4rem,5.6vw,4.6rem);
  line-height:1.02; margin:0 0 .25em;
}
.band__quote span{
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; opacity:.9;
}

/* ============================================================
   ESPERIENZA
   ============================================================ */
.exp{ max-width:var(--wrap); margin-inline:auto; padding:clamp(80px,11vw,150px) var(--pad); }
.exp__head{ max-width:640px; margin-bottom:clamp(40px,5vw,66px); }
.exp__sub{ color:var(--muted); margin:0; }

.exp__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); }

.card{
  display:flex; flex-direction:column; text-align:left;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:0; cursor:pointer; overflow:hidden; position:relative;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px -30px rgba(94,70,61,.45);
  border-color:var(--rose);
}
.card__media{ display:block; overflow:hidden; background:var(--sand); }
.card__media img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ display:block; padding:26px clamp(20px,2vw,30px) 30px; }
.card__num{
  display:block; font-size:.62rem; letter-spacing:.3em; color:var(--rose-deep); margin-bottom:10px;
}
.card__title{
  display:block; font-family:var(--f-serif); font-size:clamp(1.6rem,2.2vw,2.1rem);
  font-weight:300; line-height:1.1; margin-bottom:8px;
}
.card__desc{ display:block; font-size:.86rem; color:var(--muted); line-height:1.6; margin-bottom:18px; }
.card__more{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--rose); padding-bottom:4px;
}
.card__more i{ font-style:normal; transition:transform .4s var(--ease); }
.card:hover .card__more i{ transform:translateX(5px); }
.card[aria-expanded="true"]{ border-color:var(--rose-deep); }
.card[aria-expanded="true"] .card__more i{ transform:rotate(90deg); }

@media (max-width: 800px){ .exp__cards{ grid-template-columns:1fr; } .card__media img{ aspect-ratio:16/10; } }

/* ---------- PANEL ---------- */
.panel{
  overflow:hidden; margin-top:clamp(16px,2.4vw,30px);
  background:var(--cream-2); border:1px solid var(--line);
}
.panel[hidden]{ display:none; }
.panel__inner{ padding:clamp(30px,4.6vw,62px); position:relative; }
.panel__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  border:1px solid var(--line); background:var(--white); border-radius:50%;
  cursor:pointer; font-size:.85rem; line-height:1;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.panel__close:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }

.panel__head{ max-width:780px; margin-bottom:clamp(30px,4vw,46px); }
.panel__text p{ margin:0 0 1em; color:var(--brown-deep); }
.panel__text strong{ font-weight:500; color:var(--ink); }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; }
.tags li{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.55em 1.05em; border:1px solid var(--line); border-radius:999px;
  color:var(--brown-2); background:rgba(255,255,255,.6);
}

/* ---------- GALLERY ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,auto); gap:clamp(8px,1.1vw,14px);
}
.gallery figure{ margin:0; overflow:hidden; background:var(--sand); cursor:zoom-in; position:relative; }
.gallery img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform 1s var(--ease), opacity .5s var(--ease);
}
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figure::after{
  content:''; position:absolute; inset:0; background:rgba(42,33,30,.1);
  opacity:0; transition:opacity .4s var(--ease);
}
.gallery figure:hover::after{ opacity:1; }
.gallery .g-tall{ grid-row:span 2; }
.gallery .g-tall img{ aspect-ratio:3/8; }
.gallery .g-wide{ grid-column:span 2; }
.gallery .g-wide img{ aspect-ratio:3/2; }

@media (max-width: 900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .g-tall{ grid-row:span 1; }
  .gallery .g-tall img{ aspect-ratio:3/4; }
  .gallery .g-wide{ grid-column:span 2; }
}

/* ---------- BRIDAL PACKAGES ---------- */
.bridal{
  margin-top:clamp(38px,5vw,64px); padding-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--line);
}
.bridal__head{ max-width:620px; margin-bottom:32px; }
.bridal__note{ color:var(--muted); margin:0; font-size:.94em; }
.bridal__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
.pkg{
  background:var(--white); border:1px solid var(--line); padding:30px 26px 32px;
  position:relative; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pkg:hover{ transform:translateY(-4px); box-shadow:0 20px 46px -26px rgba(94,70,61,.4); }
.pkg--hi{ border-color:var(--rose); background:linear-gradient(180deg,#fff 0%,var(--blush) 240%); }
.pkg__badge{
  position:absolute; top:-11px; left:26px;
  background:var(--rose-deep); color:#fff; font-size:.55rem;
  letter-spacing:.22em; text-transform:uppercase; padding:.5em 1em; border-radius:999px;
}
.pkg h5{
  font-family:var(--f-serif); font-size:1.5rem; font-weight:400;
  margin:0 0 2px; letter-spacing:.01em;
}
.pkg__kick{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brown); margin:0 0 16px;
}
.pkg__price{
  font-family:var(--f-serif); font-size:2rem; font-weight:300;
  color:var(--rose-deep); margin:0 0 18px; line-height:1;
}
.pkg ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pkg li{
  font-size:.86rem; line-height:1.55; color:var(--brown-deep);
  padding-left:20px; position:relative;
}
.pkg li::before{
  content:'✦'; position:absolute; left:0; top:0; color:var(--rose); font-size:.7em;
}
.bridal__legal{ font-size:.76rem; color:var(--muted); margin:22px 0 22px; }

@media (max-width: 860px){ .bridal__grid{ grid-template-columns:1fr; } }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.folio{
  position:relative; background:var(--ink); color:var(--cream);
  padding:clamp(70px,9vw,120px) var(--pad);
  display:grid; place-items:center; overflow:hidden;
}
.folio__strip{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr);
  opacity:.26;
}
.folio__strip img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35); }
.folio::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 50%, rgba(42,33,30,.94) 0%, rgba(42,33,30,.72) 100%);
}
.folio__box{
  position:relative; z-index:2; text-align:center; max-width:620px;
}
.folio__box .eyebrow{ color:var(--rose); }
.folio__box .h2{ color:var(--cream); }
.folio__box .h2 em{ color:var(--rose); }
.folio__txt{ color:rgba(253,250,247,.74); margin:0 0 34px; }
.folio__box .btn--solid{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }
.folio__box .btn--solid:hover{ --bg:var(--rose); --fg:var(--ink); --bd:var(--rose); }
.folio__meta{
  margin:16px 0 0; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(253,250,247,.45);
}
@media (max-width:700px){ .folio__strip{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   CONTATTI
   ============================================================ */
.contact{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(80px,11vw,150px) var(--pad);
}
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,80px); align-items:start;
}
.contact__lede{ color:var(--brown-deep); margin:0 0 36px; max-width:44ch; }

.contact__list{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:22px; }
.contact__list li{ display:grid; gap:5px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.contact__lbl{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.contact__list a, .contact__list li > span:last-child{
  font-family:var(--f-serif); font-size:1.32rem; font-weight:400; text-decoration:none;
  color:var(--ink); transition:color .35s var(--ease);
}
.contact__list a:hover{ color:var(--rose-deep); }

.socials{ display:flex; flex-wrap:wrap; gap:10px; }
.social{
  display:inline-flex; align-items:center; gap:.65em;
  padding:.8em 1.35em; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  background:var(--white);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.social svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.social svg .dot{ fill:currentColor; stroke:none; }
.social:nth-child(3) svg path{ fill:currentColor; stroke:none; }
.social:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }

/* ---------- FORM ---------- */
.form{
  background:var(--white); border:1px solid var(--line);
  padding:clamp(26px,3.4vw,42px);
  display:grid; gap:18px;
}
.form__title{
  font-family:var(--f-serif); font-size:1.45rem; font-weight:400; margin:0 0 6px;
}
.field{ display:grid; gap:7px; }
.field--half{ grid-template-columns:1fr 1fr; gap:14px; }
.field--half > div{ display:grid; gap:7px; }
.field label{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.field label small{ text-transform:none; letter-spacing:.06em; opacity:.75; }
.field input, .field select, .field textarea{
  font-family:var(--f-sans); font-size:.95rem; font-weight:300; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:0;
  padding:.86em 1em; width:100%; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--rose-deep); background:var(--white);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#c0554b; }
.form__hint{ font-size:.74rem; color:var(--muted); margin:0; text-align:center; }
.form__hint.is-ok{ color:var(--rose-deep); }

@media (max-width: 860px){
  .contact__grid{ grid-template-columns:1fr; }
  .field--half{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--cream-2); border-top:1px solid var(--line);
  padding:clamp(48px,6vw,74px) var(--pad);
}
.foot__inner{ max-width:var(--wrap); margin-inline:auto; text-align:center; }
.foot__logo{ font-size:clamp(2.4rem,4.6vw,3.4rem); margin:0 0 2px; line-height:1; }
.foot__role{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brown); margin:0 0 26px;
}
.foot__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-bottom:28px; }
.foot__links a{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
}
.foot__links a:hover{ border-color:var(--rose); }
.foot__copy{ font-size:.68rem; color:var(--muted); margin:0; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:120;
  background:rgba(26,20,18,.94);
  display:grid; place-items:center;
  opacity:0; transition:opacity .35s var(--ease);
  padding:clamp(40px,6vw,80px);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }
.lb__img{
  max-width:100%; max-height:82svh; object-fit:contain;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.lb button{
  position:absolute; background:none; border:0; color:rgba(253,250,247,.8);
  cursor:pointer; font-size:1.6rem; line-height:1; padding:16px;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.lb button:hover{ color:#fff; transform:scale(1.12); }
.lb__close{ top:14px; right:16px; font-size:1.15rem; }
.lb__prev{ left:6px; top:50%; transform:translateY(-50%); font-size:2.6rem; }
.lb__next{ right:6px; top:50%; transform:translateY(-50%); font-size:2.6rem; }
.lb__prev:hover{ transform:translateY(-50%) scale(1.12); }
.lb__next:hover{ transform:translateY(-50%) scale(1.12); }
.lb__cap{
  position:absolute; left:0; right:0; bottom:18px; text-align:center;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(253,250,247,.6); margin:0; padding:0 60px;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

body.is-locked{ overflow:hidden; }

@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__logo{ opacity:1; transform:none; pointer-events:auto; }
}