@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/instrument-serif-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400;
  font-display:swap; src:url('../fonts/instrument-serif-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/space-grotesk-variable.woff2') format('woff2');
}
:root{
  --void:#0D0C0A;
  --void-2:#161410;
  --paper:#EDE7DD;
  --stone:#8C8477;
  --gold:#C7952E;
  --teal:#3FA79C;
  --line: rgba(237,231,221,0.12);
  --line-strong: rgba(237,231,221,0.24);
  --serif: 'Instrument Serif', serif;
  --sans: 'Space Grotesk', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body.nav-open{overflow:hidden;}
/* Film grain: the difference between a flat black rectangle and something with
   material presence — the same tactile cue as the marble/paper textures in the
   hero artwork, carried through the rest of the page. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;}
.wrap{max-width:1100px; margin:0 auto; padding:0 56px 0 64px;}
.prose{max-width:640px;}

/* ACCESSIBILITY */
.skip-link{
  position:absolute; top:-48px; left:16px; z-index:1000;
  background:var(--paper); color:var(--void);
  padding:12px 18px; font-size:14px; font-weight:500;
  text-decoration:none; border-radius:2px;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.portfolio-card:focus-visible, .servizio-card:focus-visible{outline-offset:-2px;}

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,12,10,0.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logotype{
  font-family:var(--sans); font-weight:600; font-size:14px;
  letter-spacing:0.1em; text-decoration:none;
  display:flex; align-items:baseline; gap:8px;
  position:relative; z-index:2;
}
.logotype .loc{font-weight:400; color:var(--stone); font-size:12.5px; letter-spacing:0.04em;}
.navlinks{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
.navlinks a{
  font-size:14.5px; text-decoration:none; color:var(--stone);
  transition:color .2s ease;
  position:relative; display:inline-block;
}
.navlinks a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.22,.68,0,1);
}
.navlinks a:hover{color:var(--paper);}
.navlinks a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
  display:none;
  position:relative; z-index:2;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  display:block; width:22px; height:1.5px; background:var(--paper);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span{position:relative;}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0;
}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}

/* HERO — scroll reveal */
.hero-reveal{
  position:relative;
  height:calc(1250px + 100vh);
}
.hero-sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden;
  background:var(--void);
  display:flex; align-items:center;
}
.hero-media-frame{ display:contents; }
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center right;
  clip-path:inset(23%);
  transform:scale(1.32);
  will-change:clip-path, transform;
  background:var(--void-2) url('../images/hero-collage.webp') center right / cover no-repeat;
}
.hero-content{
  position:relative; z-index:2;
  max-width:640px;
  padding:0 56px 0 64px;
  will-change:opacity, transform;
}
.hero-content h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 5.4vw, 4.2rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 28px;
}
.hero-content h1 .line-2{ font-style:italic; display:block; color:var(--paper); }
.hero-content .lede{
  font-size:17px; color:var(--stone); max-width:46ch; margin:0 0 36px;
  line-height:1.65;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; font-family:var(--sans); font-size:14.5px; font-weight:500;
  text-decoration:none; letter-spacing:0.01em;
  border:1px solid transparent; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--paper); color:var(--void); border-color:var(--paper); }
.btn-primary:hover{ background:transparent; color:var(--paper); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.hero-content .meta-row{
  display:flex; gap:36px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line);
}
.hero-content .meta-row div{font-size:13.5px; color:var(--stone);}
.hero-content .meta-row strong{display:block; color:var(--paper); font-size:14.5px; font-weight:500; margin-bottom:4px; font-family:var(--sans);}
.scroll-hint{
  position:absolute; bottom:36px; left:64px; z-index:2;
  font-size:12.5px; color:var(--stone); letter-spacing:0.04em;
  display:flex; align-items:center; gap:10px;
}
.scroll-hint::after{
  content:""; width:1px; height:28px; background:var(--line-strong);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleY(0.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .scroll-hint::after{ animation:none; } }

.hero-wordmark{
  position:absolute; top:50%; left:50%; z-index:1;
  transform:translate(-50%, -50%);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(3rem, 9vw, 7rem); line-height:0.95;
  letter-spacing:-0.01em; text-align:center; color:var(--paper);
  text-shadow:0 4px 40px rgba(0,0,0,.5);
  pointer-events:none; will-change:opacity;
}
.hero-wordmark span{ display:block; color:var(--gold); }
.hero-media-toggle{
  position:absolute; bottom:24px; right:24px; z-index:2;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,12,10,0.55); backdrop-filter:blur(4px);
  border:1px solid var(--line-strong); border-radius:50%;
  color:var(--paper); cursor:pointer;
  transition:background .2s ease;
}
.hero-media-toggle:hover{ background:rgba(13,12,10,0.8); }
.hero-media-toggle svg{ width:16px; height:16px; }
.hero-media-toggle .icon-pause{ display:none; }
.hero-media-toggle[data-playing="true"] .icon-play{ display:none; }
.hero-media-toggle[data-playing="true"] .icon-pause{ display:block; }
@media (max-width:760px){
  .hero-media-toggle{ bottom:12px; right:12px; width:44px; height:44px; }
}

