/*
Theme Name: Marco Petracci — Wedding Photography
Theme URI: https://marcopetracci.it
Author: Marco Petracci
Author URI: https://marcopetracci.it
Description: Tema WordPress custom per il sito di Marco Petracci, fotografo di matrimoni in Toscana. Design editoriale minimal, portfolio a griglia narrativa con lightbox, pagina video dedicata, form contatti con FAQ, bio bilingue IT/EN con rilevamento automatico della lingua via IP. v2: foto locali ottimizzate, nessuna dipendenza da /wp-content/uploads/.
Version: 2.0
License: Proprietario — uso esclusivo di Marco Petracci
Text Domain: marco-petracci
*/

  :root{
    --ink:#1A1613;
    --paper:#F8F4EB;
    --paper-dim:#EFE7D8;
    --wine:#5C1220;
    --wine-dark:#3E0B15;
    --gold:#C6A669;
    --gold-soft:#E4D3A6;
    --muted:#8F8579;
    --line:#E3D9C7;
    --serif:'Fraunces', serif;
    --sans:'Montserrat', sans-serif;

    /* scala di spaziatura fluida — stessa proporzione su ogni breakpoint */
    --s1: clamp(6px, 0.6vw, 8px);
    --s2: clamp(12px, 1.4vw, 18px);
    --s3: clamp(20px, 2.4vw, 32px);
    --s4: clamp(32px, 4vw, 48px);
    --s5: clamp(48px, 6vw, 80px);
    --s6: clamp(64px, 9vw, 120px);
    --gap: 3px;
    --container: 1240px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }
  a{color:inherit; text-decoration:none;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--wine); outline-offset:3px;}
  img{display:block; width:100%; height:100%; object-fit:cover;}

  .container{ max-width:var(--container); margin:0 auto; padding:0 var(--s4); }

  .eyebrow{
    display:block;
    font-family:var(--sans);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--wine);
  }

  .btn{
    display:inline-block;
    font-family:var(--sans);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:#fff;
    background:var(--ink);
    padding:16px 32px;
    border:1px solid var(--ink);
    cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }
  .btn:hover{ background:#fff; color:var(--ink); }
  .btn-outline{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,0.7);
  }
  .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.16,.8,.4,1), transform .9s cubic-bezier(.16,.8,.4,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    gap:52px;
    padding:20px 40px;
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  .nav.solid{
    background:rgba(248,244,235,0.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(198,166,105,0.35);
    padding:14px 40px;
  }
  .nav-links{ display:flex; gap:34px; }
  .nav-links a{
    font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    position:relative; padding-bottom:4px;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--gold); transition:right .25s ease;
  }
  .nav-links a:hover::after{ right:0; }
  .nav-name{
    display:flex; align-items:center;
    height:24px;
  }
  .nav-name img{ height:24px; width:auto; display:block; }
  .nav-name .logo-dark{ display:none; }
  .nav.solid .nav-name .logo-white{ display:none; }
  .nav.solid .nav-name .logo-dark{ display:block; }
  .nav.on-dark .nav-links a{ color:#fff; }
  .nav.solid .nav-links a{ color:var(--ink); }
  .lang-switch{ display:flex; align-items:center; gap:6px; }
  .lang-switch button{
    background:none; border:none; cursor:pointer; font-family:var(--sans);
    font-size:10px; font-weight:600; letter-spacing:0.1em; color:inherit;
    opacity:.5; padding:0;
  }
  .lang-switch button.active{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
  .lang-sep{ font-size:10px; opacity:.35; }
  @media (max-width:760px){ .nav-links{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{ position:relative; height:100svh; min-height:580px; overflow:hidden; background:var(--ink); }
  .hero > img{ animation:kenburns 12s ease-out forwards; transform-origin:center; }
  @keyframes kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
  .hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.06) 34%, rgba(0,0,0,0.58) 100%);
  }
  .hero-box{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:2; text-align:center; color:#fff;
    animation:heroReveal 1.2s cubic-bezier(.16,.8,.4,1) both; animation-delay:.1s;
  }
  @keyframes heroReveal{ from{ opacity:0; transform:translate(-50%,-44%);} to{ opacity:1; transform:translate(-50%,-50%);} }
  .hero-box .name-logo{
    width:clamp(220px, 34vw, 420px);
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 1px 12px rgba(0,0,0,0.25));
  }
  .hero-box .sub{
    margin-top:var(--s2);
    font-size:11px; font-weight:500; letter-spacing:0.34em; text-transform:uppercase;
    color:var(--gold-soft);
  }
  .hero-box .rule{ width:30px; height:1px; background:var(--gold-soft); margin:var(--s2) auto 0; opacity:.85; }
  .scroll-cue{
    position:absolute; left:50%; bottom:var(--s3); transform:translateX(-50%);
    z-index:2; width:1px; height:44px; background:rgba(255,255,255,0.35); overflow:hidden;
  }
  .scroll-cue::after{
    content:""; position:absolute; top:-44px; left:0; width:1px; height:44px; background:var(--gold-soft);
    animation:cue 2.4s ease-in-out infinite;
  }
  @keyframes cue{ 0%{ top:-44px; } 60%,100%{ top:44px; } }

  /* ---------- PHILOSOPHY ---------- */
  .philosophy{
    max-width:var(--container); margin:0 auto;
    padding:var(--s6) var(--s4);
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  .philosophy-image{ aspect-ratio:4/5; overflow:hidden; }
  .philosophy--text{ grid-template-columns:1fr; max-width:840px; text-align:center; }
  .philosophy--text .philosophy-text{ padding-left:0; }
  .philosophy--text h2, .philosophy--text p{ margin-left:auto; margin-right:auto; }
  .philosophy-text{
    display:flex; flex-direction:column; justify-content:center;
    padding-left:var(--s5);
  }
  .philosophy-text h2{
    margin-top:var(--s2);
    font-family:var(--serif); font-weight:500;
    font-size:clamp(26px, 3.2vw, 38px);
    line-height:1.25;
    max-width:14ch;
  }
  .philosophy-text p{
    margin-top:var(--s3);
    font-size:14.5px; line-height:1.9; font-weight:300; color:#3a3733;
    max-width:46ch;
  }
  .philosophy-text .btn{ margin-top:var(--s4); align-self:center; }
  @media (max-width:860px){
    .philosophy{ grid-template-columns:1fr; gap:var(--s4); }
    .philosophy-text{ padding-left:0; }
    .philosophy-image{ aspect-ratio:16/10; }
  }

  /* ---------- DIVIDER ---------- */
  .divider{ max-width:var(--container); margin:0 auto; padding:0 var(--s4); display:flex; align-items:center; gap:14px; }
  .divider .line{ flex:1; height:1px; background:var(--line); }
  .divider .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); }

  /* ---------- WORKS ---------- */
  .works{ padding:var(--s6) 0; text-align:center; }
  .works-head{ margin-bottom:var(--s4); }
  .works-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--gap);
  }
  .tile{ position:relative; overflow:hidden; background:var(--paper-dim); cursor:pointer; }
  .tile.sq{ aspect-ratio:1/1; }
  .tile.wide{ grid-column:1 / -1; aspect-ratio:21/8; }
  .tile img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .tile:hover img{ transform:scale(1.045); }

  /* ---------- FILM ---------- */
  .film{ padding:0 0 var(--s6); text-align:center; }
  .film-head{ margin-bottom:var(--s4); }
  .film-frame{
    max-width:900px; margin:0 auto;
    aspect-ratio:16/9; overflow:hidden;
    background:var(--ink);
  }
  .film-frame iframe{ width:100%; height:100%; border:0; display:block; }

  /* ---------- CHI SONO (bio) ---------- */
  .about{
    max-width:700px; margin:0 auto;
    padding:var(--s6) var(--s4);
  }
  .about .eyebrow{ text-align:center; }
  .about p{
    margin-top:var(--s3);
    font-size:15px; line-height:2; font-weight:300; color:#3a3733;
  }
  .about .btn{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }
  .about p.emph{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:19px; line-height:1.8; color:var(--wine-dark);
    padding:var(--s2) 0; margin-top:var(--s4); margin-bottom:var(--s1);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }

  /* ---------- STATEMENT ---------- */
  .statement{
    background:var(--ink); color:var(--paper);
    padding:var(--s6) var(--s4); text-align:center;
  }
  .statement .eyebrow{ color:var(--gold); }
  .statement p{
    max-width:680px; margin:var(--s3) auto 0;
    font-family:var(--serif); font-style:italic;
    font-size:clamp(24px, 3.4vw, 36px); line-height:1.5;
  }

  /* ---------- CTA BAND ---------- */
  .cta-band{ position:relative; height:clamp(420px, 46vw, 620px); overflow:hidden; }
  .cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .cta-band::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.62) 100%);
  }
  .cta-inner{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    text-align:center; gap:var(--s3);
    padding:var(--s5) var(--s4);
  }
  .cta-inner p{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(22px, 3.2vw, 34px); color:#fff; max-width:620px; line-height:1.45;
  }

  /* ---------- FOOTER CONTACT ---------- */
  .footer-contact{
    text-align:center;
    padding:var(--s6) var(--s4) var(--s5);
    border-top:1px solid var(--line);
  }
  .footer-contact .mail{
    display:inline-block;
    margin-top:var(--s3);
    font-family:var(--serif); font-weight:500;
    font-size:clamp(24px, 3.6vw, 40px);
    letter-spacing:0.01em;
    color:var(--ink);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, color .25s ease;
  }
  .footer-contact .mail:hover{ color:var(--wine); border-color:var(--gold); }

  footer{
    padding:var(--s3) var(--s4);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    border-top:1px solid var(--line);
  }
  footer .copy{ font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:10px; }
  footer .footer-mark{ height:16px; width:auto; opacity:.75; }
  footer nav{ display:flex; gap:22px; flex-wrap:wrap; }
  footer nav a{ font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
  footer nav a:hover{ color:var(--wine); }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:1000; background:rgba(15,12,10,0.96);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .lightbox.open{ opacity:1; visibility:visible; }
  .lightbox img{ max-width:min(88vw, 1200px); max-height:82vh; width:auto; height:auto; object-fit:contain; }
  .lb-close, .lb-prev, .lb-next{
    position:absolute; background:none; border:1px solid rgba(228,211,166,0.4); color:var(--gold-soft);
    cursor:pointer; font-family:var(--sans); font-size:13px; letter-spacing:0.1em;
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, color .2s ease;
  }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover{ border-color:var(--gold-soft); color:#fff; }
  .lb-close{ top:var(--s3); right:var(--s3); }
  .lb-prev{ left:var(--s3); top:50%; transform:translateY(-50%); }
  .lb-next{ right:var(--s3); top:50%; transform:translateY(-50%); }
  @media (max-width:640px){ .lb-prev,.lb-next{ width:36px; height:36px;} }

  /* =========================================================
     v1.3 — sito multi-pagina: barra header + menu a schermo
     intero + pagine interne (Chi sono / Portfolio / Contatti /
     Domande frequenti / Per i planner). Riusa le variabili colore
     e le classi .nav/.eyebrow/.btn/.container già esistenti sopra.
     ========================================================= */

  /* ---------- LOGO NELLA BARRA (ora dentro un link) ---------- */
  .nav-name a{ display:flex; align-items:center; height:24px; }

  /* ---------- PULSANTE MENU (hamburger) ---------- */
  .menu-toggle{
    background:none; border:none; cursor:pointer; padding:6px;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:30px;
  }
  .menu-toggle span{ display:block; height:1.5px; width:100%; background:currentColor; transition:opacity .2s ease; }
  .nav.on-dark .menu-toggle{ color:#fff; }
  .nav.solid .menu-toggle{ color:var(--ink); }
  body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }

  /* ---------- MENU A SCHERMO INTERO ---------- */
  .site-menu{
    position:fixed; inset:0; z-index:300;
    background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .site-menu.open{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .4s ease, transform .4s ease, visibility 0s linear 0s;
  }
  .site-menu-inner{ text-align:center; padding:var(--s4); }
  .site-menu .menu-list{ list-style:none; margin:0; padding:0; }
  .site-menu .menu-list li{ margin:0; }
  .site-menu .menu-list a{
    display:inline-block;
    font-family:var(--serif); font-weight:500;
    font-size:clamp(30px, 6vw, 60px);
    line-height:1.5;
    color:var(--ink);
    transition:color .2s ease;
  }
  .site-menu .menu-list a:hover,
  .site-menu .current-menu-item a{ color:var(--wine); }
  .menu-close{
    position:absolute; top:var(--s3); right:var(--s4);
    background:none; border:none; cursor:pointer;
    font-size:20px; color:var(--ink);
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
  }
  .site-menu-contact{ margin-top:var(--s5); }
  .site-menu-contact .lang-switch button{ font-size:11px; }
  .site-menu-mail{
    display:block; margin-top:var(--s3);
    font-family:var(--sans); font-size:12px; font-weight:600;
    letter-spacing:0.08em; color:var(--muted);
    border-bottom:1px solid transparent;
  }
  .site-menu-mail:hover{ color:var(--wine); border-color:var(--gold); }

  /* ---------- INTESTAZIONE DI PAGINA (pagine interne) ---------- */
  .page-hero{
    padding:clamp(120px, 18vw, 200px) var(--s4) var(--s5);
    max-width:var(--container); margin:0 auto;
    text-align:center;
  }
  .page-hero .eyebrow{ justify-content:center; }
  .page-hero h1{
    margin-top:var(--s2);
    font-family:var(--serif); font-weight:500;
    font-size:clamp(38px, 6.4vw, 76px);
    line-height:1.08;
  }
  .page-hero .rule{ width:40px; height:1px; background:var(--gold); margin:var(--s3) auto 0; }

  /* ---------- CONTENUTO PAGINA GENERICO (es. FAQ) ---------- */
  .page-content{ padding:0 0 var(--s6); }
  .page-content-inner{ max-width:760px; }
  .page-body{
    font-family:var(--sans); font-weight:300;
    font-size:15px; line-height:1.9; color:#3a3733;
  }
  .page-body h1, .page-body h2, .page-body h3, .page-body h4{
    font-family:var(--serif); font-weight:500; color:var(--wine-dark);
    line-height:1.35;
    margin:var(--s4) 0 var(--s2);
  }
  .page-body h3{ font-size:clamp(19px, 2vw, 23px); }
  .page-body p{ margin-bottom:var(--s3); }
  .page-body ul, .page-body ol{ margin:0 0 var(--s3); padding-left:1.3em; }
  .page-body li{ margin-bottom:0.5em; }
  .page-body strong{ color:var(--ink); font-weight:600; }

  /* ---------- Bottone outline scuro (per link secondari su fondo chiaro) ---------- */
  .btn-outline-dark{
    display:inline-block;
    font-family:var(--sans); font-size:10.5px; font-weight:600;
    letter-spacing:0.16em; text-transform:uppercase;
    color:var(--ink); background:transparent;
    border:1px solid var(--line);
    padding:15px 30px;
    transition:background .25s ease, border-color .25s ease, color .25s ease;
  }
  .btn-outline-dark:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

  @media (max-width:640px){
    .site-menu .menu-list a{ font-size:clamp(26px, 8vw, 40px); line-height:1.4; }
  }


  /* =========================================================
     v2.0 — restyling 2026: didascalie tile, teaser video, metodo,
     bio a due colonne con firma, hero fotografici di pagina,
     form contatti + FAQ accordion. Foto tutte locali.
     ========================================================= */

  /* ---------- Didascalie tile (rollover) ---------- */
  .tile .cap{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px;
    font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
    opacity:0; transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  .tile .cap::after{ content:""; width:26px; height:1px; background:var(--gold-soft); flex:none; }
  .tile:hover .cap, .tile:focus-within .cap{ opacity:1; transform:translateY(0); }
  .works-note{
    margin-top:var(--s4); padding:0 var(--s4);
    font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted);
  }

  /* ---------- Teaser video (home → /video/) ---------- */
  .film-teaser{
    max-width:var(--container); margin:0 auto;
    padding:0 var(--s4) var(--s6);
    display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s4); align-items:center;
  }
  .film-teaser > a{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
  .film-teaser > a img{ transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .film-teaser > a:hover img{ transform:scale(1.045); }
  .film-teaser .play{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.18); transition:background .3s ease;
  }
  .film-teaser > a:hover .play{ background:rgba(0,0,0,0.32); }
  .film-teaser .play span{
    width:64px; height:64px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.75); color:#fff;
    display:flex; align-items:center; justify-content:center; padding-left:5px;
    font-size:16px;
  }
  .film-teaser-text h2{
    margin-top:var(--s2);
    font-family:var(--serif); font-weight:500;
    font-size:clamp(24px, 2.8vw, 34px); line-height:1.3;
  }
  .film-teaser-text .btn{ margin-top:var(--s3); }
  @media (max-width:860px){
    .film-teaser{ grid-template-columns:1fr; }
  }

  /* ---------- Metodo (3 passi) ---------- */
  .method{ max-width:var(--container); margin:0 auto; padding:0 var(--s4) var(--s6); }
  .method h2{
    margin-top:var(--s2);
    font-family:var(--serif); font-weight:500;
    font-size:clamp(26px, 3.2vw, 38px); line-height:1.25;
  }
  .method-intro{ margin-top:var(--s2); font-size:14.5px; line-height:1.9; color:#3a3733; max-width:46ch; }
  .method-steps{
    margin-top:var(--s4);
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4);
  }
  .method-steps article{ border-top:1px solid var(--line); padding-top:var(--s2); transition:border-color .4s ease; }
  .method-steps article:hover{ border-color:var(--gold); }
  .method-steps .num{
    font-family:var(--serif); font-style:italic; font-size:44px; line-height:1; color:var(--line);
    transition:color .4s ease;
  }
  .method-steps article:hover .num{ color:var(--gold); }
  .method-steps h3{ margin-top:var(--s2); font-family:var(--serif); font-weight:500; font-size:19px; }
  .method-steps p{ margin-top:var(--s1); font-size:13.5px; line-height:1.85; color:#3a3733; }
  @media (max-width:860px){ .method-steps{ grid-template-columns:1fr; gap:var(--s3); } }

  /* ---------- Chi sono v2: colonna unica di testo (senza ritratto) ---------- */
  .page-hero-sub{
    margin:var(--s2) auto 0; max-width:560px;
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(18px, 2.2vw, 24px); line-height:1.5; color:var(--wine-dark);
  }
  .about-grid{
    max-width:var(--container); margin:0 auto;
    padding:0 var(--s4) var(--s6);
    display:grid; grid-template-columns:5fr 7fr; gap:var(--s5);
    align-items:start;
  }
  .about-grid--text{ grid-template-columns:1fr; max-width:840px; }
  .about-figure img:first-child{ aspect-ratio:4/5; }
  .about-figure figcaption{
    margin-top:var(--s1);
    font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted);
  }
  .firma{ width:200px; height:auto; margin-top:var(--s3); opacity:0.9; }
  .about-bio p{
    font-size:14.5px; line-height:2; font-weight:300; color:#3a3733;
  }
  .about-bio p + p{ margin-top:var(--s3); }
  .about-bio p.first{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(17px, 1.8vw, 20px); line-height:1.8; color:var(--ink);
  }
  .about-bio p.emph{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:19px; line-height:1.8; color:var(--wine-dark);
    padding:var(--s2) 0; margin-top:var(--s4);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  @media (max-width:860px){
    .about-grid{ grid-template-columns:1fr; gap:var(--s4); }
    .about-figure{ max-width:420px; }
  }

  /* ---------- Hero di pagina con immagine (portfolio / video) ---------- */
  .page-hero--img{
    position:relative; min-height:56vh; overflow:hidden;
    display:flex; align-items:flex-end; text-align:left;
    padding:0; max-width:none;
    background:var(--ink);
  }
  .page-hero--img > img{ position:absolute; inset:0; }
  .page-hero--img::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.68) 100%);
  }
  .page-hero--img .ph-inner{
    position:relative; z-index:2;
    width:100%; max-width:var(--container); margin:0 auto;
    padding:var(--s6) var(--s4) var(--s4);
  }
  .page-hero--img .eyebrow{ color:var(--gold-soft); }
  .page-hero--img h1{ color:#fff; }
  .page-hero--img .ph-intro{
    margin-top:var(--s2); max-width:520px;
    font-size:14px; line-height:1.9; color:rgba(255,255,255,0.85);
  }

  /* ---------- Contatti: form + FAQ ---------- */
  .contact-layout{
    max-width:var(--container); margin:0 auto;
    padding:0 var(--s4) var(--s6);
    display:grid; grid-template-columns:1fr 1fr; gap:var(--s5);
    align-items:start;
  }
  .contact-form label{
    display:block; margin:var(--s2) 0 var(--s1);
    font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);
  }
  .contact-form input, .contact-form textarea{
    width:100%; border:1px solid var(--line); background:#fff;
    padding:12px 14px; font-family:var(--sans); font-size:14px; font-weight:300; color:var(--ink);
    transition:border-color .2s ease;
  }
  .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--gold); }
  .contact-form textarea{ resize:vertical; }
  .form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
  .contact-form .btn{ margin-top:var(--s3); }
  .form-note{ margin-top:var(--s2); font-size:12px; line-height:1.7; color:var(--muted); }
  .direct-mail{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(20px, 2.4vw, 28px); color:var(--ink);
    border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .direct-mail:hover{ color:var(--wine); border-color:var(--gold); }

  .faq-list{ margin-top:var(--s2); }
  .faq-list details{ border-bottom:1px solid var(--line); }
  .faq-list summary{
    cursor:pointer; list-style:none;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:var(--s2) 0;
    font-size:14px; font-weight:500; color:var(--ink);
    transition:color .2s ease;
  }
  .faq-list summary::-webkit-details-marker{ display:none; }
  .faq-list summary::after{
    content:"+"; flex:none;
    font-family:var(--serif); font-size:20px; line-height:1; color:var(--gold);
    transition:transform .25s ease;
  }
  .faq-list details[open] summary::after{ transform:rotate(45deg); }
  .faq-list details[open] summary{ color:var(--wine); }
  .faq-list details p{
    padding:0 0 var(--s2); max-width:60ch;
    font-size:13.5px; line-height:1.85; font-weight:300; color:#3a3733;
  }
  @media (max-width:860px){
    .contact-layout{ grid-template-columns:1fr; gap:var(--s4); }
    .form-grid-2{ grid-template-columns:1fr; gap:0; }
  }

  /* ---------- Pagina video: formati + approccio ---------- */
  .video-formats{ max-width:var(--container); margin:0 auto; padding:0 var(--s4) var(--s6); }
  .formats-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .formats-grid article{ background:var(--paper); padding:var(--s4); }
  .formats-grid h2{
    margin-top:var(--s1);
    font-family:var(--serif); font-weight:500; font-size:clamp(22px, 2.4vw, 30px);
  }
  .formats-grid p{ margin-top:var(--s1); font-size:13.5px; line-height:1.85; color:#3a3733; }
  .approach{ margin-top:var(--s5); display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s4); }
  .approach h2{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(24px, 2.8vw, 34px); line-height:1.3;
  }
  .approach ul{ list-style:none; }
  .approach li{ display:flex; gap:var(--s2); padding:var(--s2) 0; border-top:1px solid var(--line); }
  .approach li:last-child{ border-bottom:1px solid var(--line); }
  .approach li span{
    font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.4; color:var(--gold);
  }
  .approach li p{ font-size:14px; line-height:1.85; color:#3a3733; }
  @media (max-width:860px){
    .formats-grid{ grid-template-columns:1fr; }
    .approach{ grid-template-columns:1fr; gap:var(--s2); }
  }

  /* ---------- CTA scura con sottotitolo (pagina video) ---------- */
  .statement .statement-sub{
    margin:var(--s2) auto 0; max-width:520px;
    font-family:var(--sans); font-style:normal; font-weight:300;
    font-size:14px; line-height:1.9; color:rgba(248,244,235,0.72);
  }
  .statement .btn-outline{ margin-top:var(--s3); display:inline-block; }

  /* ---------- Pagina planner (v2) ---------- */
  .formats-grid article h3{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(19px, 2vw, 24px); margin-top:var(--s1);
  }
  .planner-grid{
    max-width:var(--container); margin:0 auto; padding:0 var(--s4) var(--s5);
    display:grid; grid-template-columns:7fr 5fr; gap:var(--s5); align-items:center;
  }
  .planner-text p{ font-size:14.5px; line-height:2; color:#3a3733; }
  .planner-text p + p{ margin-top:var(--s3); }
  .planner-figure img{ aspect-ratio:4/5; }
  .planner-section-title{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(22px, 2.6vw, 30px); margin-bottom:var(--s3);
  }
  .planner-note{
    margin-top:var(--s3); font-size:12.5px; font-style:italic; color:var(--muted);
  }
  @media (max-width:860px){
    .planner-grid{ grid-template-columns:1fr; }
    .planner-figure{ max-width:420px; }
  }

  /* ---------- Pagina collaborazioni (v2) ---------- */
  .formats-grid--3{ grid-template-columns:repeat(3, 1fr); }
  .collab-section{ max-width:var(--container); margin:0 auto; padding:0 var(--s4) var(--s5); }
  .collab-narrow{ max-width:760px; }
  .collab-title{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(24px, 2.8vw, 34px); line-height:1.25; margin-bottom:var(--s3);
  }
  .collab-section p{ font-size:14.5px; line-height:2; color:#3a3733; }
  .collab-section p + p{ margin-top:var(--s3); }
  .collab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
  .collab-grid img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
  .collab-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s3) 0; }
  .collab-section .film-frame{ margin:var(--s3) 0; }
  .at-a-glance{ width:100%; border-collapse:collapse; margin-top:var(--s2); }
  .at-a-glance td{
    padding:var(--s2) 0; border-top:1px solid var(--line);
    font-size:14px; line-height:1.7; color:#3a3733; vertical-align:top;
  }
  .at-a-glance tr:last-child td{ border-bottom:1px solid var(--line); }
  .at-a-glance td:first-child{
    width:32%; padding-right:var(--s3); padding-top:calc(var(--s2) + 2px);
    font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted);
  }
  @media (max-width:860px){
    .formats-grid--3{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .collab-grid{ gap:var(--s1); }
    .at-a-glance td:first-child{ width:40%; }
  }