/* Essenza Pura — shared styles */
:root{
  --ivory: #F5F1EA;
  --ivory-2: #EDE6DA;
  --ivory-3: #E4DBC9;
  --ink: #1A1D17;
  --ink-soft: #2F3A2A;
  --olive: #3E4A33;
  --olive-2: #5A6848;
  --amber: #B8853A;
  --amber-soft: oklch(0.72 0.09 75);
  --line: #C9BFA8;
  --line-soft: #D9CFB8;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--ivory); color:var(--ink); font-family:'Inter', sans-serif; font-weight:300; -webkit-font-smoothing:antialiased}
body{font-size:15px; line-height:1.55}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.serif{font-family:'Cormorant Garamond', serif; font-weight:400; letter-spacing:-0.005em}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase}
.container{max-width:1360px; margin:0 auto; padding:0 40px}
.hair{border:0; border-top:1px solid var(--line-soft); margin:0}

/* TOP BAR */
.topbar{background:var(--ink-soft); color:var(--ivory); font-size:11px; letter-spacing:0.08em; text-transform:uppercase}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:9px 40px; max-width:1360px; margin:0 auto}
.topbar .marquee{display:flex; gap:36px; opacity:.85}
.topbar .marquee span{display:inline-flex; align-items:center; gap:8px}
.topbar .marquee .dot{width:4px; height:4px; border-radius:50%; background:var(--amber-soft); display:inline-block}
.topbar .right{display:flex; gap:22px; opacity:.8}

/* HEADER */
header.nav{position:sticky; top:0; z-index:50; background:rgba(245,241,234,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.nav-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 40px; max-width:1360px; margin:0 auto}
.nav-left, .nav-right{display:flex; gap:28px; align-items:center; font-size:13px; letter-spacing:0.02em}
.nav-right{justify-content:flex-end}
.nav-left a, .nav-right a{padding:6px 0; color:var(--ink); opacity:.85; position:relative}
.nav-left a:hover, .nav-right a:hover, .nav-left a.active, .nav-right a.active{opacity:1; color:var(--olive)}
.nav-left a.active::after, .nav-right a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--amber)}
.logo{font-family:'Cormorant Garamond', serif; font-size:26px; letter-spacing:0.14em; text-align:center; font-weight:500}
.logo small{display:block; font-family:'Inter', sans-serif; font-size:8.5px; letter-spacing:0.42em; margin-top:2px; color:var(--olive-2); font-weight:400}
.nav-right .icon-btn{position:relative; display:inline-flex; align-items:center; gap:6px}
.nav-right .bag-count{position:absolute; top:-6px; right:-10px; background:var(--olive); color:var(--ivory); font-size:9px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-family:'Inter',sans-serif}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 28px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--ink-soft); cursor:pointer; transition:all .25s ease; background:transparent; color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:500}
.btn.primary{background:var(--ink-soft); color:var(--ivory)}
.btn.primary:hover{background:var(--olive)}
.btn.ghost:hover{background:var(--ink-soft); color:var(--ivory)}
.btn.amber{background:var(--amber-soft); color:var(--ink-soft); border-color:var(--amber-soft)}
.btn.amber:hover{background:var(--ivory); border-color:var(--ivory)}
.btn.outline-light{border-color:rgba(245,241,234,.4); color:var(--ivory)}
.btn.outline-light:hover{background:var(--ivory); color:var(--ink-soft); border-color:var(--ivory)}
.btn .arrow{width:14px; height:1px; background:currentColor; position:relative; transition:width .25s}
.btn .arrow::after{content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg)}
.btn:hover .arrow{width:22px}

.section-label{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--olive); margin-bottom:24px; display:flex; align-items:center; gap:12px}
.section-label::before{content:"—"; color:var(--amber)}

/* TICKER */
.ticker{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:18px 0; overflow:hidden; background:var(--ivory)}
.ticker-track{display:flex; gap:60px; white-space:nowrap; font-family:'Cormorant Garamond', serif; font-size:22px; font-style:italic; color:var(--olive); animation:tick 40s linear infinite}
.ticker-track span{display:inline-flex; align-items:center; gap:60px}
.ticker-track .bullet{width:5px; height:5px; background:var(--amber); border-radius:50%; display:inline-block}
@keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* FOOTER */
footer.site{background:var(--ink-soft); color:var(--ivory); padding:80px 40px 30px}
.ft-inner{max-width:1360px; margin:0 auto}
.ft-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:60px; padding-bottom:60px; border-bottom:1px solid rgba(245,241,234,.15)}
.ft-brand .logo{text-align:left; color:var(--ivory); margin-bottom:16px}
.ft-brand .logo small{color:var(--amber-soft)}
.ft-brand p{color:rgba(245,241,234,.65); font-size:13px; line-height:1.7; max-width:320px; margin-top:20px}
.ft-col h5{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-soft); margin-bottom:18px; font-weight:400}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:9px; font-size:13.5px; color:rgba(245,241,234,.8)}
.ft-col li a:hover{color:var(--ivory)}
.ft-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:11px; color:rgba(245,241,234,.5); letter-spacing:0.04em; flex-wrap:wrap; gap:18px}
.ft-bottom .legal{display:flex; gap:22px; flex-wrap:wrap}
.ft-certs{display:flex; gap:18px; align-items:center; margin-top:24px; flex-wrap:wrap}
.cert{padding:8px 12px; border:1px solid rgba(245,241,234,.2); font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(245,241,234,.8)}