/* Below the desktop breakpoint, drop the pinned scroll-reveal entirely: a 16:9
   video forced to cover a tall, narrow viewport has to blow up and crop so hard
   that it stops looking like the artwork and swallows the text on top of it.
   Instead show the whole frame uncropped (aspect-ratio matches the source, so
   object-fit:cover needs zero cropping) and put the text in normal flow below it. */
@media (max-width:760px){
  .hero-reveal{ height:auto; }
  .hero-sticky{
    position:relative; height:auto; display:block; overflow:visible;
  }
  .hero-media-frame{
    display:block; position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  }
  .hero-media{
    position:absolute; inset:0;
    width:100%; height:100%; aspect-ratio:auto;
    clip-path:none; transform:none;
  }
  /* Dark scrim along the bottom of the frame so the headline caption
     stays legible regardless of what the video shows underneath it. */
  .hero-media-frame::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:65%; z-index:1;
    background:linear-gradient(to top, rgba(13,12,10,.9) 0%, rgba(13,12,10,0) 100%);
    pointer-events:none;
  }
  .hero-wordmark{ display:none; }
  .hero-content{ position:relative; z-index:auto; padding:14px 24px 8px; max-width:none; }
  /* The headline overlaps the bottom of the video frame as a caption;
     the rest of the content (lede, CTA, meta row) stays in normal flow below it. */
  .hero-content h1{
    position:absolute; left:24px; right:24px; bottom:100%;
    margin:0 0 18px; z-index:2;
    font-size:clamp(1.6rem, 7vw, 2.1rem);
  }
  .scroll-hint{ display:none; }
}
/* SECTION HEADERS */
.section{padding:96px 0; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
@media (max-width:760px){
  .section{ padding:52px 0; }
}
.section::before{
  content:"";
  position:absolute; top:-140px; left:6%;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(199,149,46,0.055), transparent 70%);
  filter:blur(20px); pointer-events:none;
}
.section:nth-of-type(even)::before{
  left:auto; right:4%;
  background:radial-gradient(circle, rgba(63,167,156,0.05), transparent 70%);
}
.section .wrap{ position:relative; z-index:1; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.4vw,2.6rem);
  margin:0 0 14px; letter-spacing:-0.01em;
  position:relative; display:inline-block;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.68,0,1);
}
.section-head h2::after{
  content:"";
  display:block; width:56px; height:3px; margin-top:16px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.22,.68,0,1) .25s;
}
.section-head.in-view h2{ opacity:1; transform:translateY(0); }
.section-head.in-view h2::after{ transform:scaleX(1); }
.section-head p{
  color:var(--stone); margin:8px 0 0; max-width:44ch; font-size:15px;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease .12s, transform .7s cubic-bezier(.22,.68,0,1) .12s;
}
.section-head.in-view p{ opacity:1; transform:translateY(0); }

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr; max-width:720px;}
.about{ position:relative; padding-left:28px; }
.about h3{font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:0 0 16px;}
.read-progress{
  position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--line-strong);
}
.read-progress-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:var(--gold);
}
@media (max-width:760px){
  .about{ padding-left:20px; }
}
.about-lede{
  font-family:var(--serif); font-style:italic; color:var(--paper);
  font-size:20px; line-height:1.5; margin:0 0 24px;
}
.about p{color:#D6CFC3; font-size:15.5px; margin:0 0 18px;}
.about-more-toggle{
  display:none;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--gold);
  background:none; border:none; padding:0 0 20px; cursor:pointer;
}
.about-more-toggle:hover{ color:var(--paper); }
@media (max-width:760px){
  .about-more-toggle{ display:block; }
  .about-more{
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .4s ease, opacity .3s ease;
  }
  .about-more.expanded{ max-height:2000px; opacity:1; }
}
.about-facts{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px;}
.about-facts li{
  display:flex; gap:14px; font-size:14.5px; color:var(--stone);
  padding:10px 0; border-top:1px solid var(--line);
  transition:padding-left .3s cubic-bezier(.22,.68,0,1), border-color .3s ease, color .3s ease;
}
.about-facts li:hover{
  padding-left:10px; border-top-color:var(--gold); color:var(--paper);
}
.about-facts li strong{color:var(--paper); font-weight:500; min-width:130px;}

