html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:hidden;background-color:oklch(0.965 0.008 85);background-image:url('assets/grain-soft.webp');color:oklch(0.22 0.01 60);font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
a[href^="tel:"],a[href^="mailto:"],.selectable,input,textarea,select{-webkit-user-select:text;user-select:text}
a{color:oklch(0.42 0.1 25);text-decoration:none}
a:hover{color:oklch(0.32 0.09 25)}
img{max-width:100%}
input,textarea,button,select{font-family:inherit;max-width:100%;box-sizing:border-box}
::selection{background:oklch(0.42 0.1 25);color:oklch(0.97 0.008 85)}

/* Hover states */
.nav-link:hover{color:oklch(0.42 0.1 25) !important}
.phone-btn:hover{background:oklch(0.22 0.01 60);color:oklch(0.965 0.008 85) !important}
.cta-primary:hover{background:oklch(0.42 0.1 25) !important;color:oklch(0.965 0.008 85) !important}
.area-btn{transition:color 0.15s}
.area-btn:hover{color:oklch(0.42 0.1 25) !important}
.submit-btn:hover{background:oklch(0.78 0.07 40) !important}
input:focus,textarea:focus{border-bottom-color:oklch(0.78 0.07 40) !important}
select option{background:#fff;color:#222}
select option:hover,select option:checked{background:#f0ede6;color:#222}

/* Image slots */
.img-frame{position:relative;overflow:hidden}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* Mobile menu */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:oklch(0.22 0.01 60)}
.menu-toggle svg{display:block}

@media(max-width:982px){
  .menu-toggle{display:block}
  .header-inner{flex-wrap:nowrap !important}
  .header-nav{
    display:none !important;position:absolute;top:100%;left:0;right:0;
    flex-direction:column !important;background:oklch(0.965 0.008 85 / 0.97);
    backdrop-filter:blur(8px);border-bottom:1px solid oklch(0.86 0.01 80);
    padding:16px clamp(20px,4vw,48px) 24px;gap:20px !important;
    font-size:14px !important;letter-spacing:0.12em !important
  }
  .header-nav.open{display:flex !important}
  .header-phone{padding:8px 14px !important;font-size:12px !important}
  .hero-grid{grid-template-columns:1fr !important}
  .hero-portrait{max-width:400px !important;min-height:clamp(400px,75vw,540px) !important;margin-bottom:-32px !important;justify-self:center !important}
  .hero-text h1{font-size:clamp(42px,10vw,64px) !important}
  .areas-grid{grid-template-columns:1fr !important}
  .area-detail{position:static !important;min-height:auto !important}
  .avvocato-grid{grid-template-columns:1fr !important}
  .avvocato-photo{max-width:480px}
  .contatti-grid{grid-template-columns:1fr !important;overflow:hidden}
  .sede-grid{grid-template-columns:1fr 1fr !important}
  .contact-info-grid{grid-template-columns:1fr 1fr !important}
}

@media(max-width:480px){
  .hero-portrait{min-height:clamp(340px,85vw,420px) !important;max-width:100% !important}
  .hero-text h1{font-size:clamp(36px,11vw,52px) !important}
  .hero-ctas{flex-direction:column !important}
  .hero-ctas a{text-align:center}
  .sede-grid{grid-template-columns:1fr !important}
  .contact-info-grid{grid-template-columns:1fr !important}
  .collab-grid{grid-template-columns:1fr !important}
}