@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

:root{
  --bg:#FFFFFF;
  --panel:#F4F3F0;
  --ink:#17160F;
  --ink-soft:#7A756B;
  --line:#E6E3DC;
  --accent:#AC5238;

  --ff:'Jost', ui-sans-serif, system-ui, sans-serif;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.75rem;
  --space-4:3rem;
  --space-5:5rem;
  --space-6:7.5rem;

  --max:88rem;
  --max-wide:108rem;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:var(--ff); }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--space-3);
}
@media (min-width:640px){ .wrap{ padding-inline:var(--space-4); } }

.wrap-wide{
  max-width:var(--max-wide);
  margin:0 auto;
  padding-inline:var(--space-2);
}
@media (min-width:640px){ .wrap-wide{ padding-inline:var(--space-3); } }

.eyebrow{
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.page-title{
  text-align:center;
  font-weight:300;
  font-size:clamp(1.5rem, 1.4vw + 1rem, 2.15rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  margin:0;
  padding-left:.42em;
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.5rem;
  gap:var(--space-3);
}
.brand{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:1.05rem; letter-spacing:.06em;
  white-space:nowrap;
}
.brand .sep{ color:var(--line); }
.brand .role{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.nav-right{ display:flex; align-items:center; gap:var(--space-4); }
.nav-links{
  display:flex; gap:var(--space-4);
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--accent); }

.lang-switch{ display:flex; gap:.4rem; font-size:.72rem; letter-spacing:.1em; }
.lang-switch a{ color:var(--ink-soft); padding:.1rem .2rem; }
.lang-switch a[aria-current="true"]{ color:var(--ink); font-weight:500; }
.lang-switch span{ color:var(--line); }

.social-icon{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.social-icon:hover{ color:var(--ink); }
.nav-social{ display:flex; }
.footer-social{ margin-left:.3rem; }

.menu-btn{
  display:none;
  background:none; border:1px solid var(--line); color:var(--ink);
  width:2.3rem; height:2.3rem; cursor:pointer;
}

@media (max-width:900px){
  .nav{ position:relative; }
  .nav-links{
    display:none;
    position:absolute; top:100%; right:0; margin-top:1px;
    flex-direction:column; gap:0;
    background:var(--bg); border:1px solid var(--line);
    width:14rem; padding-inline:var(--space-3);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding-block:1rem; border-bottom:1px solid var(--line); width:100%; }
  .nav-links li:last-child a{ border-bottom:none; }
  .menu-btn{ display:block; }
}

@media (max-width:600px){
  .nav{ gap:var(--space-2); }
  .brand{ min-width:0; overflow:hidden; }
  .brand .sep, .brand .role{ display:none; }
  .nav-right{ gap:var(--space-2); flex-shrink:0; }
  .lang-switch{ font-size:.68rem; }
}

/* ---------- hero (home) ---------- */
.hero{ padding-top:var(--space-5); padding-bottom:var(--space-5); text-align:center; }
.hero-name{
  font-weight:300; font-size:clamp(1.6rem, 2vw + 1rem, 2.4rem);
  letter-spacing:.42em; text-transform:uppercase;
  padding-left:.42em;
}
.hero-role{
  margin-top:.9rem;
  font-size:clamp(1rem, .9vw + .8rem, 1.25rem); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero-slider{
  position:relative;
  margin-top:var(--space-4);
  aspect-ratio:3/4;
  background:var(--panel);
  overflow:hidden;
}
@media (min-width:720px){ .hero-slider{ aspect-ratio:16/10; } }
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .6s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.slider-arrow{
  position:absolute; top:50%; translate:0 -50%;
  background:rgba(255,255,255,.85); border:none; cursor:pointer;
  color:var(--ink); width:2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
}
.slider-arrow.prev{ left:.5rem; }
.slider-arrow.next{ right:.5rem; }
@media (min-width:640px){ .slider-arrow.prev{ left:1.5rem; } .slider-arrow.next{ right:1.5rem; } }

.hero-sub{
  max-width:34rem; margin:var(--space-4) auto 0;
  color:var(--ink-soft); font-size:.98rem;
}
.hero-cta{
  display:inline-block; margin-top:var(--space-3);
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  padding-bottom:.25rem;
}

/* ---------- focus row (home) ---------- */
.focus-row{
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--line);
  display:grid; gap:var(--space-4);
  text-align:left;
}
@media (min-width:720px){
  .focus-row{ grid-template-columns:repeat(3,1fr); gap:var(--space-5); text-align:center; }
}
.focus-item .focus-num{
  display:block; font-size:.7rem; letter-spacing:.2em; color:var(--ink-soft);
  margin-bottom:.6rem;
}
.focus-item h3{
  font-weight:300; font-size:1.1rem; letter-spacing:.04em;
  margin-bottom:.4rem;
}
.focus-item p{
  color:var(--ink-soft); font-size:.9rem; line-height:1.6;
}

/* ---------- generic section ---------- */
section{ padding-block:var(--space-5); }
.section-title{ padding-top:var(--space-4); padding-bottom:var(--space-5); }

.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:var(--space-3);
}
.back-link:hover{ color:var(--ink); }

/* ---------- chooser (progetti) ---------- */
.chooser{ display:flex; flex-direction:column; gap:2px; background:var(--line); }
.chooser-card{
  position:relative; display:block;
  aspect-ratio:21/9; background:var(--panel); overflow:hidden;
}
.chooser-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.chooser-card:hover img{ transform:scale(1.03); }
.chooser-card .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,0) 55%);
}
.chooser-card .label{
  position:absolute; left:var(--space-4); top:var(--space-4);
  color:#fff;
}
.chooser-card .label .eyebrow{ color:rgba(255,255,255,.75); }
.chooser-card .label h2{
  margin:.3rem 0 0; font-weight:300; font-size:clamp(1.6rem,2.6vw + 1.1rem,2.9rem);
  letter-spacing:.06em;
}