/* SERVIZI */
.servizi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.servizio-card{
  background:var(--void); padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
  transition:background .25s ease;
}
.servizio-card:hover{background:var(--void-2);}
.servizio-card--secondary{ grid-column:1 / -1; }
.servizio-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--icon-color, var(--gold));
}
.servizio-icon svg{width:28px; height:28px;}
.servizio-card h3{
  font-family:var(--serif); font-weight:400; font-size:1.25rem; margin:0;
}
.servizio-card p{color:var(--stone); font-size:14px; margin:0; line-height:1.6;}
.servizio-header{ display:contents; }
.servizio-body{ display:contents; }
.servizio-chevron{ display:none; }

@media (max-width:760px){
  .servizi-grid{
    display:block; gap:0; background:none; border:none;
    border-top:1px solid var(--line);
  }
  .servizio-card{
    display:block; padding:0; background:none;
    border-bottom:1px solid var(--line);
  }
  .servizio-card:hover{ background:none; }
  .servizio-header{
    display:flex; align-items:center; gap:12px;
    padding:16px 4px; cursor:pointer;
  }
  .servizio-icon{ width:26px; height:26px; flex-shrink:0; }
  .servizio-icon svg{ width:18px; height:18px; }
  .servizio-card h3{ flex:1; font-size:15.5px; }
  .servizio-chevron{
    display:block; width:18px; height:18px; flex-shrink:0;
    color:var(--stone); transition:transform .3s ease;
  }
  .servizio-card[aria-expanded="true"] .servizio-chevron,
  .servizio-header[aria-expanded="true"] .servizio-chevron{ transform:rotate(180deg); }
  .servizio-body{
    display:block; max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .servizio-card.open .servizio-body{ max-height:200px; }
  .servizio-body p{ padding:0 4px 18px 38px; }
  .servizio-card--secondary .servizio-header h3{ color:var(--stone); font-size:14.5px; }
}

/* WORK INDEX */
.category-group{margin-bottom:52px;}
.category-group:last-child{margin-bottom:0;}
.category-label{
  font-size:13.5px; color:var(--stone); font-weight:500;
  margin:0 0 4px; letter-spacing:0.02em;
  display:flex; align-items:center; gap:9px;
}
.accordion-chevron{ display:none; }
.category-label::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--dot-color, var(--gold));
  flex-shrink:0;
}
/* Case study: an icon per topic instead of the plain dot used elsewhere. */
#manconi .category-label::before{ content:none; }
.case-icon{
  width:18px; height:18px; flex-shrink:0;
  color:var(--dot-color, var(--gold));
}

