:root{
  --bg: #FBFAF8;
  --bg-panel: #FFFFFF;
  --ink: #1B1917;
  --ink-soft: #5C5750;
  --red: #A9291E;
  --red-deep: #7E1E15;
  --line: #E3DFD8;
  --line-strong: #C9C3B8;

  --f-display: 'Fraunces', serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img, svg{ display:block; max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,248,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  max-width:1180px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-display);
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:0.01em;
}
.brand img{ height:40px; width:auto; }
.brand span{ color:var(--red); }
.nav-links{
  display:flex; gap:36px;
  font-family:var(--f-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.nav-links a{ color:var(--ink-soft); position:relative; padding-bottom:4px; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active{ color:var(--red); }
.nav-cta{
  font-family:var(--f-mono);
  font-size:0.78rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--red);
  border:1px solid var(--red);
  padding:9px 18px;
  border-radius:2px;
  transition:background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover{ background:var(--red); color:#fff; }
.nav-mobile-hide{ display:flex; }
@media (max-width:760px){ .nav-mobile-hide{ display:none; } }

/* ---------- Hero (home) ---------- */
.hero{
  padding:100px 0 96px;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 120px 100%;
  opacity:0.5;
  pointer-events:none;
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--red);
  display:flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--red); }
h1{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-0.01em;
  max-width:14ch;
  position:relative; z-index:1;
}
h1 em{ font-style:italic; font-weight:300; color:var(--red-deep); }
.hero-sub{
  margin-top:28px; max-width:50ch;
  font-size:1.08rem; color:var(--ink-soft);
  position:relative; z-index:1;
}
.hero-actions{
  margin-top:44px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.btn-primary{
  font-family:var(--f-mono);
  font-size:0.85rem; letter-spacing:0.03em; text-transform:uppercase;
  background:var(--red); color:#fff;
  padding:15px 30px; border-radius:2px;
  transition:background 0.15s ease, transform 0.15s ease;
  display:inline-block;
}
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn-outline{
  font-family:var(--f-mono);
  font-size:0.85rem; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red);
  padding:14px 29px; border-radius:2px;
  transition:background 0.15s ease, color 0.15s ease;
  display:inline-block;
}
.btn-outline:hover{ background:var(--red); color:#fff; }
.hero-meta{
  font-family:var(--f-mono); font-size:0.8rem; color:var(--ink-soft);
  display:flex; gap:8px; align-items:baseline;
}
.hero-meta b{ color:var(--ink); font-weight:500; }

/* ---------- Page hero (chi sono / progetti) ---------- */
.page-hero{
  padding:72px 0 64px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ max-width:20ch; font-size:clamp(2.2rem, 4.6vw, 3.4rem); }
.page-hero .hero-sub{ margin-top:20px; }

/* ---------- Section labels ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  margin-bottom:56px; padding-top:88px;
}
.section-head .tag{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--red); white-space:nowrap;
}
.section-head h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing:-0.005em;
}
.section-head .rule{ flex:1; height:1px; background:var(--line-strong); margin:0 8px; align-self:center; }
.section-head .more{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--red); white-space:nowrap;
  border-bottom:1px solid var(--red); padding-bottom:2px;
}
@media (max-width:640px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .section-head .rule{ display:none; }
}

/* ---------- About / Chi sono ---------- */
.about{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  padding-bottom:96px; align-items:start;
}
.about p{ font-size:1.02rem; color:var(--ink-soft); margin-bottom:20px; max-width:52ch; }
.about p:first-child{ font-family:var(--f-display); font-size:1.35rem; color:var(--ink); line-height:1.4; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg-panel); padding:28px 24px; }
.stat .num{ font-family:var(--f-display); font-size:2.1rem; color:var(--red); line-height:1; }
.stat .label{ margin-top:10px; font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ---------- Gallery ---------- */
.gallery{ padding-bottom:110px; }
.grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; background:var(--line-strong); border:1px solid var(--line-strong); }
.grid.grid-teaser{ grid-template-columns:repeat(4, 1fr); }
.card{ background:var(--bg-panel); position:relative; overflow:hidden; cursor:pointer; }
.card-frame{ aspect-ratio:4/3; position:relative; overflow:hidden; background:#F2F0EB; }
.card-frame svg{ width:100%; height:100%; transition:transform 0.5s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-frame svg{ transform:scale(1.04); }
.corner{ position:absolute; width:16px; height:16px; opacity:0; transition:opacity 0.25s ease; pointer-events:none; }
.card:hover .corner{ opacity:1; }
.corner.tl{ top:10px; left:10px; border-top:1.5px solid var(--red); border-left:1.5px solid var(--red); }
.corner.tr{ top:10px; right:10px; border-top:1.5px solid var(--red); border-right:1.5px solid var(--red); }
.corner.bl{ bottom:10px; left:10px; border-bottom:1.5px solid var(--red); border-left:1.5px solid var(--red); }
.corner.br{ bottom:10px; right:10px; border-bottom:1.5px solid var(--red); border-right:1.5px solid var(--red); }
.card-info{
  padding:20px 22px 24px; display:flex; justify-content:space-between; align-items:flex-end;
  gap:12px; border-top:1px solid var(--line);
}
.card-info h3{ font-family:var(--f-display); font-weight:400; font-size:1.15rem; }
.card-info .meta{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.card-info .idx{ font-family:var(--f-mono); font-size:0.72rem; color:var(--red); white-space:nowrap; }
@media (max-width:760px){
  .grid{ grid-template-columns:1fr; }
  .grid.grid-teaser{ grid-template-columns:repeat(2, 1fr); }
}
.gallery-note{
  margin-top:20px; font-family:var(--f-mono); font-size:0.76rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.gallery-note::before{ content:'●'; color:var(--red); font-size:0.5rem; }

.teaser-footer{ margin-top:36px; }

/* ---------- Process ---------- */
.process{ padding-bottom:110px; }
.process-list{ border-top:1px solid var(--line-strong); }
.process-item{ display:grid; grid-template-columns:70px 1fr 1.4fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); }
.process-item .n{ font-family:var(--f-mono); font-size:0.85rem; color:var(--red); }
.process-item h4{ font-family:var(--f-display); font-weight:500; font-size:1.15rem; }
.process-item p{ color:var(--ink-soft); font-size:0.95rem; max-width:52ch; }
@media (max-width:700px){ .process-item{ grid-template-columns:1fr; gap:8px; } }

/* ---------- CTA / Contact ---------- */
.cta{ background:var(--ink); color:#F5F2ED; padding:110px 0; position:relative; overflow:hidden; }
.cta::before{ content:''; position:absolute; top:-40%; right:-10%; width:520px; height:520px; border:1px solid rgba(245,242,237,0.08); border-radius:50%; }
.cta-inner{ max-width:640px; position:relative; z-index:1; }
.cta .eyebrow{ color:var(--red); }
.cta .eyebrow::before{ background:var(--red); }
.cta h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(2rem, 4vw, 3rem); line-height:1.12; margin-bottom:24px; }
.cta h2 em{ font-style:italic; color:#E8907F; font-weight:300; }
.cta p{ color:#B9B3A9; font-size:1.02rem; max-width:48ch; margin-bottom:40px; }
.cta-links{ display:flex; flex-wrap:wrap; gap:16px; }
.cta-links a.primary{
  background:var(--red); color:#fff; font-family:var(--f-mono); font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.03em; padding:16px 32px; border-radius:2px;
  transition:background 0.15s ease;
}
.cta-links a.primary:hover{ background:var(--red-deep); }
.cta-contacts{ margin-top:56px; display:flex; gap:48px; flex-wrap:wrap; font-family:var(--f-mono); font-size:0.82rem; }
.cta-contacts div .l{ color:#8E887E; text-transform:uppercase; letter-spacing:0.04em; font-size:0.72rem; margin-bottom:6px; }
.cta-contacts div .v{ color:#F5F2ED; }

/* ---------- Footer ---------- */
footer{ padding:32px 0; border-top:1px solid var(--line); }
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:0.74rem; color:var(--ink-soft); letter-spacing:0.02em;
}
.footer-row a{ color:var(--ink-soft); }
.footer-row a:hover{ color:var(--red); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--ink); color:#F5F2ED;
  border-top:1px solid rgba(245,242,237,0.15);
  padding:22px 32px;
  transform:translateY(110%);
  transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.visible{ transform:translateY(0); }
.cookie-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cookie-text{ max-width:64ch; font-size:0.88rem; color:#C9C3B8; }
.cookie-text a{ color:#F5F2ED; border-bottom:1px solid rgba(245,242,237,0.4); }
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-actions button{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.03em; text-transform:uppercase;
  border-radius:2px; padding:11px 22px; cursor:pointer; border:1px solid transparent;
}
.cookie-actions .accept{ background:var(--red); color:#fff; }
.cookie-actions .accept:hover{ background:var(--red-deep); }
.cookie-actions .decline{ background:transparent; color:#F5F2ED; border-color:rgba(245,242,237,0.3); }
.cookie-actions .decline:hover{ border-color:#F5F2ED; }

/* ---------- Simple page content (privacy etc.) ---------- */
.page-content{ padding:72px 0 110px; max-width:72ch; }
.page-content h2{ font-family:var(--f-display); font-weight:500; font-size:1.4rem; margin:36px 0 14px; }
.page-content h2:first-child{ margin-top:0; }
.page-content p{ color:var(--ink-soft); margin-bottom:16px; }