/* ---------- gallery grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .grid{ grid-template-columns:1fr; } }

.tile{
  position:relative;
  aspect-ratio:3/4;
  background:var(--panel);
  overflow:hidden;
  display:block;
}
.tile img{ width:100%; height:100%; object-fit:cover; }

.tile.link-tile{ display:flex; }
.tile.link-tile .scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 60%);
}
.tile.link-tile .cap{
  position:absolute; left:var(--space-2); bottom:var(--space-2); right:var(--space-2);
  color:#fff;
}
.tile.link-tile .cap .name{ font-size:.92rem; letter-spacing:.04em; }
.tile.link-tile .cap .cat{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-top:.15rem; }

.tile.shot{ cursor:zoom-in; }
.tile.shot:hover{ opacity:.92; }

/* ---------- press grid (product page) ---------- */
.press-section{
  background:#1c1a17;
  padding:var(--space-5) 0;
}
.press-section .gallery-heading h2{ color:#f2ede6; }
.press-grid .grid{
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
  background:transparent;
  max-width:56rem;
  margin:0 auto;
}
.press-grid .tile{
  aspect-ratio:3/4;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.press-grid .tile:hover{ opacity:.85; }
@media (max-width:900px){ .press-grid .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:540px){ .press-grid .grid{ grid-template-columns:repeat(2,1fr); } }

.gallery-note{
  text-align:center; max-width:34rem; margin:var(--space-4) auto 0;
  font-size:.85rem; color:var(--ink-soft);
}

.gallery-heading{ text-align:center; margin-bottom:var(--space-3); }
.gallery-heading h2{
  font-weight:400; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase;
}
.gallery-block + .gallery-block{ margin-top:var(--space-5); }

/* ---------- about split ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:34rem;
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; min-height:0; } }
.split-panel{
  background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-5) var(--space-4);
}
.split-body{ max-width:26rem; text-align:center; }
.split-body .eyebrow{ display:block; margin-bottom:var(--space-3); }
.split-body p{ margin:0; color:var(--ink-soft); }
.split-body p + p{ margin-top:var(--space-2); }
.split-img{
  position:relative;
  background:#EDEBE5;
  min-height:20rem;
  overflow:hidden;
}
.split-img img{ width:100%; height:100%; object-fit:cover; }
.split-img .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- project intro ---------- */
.project-intro{ max-width:44rem; margin:0 auto var(--space-5); text-align:center; }
.project-intro p{ color:var(--ink-soft); margin:0; }
.project-intro p + p{ margin-top:var(--space-2); }

/* ---------- services list ---------- */
.services-list{ max-width:46rem; margin:0 auto; }
.service-row{
  display:grid; grid-template-columns:10rem 1fr;
  gap:var(--space-4);
  padding-block:var(--space-4);
  border-top:1px solid var(--line);
}
.services-list .service-row:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:600px){ .service-row{ grid-template-columns:1fr; gap:var(--space-1); } }
.service-row h2{
  margin:0; font-weight:400; font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.service-row p{ margin:0; color:var(--ink-soft); max-width:34rem; }

/* ---------- video block ---------- */
.video-block{ max-width:52rem; margin:0 auto; }
.video-block video{ width:100%; background:#000; }
.video-caption{ text-align:center; margin-top:var(--space-2); font-size:.82rem; color:var(--ink-soft); }

/* ---------- contact ---------- */
.contact-wrap{
  display:grid; grid-template-columns:18rem 1fr;
  gap:var(--space-5);
  align-items:center;
}
@media (max-width:760px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-photo{
  aspect-ratio:3/4; background:var(--panel); overflow:hidden; position:relative;
}
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
.contact-photo .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding:1rem;
}
.contact-panel{ background:var(--panel); padding:var(--space-5) var(--space-4); }
.contact-block{ margin-bottom:var(--space-4); }
.contact-block:last-child{ margin-bottom:0; }
.contact-block .eyebrow{ display:block; margin-bottom:var(--space-2); }
.contact-block p, .contact-block a{ margin:0; color:var(--ink-soft); }
.contact-block a:hover{ color:var(--accent); }
.contact-block .lines p + p{ margin-top:.2rem; }
.tbd{ font-style:italic; opacity:.7; }
.social-line{ display:flex; align-items:center; gap:.5rem; }
.social-line .social-icon{ flex-shrink:0; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding-block:var(--space-3); }
.footer-row{
  display:flex; justify-content:center; align-items:center; gap:var(--space-2);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; flex-wrap:wrap;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,14,10,.94);
  display:none;
  align-items:center; justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; }
.lightbox .lb-close{
  position:absolute; top:1.2rem; right:1.5rem;
  background:none; border:none; color:#fff; cursor:pointer;
  width:2.6rem; height:2.6rem;
}
.lightbox .lb-arrow{
  position:absolute; top:50%; translate:0 -50%;
  background:none; border:none; color:#fff; cursor:pointer;
  width:3rem; height:3rem;
}
.lightbox .lb-arrow.prev{ left:.5rem; }
.lightbox .lb-arrow.next{ right:.5rem; }
@media (min-width:640px){ .lightbox .lb-arrow.prev{ left:1.5rem; } .lightbox .lb-arrow.next{ right:1.5rem; } }
.lightbox .lb-count{
  position:absolute; bottom:1.2rem; left:50%; translate:-50% 0;
  color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:.1em;
}