/* CASE STUDY */
.case-study{background:var(--void-2);}
.case-intro{max-width:640px; margin-bottom:64px;}
.case-intro p{font-size:17px; color:#D6CFC3;}
.case-intro p:first-of-type{
  font-family:var(--serif); font-style:italic; font-size:23px; color:var(--paper);
  line-height:1.5;
}
.case-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  margin-bottom:64px; padding-bottom:56px; border-bottom:1px solid var(--line);
}
.case-facts p:not(.category-label){ font-size:14.5px; color:var(--stone); line-height:1.6; }
.case-section-label{ margin-bottom:24px; }
.case-applications-fact{ max-width:640px; margin-top:56px; margin-bottom:64px; }
.case-applications-fact p:not(.category-label){ font-size:14.5px; color:var(--stone); line-height:1.6; }
.case-result{ max-width:640px; }
.case-result p:not(.category-label){
  font-family:var(--serif); font-style:italic; font-size:21px; color:var(--paper);
  line-height:1.55;
}
@media (max-width:760px){
  .case-facts{ grid-template-columns:1fr; gap:32px; }
}
.timeline{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  padding-top:32px;
}
.timeline::before{
  content:"";
  position:absolute; top:5px; left:0; right:0; height:1px;
  background:var(--line-strong);
}
.timeline-item{
  position:relative; padding-top:26px;
  transition:transform .3s ease;
}
.timeline-item::before{
  content:"";
  position:absolute; top:0; left:0;
  width:11px; height:11px; border-radius:50%;
  background:var(--void-2); border:2px solid var(--gold);
  transition:background .3s ease, transform .3s ease;
}
.timeline-item:hover{ transform:translateY(-4px); }
.timeline-item:hover::before{ background:var(--gold); transform:scale(1.15); }
.timeline-preview{
  position:absolute; top:-100px; left:-6px; z-index:5;
  width:118px; height:88px; object-fit:cover;
  border:1px solid var(--line-strong); background:#000;
  opacity:0; pointer-events:none;
  transform:rotate(-4deg) scale(.92) translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.4);
}
.timeline-item:hover .timeline-preview,
.timeline-item.preview-active .timeline-preview{
  opacity:1; transform:rotate(-2deg) scale(1) translateY(0);
}
.timeline-year{font-family:var(--serif); font-size:2.1rem; color:var(--gold); margin:0 0 14px;}
.timeline-item h4{margin:0 0 8px; font-size:15px; font-weight:500;}
.timeline-item p{margin:0; font-size:13.5px; color:var(--stone);}

/* CONTACT */
.contact{padding:120px 0; border-bottom:none; position:relative; overflow:hidden;}
.contact::before{
  content:"";
  position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:640px; height:360px;
  background:radial-gradient(ellipse, rgba(199,149,46,0.14), rgba(63,167,156,0.08) 60%, transparent 75%);
  filter:blur(10px);
  pointer-events:none;
}
.contact .wrap{ position:relative; z-index:1; }
.contact h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem); max-width:16ch; margin:0 0 40px;
}
.contact-links{display:flex; gap:40px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line);}
.contact-links a{
  text-decoration:none; font-size:15px; color:var(--paper);
  display:flex; flex-direction:row; align-items:center; gap:10px;
  position:relative; padding:9px 0 15px; width:fit-content;
}
.contact-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.22,.68,0,1);
}
.contact-icon{width:18px; height:18px; flex-shrink:0; color:var(--stone); transition:color .2s ease;}
.contact-links a:hover{color:var(--gold);}
.contact-links a:hover .contact-icon{color:var(--gold);}
.contact-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.stagger-text{display:inline-block;}
.stagger-char{position:relative; display:inline-block; overflow:hidden; vertical-align:top;}
.stagger-layer{
  display:inline-block; transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  transition-delay:var(--d, 0ms);
}
.stagger-layer-top{transform:translateY(0%);}
.stagger-layer-bottom{position:absolute; left:0; top:0; transform:translateY(110%); user-select:none;}
.contact-links a:hover .stagger-layer-top{transform:translateY(-110%);}
.contact-links a:hover .stagger-layer-bottom{transform:translateY(0%);}

footer{padding:32px; text-align:center; font-size:13px; color:var(--stone);}
.footer-links{margin:8px 0 0; font-size:12.5px;}
.footer-links a{color:var(--stone); text-decoration:underline; text-underline-offset:3px;}
.footer-links a:hover{color:var(--gold);}
.footer-links .sep{padding:0 8px; opacity:.5;}

/* COOKIE BANNER */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--void-2); border-top:1px solid var(--line-strong);
  padding:20px 64px;
  display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner.visible{ display:flex; }
.cookie-banner p{ margin:0; font-size:13.5px; color:var(--stone); max-width:640px; line-height:1.5; }
.cookie-banner a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.cookie-banner a:hover{ color:var(--gold); }
.cookie-banner .btn{ flex-shrink:0; }
@media (max-width:760px){
  .cookie-banner{ padding:18px 24px; }
  .cookie-banner p{ font-size:13px; }
}

