/* =====================================================
   Eserci
   CSS unificato (tutti i moduli in un unico file)
   ===================================================== */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0a0a0a; color: var(--inchiostro); font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; }

/* ── VARIABLES ── */
:root {
  --bianco:  #F7F6F3;
  --inchiostro: #1A1A18;
  --ambra:   #C8873A;
  --ardesia: #8A9BAE;
  --medio:   #DEDBD4;
  --serif:   'DM Serif Display', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
}

/* ── LAYOUT ── */
.ms-section { padding: 7rem 5vw; }
.ms-section-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ardesia); margin-bottom: 3rem; display: flex; align-items: center; gap: 1rem; }
.ms-section-label::after { content: ''; flex: 1; height: 1px; background: var(--medio); }
.ms-btn-primary { background: var(--ambra); color: #fff; text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; padding: 1rem 2.4rem; border-radius: 2px; transition: background 0.2s, transform 0.15s; }
.ms-btn-primary:hover { background: #fff; color: var(--ambra); transform: translateY(-2px); }

/* ── NAVBAR ── */
.ms-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 5vw; background: #4a4949; backdrop-filter: blur(12px); border-bottom: 1px solid var(--medio); transition: box-shadow 0.3s; opacity: 90%;}
.ms-nav.scrolled { box-shadow: 0 4px 24px rgba(26,26,24,0.08); }
.ms-nav-logo { font-family: var(--serif); font-size: 1.1rem; text-decoration: none; color: var(--inchiostro); }
.ms-nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.ms-nav-links a { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #fff; opacity: 0.6; transition: opacity 0.2s; }
.ms-nav-links a:hover { opacity: 1; }
.ms-nav-cta { background: var(--ambra) !important; color: var(--bianco) !important; opacity: 1 !important; padding: 0.55rem 1.3rem; border-radius: 2px; transition: background 0.2s !important; }
.ms-nav-cta:hover { background: var(--inchiostro) !important; }
.ms-nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; z-index: 300; }
.ms-nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--inchiostro); border-radius: 2px; transition: transform 0.3s, opacity 0.3s;background-color: #fff; }
.ms-nav-hamburger.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ms-nav-hamburger.aperto span:nth-child(2) { opacity: 0; }
.ms-nav-hamburger.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ms-mobile-menu { display: none; position: fixed; inset: 0; z-index: 150; background: var(--bianco); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; padding: 2rem; }
.ms-mobile-menu.aperto { display: flex; }
.ms-mobile-menu a { font-family: var(--serif); font-size: 2rem; font-style: italic; text-decoration: none; color: var(--inchiostro); transition: color 0.2s; }
.ms-mobile-menu a:hover { color: var(--ambra); }
.ms-mobile-menu .ms-nav-cta { font-family: var(--sans); font-size: 0.9rem; font-style: normal; background: var(--ambra) !important; color: #fff !important; padding: 0.85rem 2.5rem; border-radius: 2px; }
/* Stato base della navbar */
.ms-nav {position: fixed;top: 0;left: 0;right: 0;z-index: 100;transition: transform 0.4s ease, background 0.3s ease;}
/* Quando scrolli verso il basso — navbar nascosta */.ms-nav-hidden {transform: translateY(-100%);}
/* Quando scrolli verso l'alto — navbar visibile */.ms-nav-visible {transform: translateY(0);}
/* Stile quando hai scrollato (opzionale, per sfondo diverso) */.ms-nav.scrolled {background: rgba(10, 10, 10, 0.95);backdrop-filter: blur(10px);}
div.ms-work-title a{color:#fff;}

/* ── HERO ── */
.ms-hero { min-height: 100vh; position: relative; display: flex; align-items: center; padding: 9rem 5vw 5rem; overflow: hidden; }
.ms-hero-bg { position: absolute; inset: 0; z-index: 0; background: url('https://www.eserci.it/img/immagine_hero.webp') center/cover no-repeat; }
.ms-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(26,26,24,0.82) 0%, rgba(26,26,24,0.55) 60%, rgba(26,26,24,0.2) 100%); }
.ms-hero-content { position: relative; z-index: 2; max-width: 700px; }
.ms-hero-eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ambra); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
.ms-hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--ambra); }
.ms-hero-h1 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.2rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.8rem; }
.ms-hero-h1 em { font-style: italic; color: var(--ambra); position: relative; display: inline-block; }
.ms-hero-h1 em::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: var(--ambra); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: drawLine 0.9s cubic-bezier(0.4,0,0.2,1) 0.8s forwards; }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ms-hero-body { font-size: 1.05rem; line-height: 1.72; color: rgba(255,255,255,0.75); max-width: 44ch; margin-bottom: 2.5rem; }
.ms-hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ms-btn-ghost { font-size: 0.88rem; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.ms-btn-ghost:hover { color: #fff; }
.ms-hero-badge { position: absolute; bottom: 3rem; right: 5vw; z-index: 2; background: rgba(200,135,58,0.95); color: #fff; padding: 1rem 1.5rem; border-radius: 3px; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--serif); }
.ms-hero-badge-num { font-size: 2.4rem; line-height: 1; }
.ms-hero-badge-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; margin-top: 0.2rem; }
.ms-scroll-hint { position: absolute; bottom: 2.5rem; left: 5vw; z-index: 2; display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.ms-scroll-hint::after { content: '↓'; font-size: 1rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── TICKER ── */
.ms-ticker { overflow: hidden; border-top: 1px solid var(--medio); border-bottom: 1px solid var(--medio); padding: 1rem 0; background: var(--bianco); }
.ms-ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: ticker 24s linear infinite; }
.ms-ticker-item { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ardesia); display: flex; align-items: center; gap: 0.8rem; }
.ms-ticker-dot { width: 5px; height: 5px; background: var(--ambra); border-radius: 50%; flex-shrink: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── NUMERI ── */
.ms-numeri { padding: 5rem 5vw; background: var(--bianco); }
.ms-numeri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--medio); border: 2px solid var(--medio); }
.ms-numero-box { background: var(--bianco); padding: 2.5rem 2rem; text-align: center; }
.ms-numero-val { font-family: var(--serif); font-size: 3.2rem; color: var(--inchiostro); line-height: 1; margin-bottom: 0.5rem; }
.ms-numero-val span { color: var(--ambra); font-style: italic;font-size: 25px !important; }
.ms-numero-label { font-size: 0.82rem; color: var(--ardesia); font-weight: 500; letter-spacing: 0.04em; }

/* ── WORK ── */
.ms-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ms-work-item { cursor: pointer; position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; transition: transform 0.35s; background: #111; }
.ms-work-item:hover { transform: translateY(-6px); }
.ms-work-item:nth-child(2) { margin-top: 2.5rem; }
.ms-work-item:nth-child(5) { margin-top: -2rem; }
.ms-work-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.3s; filter: brightness(0.75); }
.ms-work-item:hover .ms-work-img { transform: scale(1.06); filter: brightness(0.4); }
.ms-work-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; opacity: 0; transition: opacity 0.3s; }
.ms-work-item:hover .ms-work-overlay { opacity: 1; }
.ms-work-title { font-family: var(--serif); font-size: 1.15rem; color: #fff; margin-bottom: 0.3rem; }
.ms-work-meta { font-size: 0.75rem; color: var(--ambra); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.ms-work-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--ambra); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
.ms-work-item:hover .ms-work-bar { transform: scaleX(1); }
.ms-work-info { position: absolute; top: 1rem; left: 1rem; background: rgba(26,26,24,0.7); backdrop-filter: blur(4px); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 2px; }

/* ── SERVIZI ── */
.ms-servizi { background: var(--inchiostro); color: #fff; position: relative; overflow: hidden; }
.ms-servizi-bg { position: absolute; inset: 0; background: url('./img/immagine_servizi.webp') center/cover no-repeat; opacity: 0.06; }
.ms-servizi .ms-section-label { color: rgba(255,255,255,0.3); position: relative; z-index: 2; }
.ms-servizi .ms-section-label::after { background: rgba(255,255,255,0.1); }
.ms-servizi-intro { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.25; max-width: 56ch; margin-bottom: 4rem; color: rgba(247,246,243,0.9); position: relative; z-index: 2; }
.ms-servizi-list { display: flex; flex-direction: column; position: relative; z-index: 2; }
.ms-servizio-row { display: grid; grid-template-columns: 2.5fr 1fr 2fr; align-items: baseline; gap: 2rem; padding: 1.8rem 0; border-top: 1px solid rgba(255,255,255,0.07); transition: padding-left 0.3s; cursor: default; }
.ms-servizio-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.ms-servizio-row:hover { padding-left: 1rem; }
.ms-servizio-nome { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #fff; }
.ms-servizio-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambra); border: 1px solid rgba(200,135,58,0.4); padding: 0.25rem 0.75rem; border-radius: 2px; }
.ms-servizio-desc { font-size: 0.88rem; color: #fff); line-height: 1.65; }

/* ── PROCESSO ── */
.ms-processo { background: #F2F0E8; }
.ms-processo-intro { font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.25; max-width: 52ch; margin-bottom: 4rem; color: var(--inchiostro); }
.ms-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ms-step { background: #fff; padding: 2rem 1.5rem; border-radius: 3px; border-top: 3px solid var(--ambra); position: relative; }
.ms-step-num { font-family: var(--serif); font-size: 3rem; color: var(--medio); line-height: 1; margin-bottom: 1rem; }
.ms-step-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--inchiostro); }
.ms-step-desc { font-size: 0.85rem; color: #777770; line-height: 1.6; }

/* ── TESTIMONIAL ── */
.ms-testimonial-section { position: relative; overflow: hidden; padding: 7rem 5vw; background: url('https://images.unsplash.com/photo-1531973576160-7125cd663d86?w=1600&q=75') center/cover no-repeat; }
.ms-testimonial-overlay { position: absolute; inset: 0; background: rgba(26,26,24,0.88); }
.ms-testimonial-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; }
.ms-testimonial-section .ms-section-label { justify-content: center; color: rgba(255,255,255,0.35); }
.ms-testimonial-section .ms-section-label::after { display: none; }
.ms-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; text-align: left; }
.ms-testi-card { background: rgba(247,246,243,0.06); border: 1px solid rgba(247,246,243,0.1); border-radius: 3px; padding: 1.8rem; }
.ms-testi-quote { font-size: 1.8rem; color: var(--ambra); font-family: var(--serif); line-height: 1; margin-bottom: 0.8rem; }
.ms-testi-text { font-size: 0.92rem; color: rgba(247,246,243,0.75); line-height: 1.65; margin-bottom: 1.2rem; font-style: italic; }
.ms-testi-author { font-size: 0.8rem; font-weight: 600; color: #fff; letter-spacing: 0.04em; }
.ms-testi-role { font-size: 0.75rem; color: var(--ardesia); margin-top: 0.15rem; }
.ms-star-row { color: var(--ambra); font-size: 0.8rem; margin-bottom: 0.6rem; }

/* ── ABOUT ── */
.ms-about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7rem; align-items: center; }
.ms-about-foto { position: relative; background: url('./progetti/chi-sono.jpg') center/cover no-repeat; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; }
.ms-about-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(200,135,58,0.3) 0%, transparent 60%); }
.ms-about-badge { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 2; background: var(--ambra); color: #fff; padding: 0.8rem 1.2rem; border-radius: 2px; text-align: right; }
.ms-about-badge-val { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.ms-about-badge-testo { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.ms-about-h2 { font-family: var(--serif); font-size: clamp(1.8rem, 2.5vw, 2.8rem); line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -0.015em; }
.ms-about-p { font-size: 1rem; color: #fff; line-height: 1.78; margin-bottom: 1.3rem; }
.ms-skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.ms-skill-tag { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.35rem 0.85rem; border: 1px solid var(--medio); border-radius: 2px; color: #777770; }
.ms-disponibile { display: inline-flex; align-items: center; gap: 0.6rem; background: #EDFAF3; border: 1px solid #8DDAB5; color: #1A7A4C; font-size: 0.78rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 2px; margin-bottom: 2rem; }
.ms-disponibile-dot { width: 8px; height: 8px; background: #2DB975; border-radius: 50%; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── URGENZA ── */
.ms-urgenza { background: var(--ambra); color: #fff; padding: 2.5rem 5vw; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ms-urgenza-text { font-family: var(--serif); font-size: 1.4rem; font-style: italic; }
.ms-urgenza-sub { font-size: 0.85rem; opacity: 0.8; margin-top: 0.3rem; }
.ms-btn-bianco { background: #fff; color: var(--ambra); text-decoration: none; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1rem 2.4rem; border-radius: 2px; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.ms-btn-bianco:hover { background: var(--inchiostro); color: #fff; }

/* ── CONTATTI ── */
.ms-contatti { position: relative; overflow: hidden; padding: 7rem 5vw; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.ms-contatti-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1487014679447-9f8336841d58?w=1600&q=75') center/cover no-repeat; filter: grayscale(1); }
.ms-contatti-overlay { position: absolute; inset: 0; background: rgba(26,26,24,0.93); }
.ms-contatti-sinistra { position: relative; z-index: 2; }
.ms-contatti-h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; color: #fff; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.ms-contatti-p { font-size: 0.95rem; color: #fff; line-height: 1.7; max-width: 34ch; }
.ms-contatti-info { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.ms-contatti-info-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.88rem; color: #fff; }
.ms-contatti-info-icon { width: 32px; height: 32px; background: rgba(200,135,58,0.15); border: 1px solid rgba(200,135,58,0.3); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--ambra); }
.ms-form { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.2rem; }
.ms-form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ms-form-field label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.ms-form-field input, .ms-form-field select, .ms-form-field textarea { background: rgba(247,246,243,0.07); border: 1px solid rgba(247,246,243,0.15); border-radius: 2px; padding: 0.85rem 1rem; color: #fff; font-family: var(--sans); font-size: 0.95rem; outline: none; transition: border-color 0.2s; }
.ms-form-field input::placeholder, .ms-form-field textarea::placeholder { color: rgba(247,246,243,0.25); }
.ms-form-field input:focus, .ms-form-field select:focus, .ms-form-field textarea:focus { border-color: var(--ambra); }
.ms-form-field select option { background: var(--inchiostro); color: #fff; }
.ms-form-field textarea { resize: vertical; min-height: 110px; }
.ms-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ms-btn-invia { background: var(--ambra); color: #fff; border: none; font-family: var(--sans); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1rem 2.4rem; border-radius: 2px; cursor: pointer; align-self: flex-start; transition: background 0.2s, transform 0.15s; }
.ms-btn-invia:hover { background: #fff; color: var(--ambra); transform: translateY(-2px); }
.ms-form-garanzia { font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 0.4rem; }

/* ── FOOTER ── */
.ms-footer { background: #111110; color: rgba(247,246,243,0.3); padding: 2.5rem 5vw; }
.ms-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.ms-footer-logo { font-family: var(--serif); font-size: 1rem; color: rgba(247,246,243,0.5); }
.ms-footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.ms-footer-links a { color: rgba(247,246,243,0.3); text-decoration: none; font-size: 0.78rem; transition: color 0.2s; }
.ms-footer-links a:hover { color: var(--ambra); }
.ms-footer-copy { width: 100%; text-align: center; font-size: 0.72rem; margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem; }
footer.ms-footer p, .ms-footer-copy a{color:#fff;}
/* ── RESPONSIVE ── */
@media (max-width: 1000px) { .ms-step-grid { grid-template-columns: 1fr 1fr; } .ms-about-grid { grid-template-columns: 1fr; gap: 3rem; } .ms-about-foto { max-width: 320px; } .ms-contatti { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .ms-work-grid { grid-template-columns: 1fr 1fr; } .ms-work-item:nth-child(2) { margin-top: 0; } .ms-work-item:nth-child(5) { margin-top: 0; } .ms-numeri-grid { display: block; } .ms-testi-grid { grid-template-columns: 1fr; } .ms-servizio-row { grid-template-columns: 1fr; gap: 0.4rem; } .ms-hero-badge { display: none; } .ms-form-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ms-nav-links { display: none; } .ms-nav-hamburger { display: flex; } .ms-work-grid { grid-template-columns: 1fr; } .ms-step-grid { grid-template-columns: 1fr; } .ms-numeri-grid { display: block; } }
@media (prefers-reduced-motion: reduce) { .ms-ticker-track { animation: none; } .ms-hero-h1 em::after { animation: none; transform: scaleX(1); } .ms-scroll-hint::after { animation: none; } }

/* ──  Title ── */
h2{color:#fff;}



.ms-proj-body{padding:5%;color:#fff;}
div#cky-policy-container div p a{color:#fff;}

 footer.ms-footer div.ms-footer-inner div.ms-footer-links a{color:#fff;}
 
.ms-mobile-menu{
    position: relative;
}

.ms-mobile-close{
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 0;
          /* usa #000 se il menu è chiaro */
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
    z-index: 1002;
    transition: transform .2s ease, opacity .2s ease;
}

.ms-mobile-close:hover{
    transform: rotate(90deg);
    opacity: .8;
}

.privacy-box{color:#fff;},a{color:#fff;}