/* Page title block */
.page-hero{padding:80px 40px 90px; max-width:1360px; margin:0 auto; border-bottom:1px solid var(--line-soft)}
.page-hero .eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:24px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--olive)}
.page-hero .eyebrow .line{width:40px; height:1px; background:var(--olive-2); display:inline-block}
.page-hero h1{font-family:'Cormorant Garamond', serif; font-weight:300; font-size:clamp(56px, 8vw, 118px); line-height:0.95; letter-spacing:-0.015em; color:var(--ink-soft)}
.page-hero h1 em{font-style:italic; color:var(--amber); font-weight:300}
.page-hero .lead{margin-top:36px; max-width:620px; font-size:18px; line-height:1.6; color:#3a3f33; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:300}
.page-hero .crumbs{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--olive); margin-bottom:40px; display:flex; gap:10px; align-items:center}
.page-hero .crumbs a{color:var(--olive)}
.page-hero .crumbs .sep{color:var(--line)}

/* Generic placeholder block */
.ph-block{background:linear-gradient(135deg, var(--c1, #BFB49A) 0%, var(--c2, #6E7A57) 100%); position:relative; overflow:hidden}
.ph-block .stripes{position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent 0 16px, rgba(0,0,0,.06) 16px 17px)}
.ph-block .corner{position:absolute; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(245,241,234,.85)}
.ph-block .corner.tl{top:20px; left:20px}
.ph-block .corner.tr{top:20px; right:20px}
.ph-block .corner.bl{bottom:20px; left:20px}
.ph-block .corner.br{bottom:20px; right:20px}

/* ============ RESPONSIVE ============ */
/* Mobile menu button (shown only < 900px) */
.menu-btn{display:none; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer; padding:8px; z-index:60}
.menu-btn span{width:22px; height:1.5px; background:var(--ink-soft); transition:all .3s}
.menu-btn.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width: 1100px){
  .nav-left, .nav-right{gap:18px; font-size:12px}
  .topbar .marquee{gap:20px}
  .topbar .marquee span:nth-child(3){display:none}
}

@media (max-width: 900px){
  body{font-size:14px}
  .topbar .wrap{padding:8px 20px}
  .topbar .marquee{gap:14px; font-size:10px}
  .topbar .marquee span:nth-child(2){display:none}
  .topbar .right{gap:14px}
  .topbar .right a:nth-child(2){display:none}

  .nav-inner{grid-template-columns:auto 1fr auto; padding:16px 20px; gap:16px}
  .menu-btn{display:flex}
  .nav-left, .nav-right{
    position:fixed; top:0; left:0; right:0; bottom:0; background:var(--ivory);
    flex-direction:column; justify-content:center; align-items:center; gap:22px;
    font-size:22px; font-family:'Cormorant Garamond', serif; font-weight:400;
    transform:translateX(-100%); transition:transform .3s ease; z-index:55; padding:80px 30px
  }
  .nav-right{transform:translateX(100%)}
  .nav-left.open, .nav-right.open{transform:translateX(0)}
  .nav-right .icon-btn{font-size:14px; font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; margin-top:10px}
  .logo{font-size:18px; letter-spacing:0.12em}
  .logo small{font-size:7.5px; letter-spacing:0.35em}

  .btn{padding:14px 22px; font-size:11px}
  .section-label{font-size:10px}

  /* Footer */
  footer.site{padding:50px 22px 24px}
  .ft-top{grid-template-columns:1fr; gap:36px; padding-bottom:40px}
  .ft-brand p{max-width:none}
  .ft-col h5{margin-bottom:12px}
  .ft-bottom{flex-direction:column; align-items:flex-start; gap:14px; font-size:10.5px}

  /* Ticker */
  .ticker-track{font-size:17px; gap:36px}
  .ticker-track span{gap:36px}

  /* Page hero generic */
  .page-hero{padding:50px 22px 60px}

  /* ======== HOME (index) ======== */
  .hero{padding:40px 22px 60px !important}
  .hero-grid{grid-template-columns:1fr !important; gap:40px !important; min-height:auto !important}
  .hero-visual{height:480px !important}
  .hero-meta{gap:28px !important; margin-top:40px !important; flex-wrap:wrap}
  .hero-meta .item .num{font-size:28px !important}
  .side-card{right:10px !important; bottom:10px !important; width:220px !important; padding:16px 18px !important}
  .vert-label{display:none}

  .philosophy{padding:70px 22px !important; grid-template-columns:1fr !important; gap:40px !important}
  .philosophy h2{font-size:40px !important}
  .pillars{grid-template-columns:1fr !important}

  .featured{padding:70px 0 !important}
  .col-head{flex-direction:column; align-items:flex-start !important; gap:24px; padding:0 22px !important; margin-bottom:36px !important}
  .col-head h2{font-size:48px !important}
  .products{grid-template-columns:1fr 1fr !important; gap:18px !important; padding:0 22px !important}
  .prod h3{font-size:20px !important}
  .prod .body{padding:16px 16px 20px !important}

  .cfg-cta{padding:70px 22px !important}
  .cfg-cta .wrap{grid-template-columns:1fr !important; gap:36px !important}
  .cfg-cta h2{font-size:48px !important}
  .cfg-cta .right{padding:24px !important}

  .frantoio-grid{grid-template-columns:1fr !important; min-height:auto !important}
  .fr-img{height:360px}
  .fr-img .floating .big{font-size:72px !important}
  .fr-copy{padding:50px 22px !important}
  .fr-copy h2{font-size:38px !important}
  .fr-stats{grid-template-columns:repeat(3,1fr) !important; gap:12px}
  .fr-stats .s .n{font-size:28px !important}

  .news{padding:70px 22px !important}
  .news h2{font-size:38px !important}

  /* ======== CHI SIAMO ======== */
  .cs-hero{padding:40px 22px 60px}
  .cs-hero-grid{grid-template-columns:1fr !important; gap:40px !important}
  .cs-hero .meta{grid-template-columns:1fr !important}
  .cs-hero .meta .i{border-right:0 !important; border-bottom:1px solid var(--line-soft) !important}
  .cs-hero .meta .i:last-child{border-bottom:0 !important}

  .story{padding:70px 22px !important; grid-template-columns:1fr !important; gap:40px !important}
  .story h2{font-size:42px !important}

  .founders{padding:60px 22px !important}
  .founders-head{flex-direction:column; align-items:flex-start !important; gap:20px; margin-bottom:36px !important}
  .founders-head h2{font-size:42px !important}
  .founders-grid{grid-template-columns:1fr 1fr !important; gap:18px !important}

  .section-divider{padding:20px 22px !important}
  .section-divider .inner{flex-direction:column; gap:8px; text-align:center; font-size:9.5px !important}

  .safety-intro{padding:70px 22px !important}
  .safety-intro h2{font-size:40px !important}
  .safety-intro .grid2{grid-template-columns:1fr !important; gap:36px !important}

  .risks{padding:0 22px 80px !important}
  .risks-head h3{font-size:36px !important}
  .risk-table .risk-row{grid-template-columns:1fr !important}
  .risk-row > div{border-right:0 !important; border-bottom:1px solid var(--line-soft) !important; padding:14px 18px !important}
  .risk-row > div:last-child{border-bottom:0 !important}
  .risk-row.head{display:none}
  .risk-row .num{font-size:22px !important}
  .risk-row .level{flex-direction:row; justify-content:flex-start !important; gap:10px}

  .org{padding:70px 22px !important}
  .org-head{flex-direction:column; gap:20px; margin-bottom:36px !important}
  .org-head h3{font-size:38px !important}
  .roles{grid-template-columns:1fr !important}

  .figures{padding:70px 22px !important}
  .figures-head h3{font-size:38px !important}
  .figs-grid{grid-template-columns:1fr !important}
  .fig{border-right:0 !important}

  .timeline{padding:70px 22px !important}
  .timeline-head h3{font-size:38px !important}
  .tl-grid{grid-template-columns:1fr 1fr !important}

  .dpi{padding:70px 22px !important}
  .dpi-inner{grid-template-columns:1fr !important; gap:36px !important}
  .dpi-left h3{font-size:38px !important}
  .dpi-grid{grid-template-columns:1fr 1fr !important}

  .gdpr{padding:70px 22px !important}
  .gdpr-grid{grid-template-columns:1fr !important; gap:48px !important}
  .gdpr h3{font-size:38px !important}
  .gdpr .cia{grid-template-columns:1fr !important; gap:10px}
  .m-row{grid-template-columns:1fr !important; gap:6px}

  .certs{padding:50px 22px !important}
  .certs-inner{grid-template-columns:1fr !important; gap:24px !important}
  .certs h4{font-size:26px !important}

  .cta-final{padding:70px 22px !important}
  .cta-final h3{font-size:40px !important}

  /* ======== COLLEZIONE ======== */
  .col-hero{padding:40px 22px 40px}
  .col-hero .row{flex-direction:column; align-items:flex-start !important; gap:16px; margin-top:24px !important}
  .filter-bar{padding:14px 22px !important}
  .filter-inner{font-size:10px !important; gap:8px !important}
  .filter-inner .right{margin-left:0 !important; width:100%; flex-wrap:wrap}
  .chip{padding:6px 10px !important}
  .grid{padding:40px 22px 80px !important; grid-template-columns:1fr 1fr !important; gap:18px !important}
  .grid .feature{grid-column:span 2 !important}
  .card h3{font-size:20px !important}
  .card .body{padding:16px 16px 20px !important}
  .card .pyramid{gap:8px}
  .card .pyramid .val{font-size:11px !important}

  /* ======== CREA ======== */
  .ck-hero{padding:40px 22px 40px}
  .ck-hero .row{flex-direction:column; gap:28px !important}
  .ck-hero .meta{gap:20px !important; flex-wrap:wrap}
  .cfg{grid-template-columns:1fr !important; gap:40px !important; padding:40px 22px 80px !important}
  .cfg-left{position:static !important}
  .stage{padding:24px 22px !important}
  .stage-head{flex-direction:column; align-items:flex-start !important; gap:4px}
  .stage-head .n{font-size:24px !important}
  .notes-grid{grid-template-columns:1fr 1fr !important}

  /* ======== FRANTOIO ======== */
  .fh{padding:40px 22px 0 !important}
  .hero-img{margin:40px 22px 0 !important; height:360px !important}
  .hero-img .center .big{font-size:72px !important}
  .facts{padding:60px 22px !important; grid-template-columns:1fr 1fr !important}
  .fact{padding:20px !important}
  .fact .n{font-size:38px !important}
  .process{padding:40px 22px 80px !important}
  .process h2{font-size:38px !important; margin-bottom:32px !important}
  .steps{grid-template-columns:1fr 1fr !important}
  .step{min-height:220px !important; padding:20px 16px 24px !important}
  .visit{padding:70px 22px !important}
  .visit-inner{grid-template-columns:1fr !important; gap:40px !important}
  .visit h2{font-size:38px !important}
  .visit-info{grid-template-columns:1fr 1fr !important; gap:16px !important}

  /* ======== JOURNAL ======== */
  .jh{padding:40px 22px 40px !important}
  .feat{padding:40px 22px !important}
  .feat-inner{grid-template-columns:1fr !important; gap:0 !important}
  .feat-copy{padding:30px 24px !important}
  .feat-copy h2{font-size:30px !important}
  .journal-grid, .grid{grid-template-columns:1fr 1fr !important; gap:22px !important}
  .art h3{font-size:20px !important}

  /* ======== BOUTIQUE ======== */
  .bh{padding:40px 22px 0 !important}
  .bh-row{grid-template-columns:1fr !important; gap:20px !important; margin-top:24px !important}
  .gallery{padding:40px 22px !important; grid-template-columns:1fr 1fr !important; grid-template-rows:200px 200px !important; gap:10px !important}
  .gallery .tile.big{grid-row:span 1 !important; grid-column:span 2}
  .info{padding:50px 22px !important; grid-template-columns:1fr !important; gap:40px !important}
  .info h2{font-size:38px !important}
  .services{padding:60px 22px !important}
  .services h3{font-size:36px !important; margin-bottom:32px !important}
  .svg-grid{grid-template-columns:1fr !important}
  .book{padding:70px 22px !important}
  .book-inner{grid-template-columns:1fr !important; gap:30px !important}
  .book h3{font-size:40px !important}
  .form{padding:28px 22px !important}
  .form .r2{grid-template-columns:1fr !important}
}

@media (max-width: 560px){
  .products{grid-template-columns:1fr !important}
  .grid{grid-template-columns:1fr !important}
  .grid .feature{grid-column:span 1 !important}
  .founders-grid{grid-template-columns:1fr !important}
  .notes-grid{grid-template-columns:1fr !important}
  .tl-grid{grid-template-columns:1fr !important}
  .dpi-grid{grid-template-columns:1fr !important}
  .facts{grid-template-columns:1fr !important}
  .steps{grid-template-columns:1fr !important}
  .gallery{grid-template-columns:1fr !important; grid-template-rows:repeat(5, 180px) !important}
  .gallery .tile.big{grid-column:span 1 !important}
  .fr-stats{grid-template-columns:1fr 1fr !important}
  .visit-info{grid-template-columns:1fr !important}
  .hero h1{font-size:48px !important}
  .cs-hero h1, .col-hero h1, .ck-hero h1, .fh h1, .jh h1, .bh h1{font-size:54px !important}
  .side-card{display:none !important}
  .topbar .marquee{display:none}
  .topbar .wrap{justify-content:center}
}