/* LEGAL PAGES (privacy / cookie policy) */
.legal-page{ padding:160px 0 100px; }
.legal-page .wrap{ max-width:720px; }
.legal-page h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,5vw,3rem);
  margin:0 0 8px;
}
.legal-page .legal-updated{ font-size:13px; color:var(--stone); margin:0 0 56px; }
.legal-page h2{
  font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.5rem;
  color:var(--paper); margin:48px 0 16px;
}
.legal-page h2:first-of-type{ margin-top:0; }
.legal-page p{ font-size:15px; color:var(--stone); line-height:1.7; margin:0 0 16px; }
.legal-page a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.legal-page a:hover{ color:var(--gold); }
.legal-page ul{ margin:0 0 16px; padding-left:20px; }
.legal-page li{ font-size:15px; color:var(--stone); line-height:1.7; margin-bottom:6px; }
.legal-page strong{ color:var(--paper); font-weight:500; }
.legal-page .back-link{ display:inline-block; margin-bottom:40px; font-size:13.5px; }

@media (max-width:760px){
  .wrap{padding:0 24px 0 28px;}
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .timeline{grid-template-columns:1fr 1fr;}
  /* No hover on touch, and the floating polaroid preview doesn't translate well
     to a tap gesture on a two-column grid — dropped entirely on mobile. */
  .timeline-preview{ display:none; }

  .navlinks{
    position:fixed; top:72px; left:0; right:0; z-index:46;
    width:100%; height:auto; max-height:calc(100vh - 72px); overflow-y:auto;
    background:var(--void-2);
    flex-direction:column; gap:0;
    padding:8px 28px 24px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .3s cubic-bezier(.22,.68,0,1), opacity .3s ease, visibility 0s linear .3s;
    border-left:none; border-bottom:1px solid var(--line-strong);
  }
  .navlinks.open{
    transform:translateY(0); opacity:1; visibility:visible;
    transition:transform .3s cubic-bezier(.22,.68,0,1), opacity .3s ease;
  }
  .navlinks li{border-top:1px solid var(--line); width:100%;}
  .navlinks li:first-child{border-top:none;}
  .navlinks a{display:block; padding:18px 0; font-size:17px; color:var(--paper);}
  .nav-toggle{display:flex;}
  .nav-scrim{
    position:fixed; inset:0; z-index:45; background:rgba(10,9,7,0.6);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-scrim.open{opacity:1; pointer-events:auto;}
}

.work-gallery{
  display:grid; grid-template-columns: 2fr 1fr; gap:16px; margin-top:8px;
}
.work-gallery img{
  width:auto; max-width:100%; height:auto; max-height:520px; object-fit:contain;
  border:1px solid var(--line-strong);
  background:var(--void-2);
  display:block;
  margin:0 auto;
  image-rendering:auto;
}
@media (max-width:600px){
  .work-gallery{grid-template-columns:1fr;}
}
.work-gallery.single{grid-template-columns:1fr;}
.work-gallery.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.work-gallery.three{grid-template-columns:1fr;}}
.work-gallery.multi{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.work-gallery.multi{grid-template-columns:repeat(2,1fr);}}
.work-gallery.poster-pair{grid-template-columns:1fr 1fr;}
.work-gallery.poster-pair img{max-height:340px; object-fit:contain;}
@media (max-width:600px){.work-gallery.poster-pair{grid-template-columns:1fr;}}

html{cursor:default;}
@media (hover:hover){
  #cursor-dot{
    position:fixed; top:0; left:0; z-index:300;
    width:10px; height:10px; border-radius:50%;
    background:var(--paper);
    mix-blend-mode:difference;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .2s ease, height .2s ease;
  }
  #cursor-dot.grow{ width:26px; height:26px; }
}
@media (hover:none){ #cursor-dot{ display:none; } }

/* PORTFOLIO GRID */
.category-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:48px;
}
.category-nav a{
  font-family:var(--sans); font-size:13px; color:var(--stone);
  text-decoration:none; padding:8px 16px;
  border:1px solid var(--line); border-radius:100px;
  background:var(--void-2);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
  white-space:nowrap;
}
.category-nav a:hover{ color:var(--paper); border-color:var(--gold); background:rgba(199,149,46,0.14); }
.category-nav a.active{ color:var(--void); background:var(--gold); border-color:var(--gold); }
@media (max-width:760px){
  /* The quick-jump chip bar is redundant once each category below is its
     own accordion row — the section headings themselves become the nav. */
  .category-nav{ display:none; }

  #lavori .category-label, #lavori .macro-label{
    cursor:pointer; user-select:none;
  }
  #lavori .macro-label{
    display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  }
  #lavori .macro-sub{ flex-basis:100%; display:none; }
  #lavori .macro-label[aria-expanded="true"] .macro-sub{ display:block; margin-top:10px; }
  .accordion-chevron{
    display:block; margin-left:auto; width:16px; height:16px; flex-shrink:0;
    color:var(--stone); transition:transform .3s ease;
  }
  [aria-expanded="true"] .accordion-chevron{ transform:rotate(180deg); }
  [aria-expanded="true"].category-label{ color:var(--paper); }

  /* Case study (Farmacia Manconi): Problema/Ruolo/Idea/Sviluppo/Applicazioni
     collapse individually; Risultato is untouched and stays always visible. */
  #manconi .case-facts{ display:block; margin-bottom:0; padding-bottom:0; border-bottom:none; }
  #manconi .case-fact .category-label,
  #manconi .case-section-label{ cursor:pointer; user-select:none; }
  #manconi .case-fact{
    border-bottom:1px solid var(--line); padding:14px 0;
  }
  #manconi .case-fact p:not(.category-label){
    max-height:0; overflow:hidden; opacity:0; margin:0;
    transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  #manconi .case-fact.open p:not(.category-label){
    max-height:400px; opacity:1; margin-top:10px;
  }
  /* "Sviluppo del sistema" isn't wrapped in a .case-fact (its content is a
     .timeline grid, not a plain paragraph) — match the same 14px/border rhythm
     as the other rows by putting the padding on the label and the closing
     border on the timeline that follows it. */
  #manconi .case-section-label{ padding-top:14px; margin-bottom:0; }
  #manconi .case-section-label + .timeline{
    max-height:0; overflow:hidden; margin-top:0; padding-top:0;
    padding-bottom:14px; border-bottom:1px solid var(--line-strong);
    transition:max-height .4s ease, margin-top .4s ease, padding-top .4s ease;
  }
  #manconi .case-section-label + .timeline .timeline-item{ opacity:0; transition:opacity .3s ease; }
  #manconi .case-section-label + .timeline::before{ content:none; }
  #manconi .case-section-label.open + .timeline{ max-height:3000px; margin-top:24px; padding-top:32px; }
  #manconi .case-section-label.open + .timeline .timeline-item{ opacity:1; }
  #manconi .case-section-label.open + .timeline::before{ content:""; }
  #manconi .case-applications-fact{ margin-top:0; margin-bottom:0; }
  #manconi .case-result{ margin-top:14px; }

  #lavori .portfolio-grid{
    max-height:0; overflow:hidden; opacity:0; margin-top:0;
    transition:max-height .4s ease, opacity .3s ease;
  }
  #lavori .subcat-block.open .portfolio-grid,
  #lavori .portfolio-macro.open .portfolio-grid{
    max-height:4000px; opacity:1; margin-top:16px;
  }

  /* Category peek: while a category is closed, a cropped sliver of its first two
     covers hints there's a gallery inside; it collapses away once the category opens. */
  #lavori .category-peek{
    display:flex; gap:8px; margin-top:10px;
    max-height:56px; overflow:hidden; opacity:1; position:relative; cursor:pointer;
    transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;
  }
  #lavori .category-peek img{
    width:calc(50% - 4px); height:56px; flex:0 0 auto;
    object-fit:cover; display:block;
  }
  #lavori .category-peek::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, transparent 0%, var(--void) 100%);
    pointer-events:none;
  }
  #lavori .subcat-block.open .category-peek,
  #lavori .portfolio-macro.open .category-peek{
    max-height:0; opacity:0; margin-top:0; pointer-events:none;
  }
}
.subcat-block, .portfolio-macro{ scroll-margin-top:96px; }
.portfolio-macro{margin-bottom:72px;}
.portfolio-macro:last-child{margin-bottom:0;}
.macro-label{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:1.5rem; color:var(--paper);
  margin:0 0 36px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.macro-sub{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:13px; color:var(--stone); margin-top:6px;
}
.subcat-block{margin-bottom:48px;}
.subcat-block:last-child{margin-bottom:0;}
.portfolio-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:20px;
}
.portfolio-card{
  border:1px solid var(--line); background:var(--void-2);
  cursor:pointer; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .25s ease;
}
.portfolio-card:hover{border-color:var(--line-strong);}
.card-image-wrap{position:relative; aspect-ratio:4/3; overflow:hidden; background:#000;}
.card-image-wrap img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.portfolio-card:hover .card-image-wrap img{transform:scale(1.05);}
/* Touch has no hover, so tapping a card would otherwise give zero visual feedback;
   a quick press-in stands in for the desktop hover-zoom, timed fast per touch norms. */
.portfolio-card:active .card-image-wrap img{transform:scale(.97); transition:transform .12s ease;}
/* Regia & produzione AI mixes real photography, product renders and ad-style posters;
   a shared grade keeps the grid reading as one method, not five unrelated visual languages. */
#cat-regia .card-image-wrap img{filter:grayscale(.22) contrast(1.05) brightness(.97) saturate(.92);}
.card-body{padding:16px 18px 18px;}
.card-title{font-family:var(--serif); font-size:1.15rem; line-height:1.25; font-weight:400; margin:0;}
.card-meta{font-size:12.5px; color:var(--stone); margin-top:4px;}
.card-desc{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, margin-top .35s ease;
  font-size:13.5px; color:#D6CFC3;
}
.portfolio-card.open .card-desc{max-height:900px; margin-top:12px;}
.card-desc p{margin:0 0 8px;}
.card-concept{
  font-family:var(--serif); font-style:italic; color:var(--paper);
  font-size:15px; margin:0 0 8px;
}
.card-link{
  color:var(--paper); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-strong);
}
.card-link:hover{ color:var(--gold); text-decoration-color:var(--gold); }
.card-credit{ font-size:12px; opacity:.65; margin-top:12px !important; }
.card-extra-images{
  /* Extra images stay in the DOM so the lightbox can still page through them
     via prev/next — they're just no longer shown as thumbnails under the text. */
  display:none;
}
.card-extra-images img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border:1px solid var(--line);}
.portfolio-card.text-only{background:transparent; border:none; border-bottom:1px solid var(--line);}
.portfolio-card.text-only .card-body{padding:14px 0;}
.portfolio-card.text-only .card-title{font-size:1.05rem;}
@media (max-width:600px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
}

#lightbox{
  position:fixed; inset:0; z-index:400;
  background:rgba(8,7,6,0.96);
  display:none; align-items:center; justify-content:center;
}
#lightbox.active{display:flex;}
#lightbox-img, #lightbox-video{
  max-width:88vw; max-height:86vh; object-fit:contain;
  border:1px solid var(--line-strong);
}
#lightbox-video{ display:none; background:#000; }
#lightbox-youtube{
  display:none; width:min(88vw, 86vh * 16 / 9); aspect-ratio:16/9;
  border:1px solid var(--line-strong);
}
/* Layered settle: the image/video/embed arrives first; the caption follows a beat
   later so opening a piece reads as a small composed moment, not a popup. */
#lightbox-img, #lightbox-video, #lightbox-youtube{
  opacity:0; transform:scale(.96) translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
#lightbox-img.is-visible, #lightbox-video.is-visible, #lightbox-youtube.is-visible{
  opacity:1; transform:scale(1) translateY(0);
}
#lightbox-close{
  position:absolute; top:20px; right:28px;
  background:none; border:none; color:var(--paper);
  font-size:36px; line-height:1; cursor:pointer; font-family:var(--sans);
}
#lightbox-prev, #lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--paper);
  font-size:52px; line-height:1; cursor:pointer; padding:12px 18px;
  font-family:var(--sans);
}
#lightbox-prev{left:8px;}
#lightbox-next{right:8px;}
#lightbox-prev:hover, #lightbox-next:hover, #lightbox-close:hover{color:var(--gold);}
#lightbox-caption{
  position:absolute; bottom:24px; left:50%; transform:translate(-50%, 8px);
  text-align:center; opacity:0;
  transition:opacity .4s ease, transform .4s ease;
}
#lightbox-caption.is-visible{ opacity:1; transform:translate(-50%, 0); }
#lightbox-title{
  font-family:var(--serif); font-style:italic; color:var(--paper);
  font-size:1rem; margin-bottom:4px;
}
#lightbox-counter{
  font-size:13px; color:var(--stone); letter-spacing:0.04em;
}
.card-image-wrap img, .card-extra-images img, .work-gallery img{cursor:zoom-in;}
@media (max-width:600px){
  #lightbox-prev, #lightbox-next{font-size:36px; padding:8px 10px;}
}