@charset "UTF-8";
/*//////////////////////////////////////////////////////////
 Due Mani — style.css
 palette + layout, hand-tuned. warm editorial.
//////////////////////////////////////////////////////////*/
:root{
  --ink:#241e1c;
  --ink2:#474341;
  --accent:#bab1a0;
  --accent-d:#a99d86;
  --paper:#ffffff;
  --ground:#f9f9f9;
  --ground2:#f5f3f0;
  --muted:#8f8b86;
  --line:#e7e2da;
  --rad:22px;
}
*{box-sizing:border-box;letter-spacing:.02em}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.85 "Noto Sans",-apple-system,sans-serif;color:var(--ink);background:var(--paper);padding-top:68px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.3s}
h1,h2,h3{margin:0;line-height:1.25}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.inner{max-width:1200px;margin:auto;padding:0 24px}
.narrow{max-width:820px}
.section{padding:74px 0}
.kick{font-family:"Red Hat Display",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent-d);margin:0 0 14px}
.kick.center{text-align:center}
.h1{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.12}
.h2{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(26px,4vw,40px)}
.h2.center{text-align:center}
.h3{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(21px,3vw,28px)}
.en-sm{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.7em;font-family:"Red Hat Display",sans-serif}
.script{font-family:"Caveat",cursive;color:var(--accent);font-size:1.9rem;display:inline-block;transform:rotate(-8deg);margin-left:12px}
.center{text-align:center}
.center-block p{max-width:640px;margin-left:auto;margin-right:auto}

/* header */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;background:var(--paper);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 1px 0 var(--line),0 6px 22px rgba(36,30,28,.06)}
.header-box{display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;height:68px;padding:0 24px}
.brand{font-family:"Red Hat Display",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:1.35rem}
.brand span{color:var(--accent-d)}
.nav-inline{display:none;gap:26px;font-size:.82rem;font-weight:500}
.nav-inline a:hover{color:var(--accent-d)}
.menu-trigger{position:relative;width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:0}
.menu-trigger .line{position:absolute;left:9px;width:28px;height:3px;background:var(--ink);border-radius:10px;transition:.35s}
.menu-trigger .line:nth-of-type(1){top:15px}
.menu-trigger .line:nth-of-type(2){top:23px}
.menu-trigger .line:nth-of-type(3){top:31px}
.menu-trigger .mt-txt{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font:700 .5rem/1 "Red Hat Display",sans-serif;letter-spacing:.14em}
.menu-trigger.active .line:nth-of-type(1){top:23px;transform:rotate(45deg)}
.menu-trigger.active .line:nth-of-type(2){opacity:0}
.menu-trigger.active .line:nth-of-type(3){top:23px;transform:rotate(-45deg)}

/* overlay menu */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(36,30,28,.97);color:#fff;display:none;overflow-y:auto;padding:110px 24px 60px}
.overlay.open{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.gnavi{max-width:900px;margin:auto}
.ov-kick{font-family:"Red Hat Display",sans-serif;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;font-size:.8rem;margin:0 0 30px}
.nav-big{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.nav-big li{border-bottom:1px solid rgba(255,255,255,.18)}
.nav-big a{display:flex;align-items:baseline;gap:18px;padding:20px 4px}
.nav-big a:hover{color:var(--accent)}
.ov-num{font-family:"Oswald",sans-serif;color:var(--accent);font-size:1rem;width:34px}
.ov-it{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(24px,5vw,40px)}
.ov-en{margin-left:auto;font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.ov-foot{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;font-family:"Red Hat Display",sans-serif}
.ov-foot a{color:#fff;border-bottom:1px solid var(--accent);padding-bottom:3px}

/* buttons */
.cta{display:inline-flex;align-items:center;gap:14px;font-family:"Red Hat Display",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-top:26px}
.disc{width:46px;height:46px;border-radius:50%;background:var(--ink);position:relative;flex:none;transition:.3s}
.disc::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border:6px solid transparent;border-left:9px solid #fff}
.cta:hover .disc{background:var(--accent-d)}
.disc--sm{width:38px;height:38px}
.disc--sm::after{border-width:5px;border-left-width:7px}
.disc--light{background:#fff}
.disc--light::after{border-left-color:var(--ink)}
.btn-line{display:inline-block;border:2px solid var(--ink);padding:14px 26px;font-family:"Red Hat Display",sans-serif;font-weight:700;letter-spacing:.06em;font-size:.9rem}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--ink);color:#fff;border:0;padding:12px 20px;font:700 .85rem "Red Hat Display",sans-serif;cursor:pointer}
.btn-solid:hover{background:var(--accent-d)}

/* grounds */
.ground{background:var(--ground)}
.ground2{background:var(--ground2)}
.tiled{background-image:radial-gradient(var(--line) 1.1px,transparent 1.1px);background-size:22px 22px}
.ground2.tiled{background-color:var(--ground2)}

/* head pair */
.head-pair{text-align:center;margin-bottom:40px}
.head-pair .en{font-family:"Red Hat Display",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(26px,4.4vw,46px);line-height:1;display:block}
.head-pair .it{display:block;margin-top:.7em;color:var(--muted);letter-spacing:.16em;font-size:.9rem}

/* marquee */
.marquee{display:flex;overflow:hidden;white-space:nowrap;padding:14px 0;background:var(--paper)}
.marquee__track{display:inline-block;padding-left:.4em;animation:marq 34s linear infinite}
.marquee__track span{font-family:"Red Hat Display",sans-serif;font-weight:900;font-size:clamp(46px,11vw,120px);text-transform:uppercase;letter-spacing:.05em;-webkit-text-stroke:1.5px var(--accent);color:transparent;padding-right:.35em}
@keyframes marq{to{transform:translateX(-100%)}}

/* hero */
.hero{padding:22px 22px 0}
.hero__media{position:relative;height:min(76vh,720px);border-radius:80px 80px 0 0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__cap{position:absolute;right:16px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;color:#fff;font-weight:700;letter-spacing:.14em;font-size:.82rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* intro */
.intro__grid{display:grid;gap:34px}
.intro__l .h1{margin-bottom:4px}
.intro__r p{margin:0 0 1.2em;color:var(--ink2)}
.intro__r p:last-child{margin-bottom:0}

/* band */
.band{height:min(46vh,420px);background-size:cover;background-position:center;background-attachment:fixed}
.band--sm{height:min(38vh,340px)}

/* services cards */
.services__lead{max-width:640px;margin:0 auto 44px;text-align:center;color:var(--ink2)}
.cards{display:grid;gap:30px;grid-template-columns:1fr}
.card{position:relative;display:block}
.card__img{border-radius:var(--rad);overflow:hidden;margin-bottom:18px;aspect-ratio:3/2}
.card__img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .card__img img{transform:scale(1.08)}
.card__en{font-family:"Red Hat Display",sans-serif;color:var(--accent-d);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin:0 0 .5em}
.card__t{font-family:"Red Hat Display",sans-serif;font-size:1.35rem;margin-bottom:.5em}
.card__d{color:var(--ink2);font-size:.95rem;margin:0}
.card__go{position:absolute;top:0;right:0}

/* feature pair */
.fpair__grid{display:grid;gap:40px;align-items:center}
.fmedia{position:relative;border-radius:var(--rad);overflow:hidden}
.fmedia img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ribbon{position:absolute;top:22px;left:-6px;background:var(--accent);color:#fff;font-family:"Red Hat Display",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.4em 1.3em;transform:rotate(-6deg);font-size:.78rem}
.badge{position:absolute;top:-16px;right:-12px;width:92px;height:92px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:.66rem;line-height:1.25;letter-spacing:.05em}
.fpair__txt p{color:var(--ink2);margin:1em 0 0}
.fpair__txt .h2{margin-top:6px}

/* modo */
.modo__grid{display:grid;gap:30px}
.modo__cols{display:grid;gap:30px}
.modo__cols p{margin:0 0 1.1em;color:var(--ink2)}
.modo__cols p:last-child{margin-bottom:0}

/* imgnav */
.imgnav-wrap .kick,.imgnav-wrap .h2{}
.imgnav{display:grid;gap:3px;margin-top:44px}
.imgnav a{position:relative;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px;overflow:hidden}
.imgnav a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:.5s}
.imgnav a::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:.48;transition:.3s;z-index:1}
.imgnav a:hover::before{opacity:.78}
.imgnav a:hover img{transform:scale(1.08)}
.imgnav__en,.imgnav__it,.imgnav .disc{position:relative;z-index:2}
.imgnav__en{font-family:"Red Hat Display",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--accent)}
.imgnav__it{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:1.5rem;margin:.4em 0 1em}

/* faq */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 66px 22px 60px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";position:absolute;left:22px;top:18px;font:700 1.4rem "Red Hat Display",sans-serif;color:var(--accent-d);line-height:1}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:16px;height:16px;margin-top:-8px;background:linear-gradient(var(--ink),var(--ink)) center/16px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 16px no-repeat;transition:.3s}
.faq details[open] summary::after{transform:rotate(90deg);opacity:.5}
.faq__a{padding:0 60px 24px}
.faq__a p{margin:0;color:var(--ink2)}

/* contact */
.contact__grid{display:grid;gap:36px}
.contact__lead{color:var(--ink2);margin:1em 0 1.6em}
.contact__dl{margin:0}
.contact__dl>div{padding:16px 0;border-top:1px solid var(--line)}
.contact__dl dt{font-family:"Red Hat Display",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--accent-d);margin-bottom:5px}
.contact__dl dd{margin:0}
.contact__dl a{border-bottom:1px solid var(--ink);padding-bottom:2px}
.map{border-radius:var(--rad);overflow:hidden;filter:grayscale(1);transition:.4s}
.map:hover{filter:grayscale(0)}
.map iframe{display:block;width:100%;height:360px;border:0}

/* endband */
.endband{background:var(--ink);color:#fff}
.endband__in{display:grid;gap:24px}
.endband .kick{color:var(--accent)}
.endband .h2{color:#fff}
.endband__btn{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.endband .btn-line{border-color:#fff;color:#fff}
.endband .btn-line:hover{background:#fff;color:var(--ink)}
.endband .disc{background:#fff}
.endband .disc::after{border-left-color:var(--ink)}

/* inner hero */
.ihero__media{position:relative;height:min(52vh,460px);border-radius:0 60px 0 0;overflow:hidden;margin:22px 22px 0}
.ihero__media img{width:100%;height:100%;object-fit:cover}
.ihero__cap{position:absolute;right:16px;bottom:16px;color:#fff;writing-mode:vertical-rl;font-weight:700;letter-spacing:.12em;font-size:.78rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ihero__txt{padding-top:44px}
.ihero__ttl{font-family:"Red Hat Display",sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);line-height:1.12}
.lead{max-width:640px;color:var(--ink2);margin:20px 0 0;font-size:1.05rem}

/* steps */
.steps{display:grid;gap:26px}
.step{display:flex;gap:22px;align-items:flex-start;border-top:2px solid var(--ink);padding-top:22px}
.step__n{font-family:"Oswald",sans-serif;font-size:2.4rem;color:var(--accent-d);line-height:1;flex:none;width:56px}
.step__t{font-family:"Red Hat Display",sans-serif;font-size:1.3rem;margin-bottom:.3em}
.step p{margin:0;color:var(--ink2)}

/* not-promise grid */
.notgrid{display:grid;gap:24px}
.notcard{background:var(--paper);border-radius:16px;padding:28px;border:1px solid var(--line)}
.notcard h3{font-family:"Red Hat Display",sans-serif;font-size:1.15rem;margin-bottom:.5em}
.notcard p{margin:0;color:var(--ink2);font-size:.95rem}

/* splits */
.splits{display:grid;gap:56px}
.split{display:grid;gap:30px;align-items:center}
.split__img{border-radius:var(--rad);overflow:hidden}
.split__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__n{font-family:"Oswald",sans-serif;color:var(--accent-d);font-size:1.5rem}
.split__sub{color:var(--ink);font-weight:700;margin:.3em 0 .6em}
.split__txt p{color:var(--ink2)}

/* checklist */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:34px;color:var(--ink2)}
.checklist li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;border-left:2.5px solid var(--accent-d);border-bottom:2.5px solid var(--accent-d);transform:rotate(-45deg)}

/* uffici steps + benefits */
.ufsteps{display:grid;gap:24px;margin-top:38px}
.ufstep{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px}
.ufstep__n{font-family:"Oswald",sans-serif;font-size:2rem;color:var(--accent-d);display:block;line-height:1;margin-bottom:.2em}
.ufstep h3{font-family:"Red Hat Display",sans-serif;font-size:1.2rem;margin-bottom:.4em}
.ufstep p{margin:0;color:var(--ink2);font-size:.95rem}
.benefit__grid{display:grid;gap:34px}
.benefit__grid>div>p{color:var(--ink2)}
.benefit__cards{display:grid;gap:22px}
.benefit{border-top:1px solid var(--line);padding-top:16px}
.benefit h3{font-family:"Red Hat Display",sans-serif;font-size:1.1rem;margin-bottom:.4em}
.benefit p{margin:0;color:var(--ink2);font-size:.95rem}

/* profiles + timeline */
.profiles{display:grid;gap:52px}
.profile{display:grid;gap:28px;align-items:center}
.profile__img{border-radius:var(--rad);overflow:hidden;max-width:360px}
.profile__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.profile__role{font-family:"Red Hat Display",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--accent-d);display:block;margin-bottom:.6em}
.profile__txt p{color:var(--ink2);margin:.8em 0 0;max-width:560px}
.timeline{display:grid;gap:22px}
.tl{background:var(--paper);border-left:3px solid var(--accent);padding:22px 26px;border-radius:0 12px 12px 0}
.tl__y{font-family:"Oswald",sans-serif;color:var(--accent-d);font-size:1.3rem;display:block;margin-bottom:.2em}
.tl h3{font-family:"Red Hat Display",sans-serif;font-size:1.15rem;margin-bottom:.4em}
.tl p{margin:0;color:var(--ink2)}

/* legal */
.legal-head{padding:70px 0 46px}
.legal-upd{color:var(--muted);font-size:.9rem;margin-top:14px}
.legal-body h2{font-family:"Red Hat Display",sans-serif;font-size:1.25rem;margin:1.8em 0 .5em}
.legal-body p{color:var(--ink2)}
.legal-body a{border-bottom:1px solid var(--ink)}

/* footer */
.footer{padding:70px 0 24px;background:var(--paper)}
.f-top{display:grid;gap:40px}
.f-lettering{font-family:"Red Hat Display",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,96px);line-height:.92}
.f-lettering span{color:var(--accent-d)}
.f-tag{font-family:"Caveat",cursive;color:var(--accent-d);font-size:1.5rem;margin:14px 0 26px}
.f-nav,.f-legal{list-style:none;margin:0;padding:0}
.f-nav{margin-bottom:18px}
.f-nav li{margin-bottom:8px}
.f-nav a{position:relative;padding-left:22px;font-weight:500}
.f-nav a::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--accent);border-radius:50%}
.f-nav a:hover{color:var(--accent-d)}
.f-legal{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.f-legal a:hover{color:var(--ink)}
.f-right{border-radius:40px 0 0 40px;overflow:hidden;min-height:240px}
.f-right img{width:100%;height:100%;object-fit:cover;min-height:240px}
.copy{margin-top:44px;text-align:center;font-family:"Red Hat Display",sans-serif;font-size:.78rem;color:var(--muted);letter-spacing:.06em}

/* cookie */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;background:var(--ink);color:#fff;padding:20px;border-radius:14px;max-width:440px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.cookie p{margin:0;font-size:.9rem;line-height:1.6}
.cookie a{color:#fff;text-decoration:underline}
.cookie__row{margin-top:14px;display:flex;gap:14px;align-items:center}
.cookie__more{font-size:.85rem;color:rgba(255,255,255,.75)}

/* ------- responsive ------- */
@media (min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .checklist{grid-template-columns:1fr 1fr;column-gap:34px}
  .notgrid{grid-template-columns:1fr 1fr}
  .ufsteps{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .nav-inline{display:flex}
  .intro__grid{grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:center}
  .services__lead{}
  .cards{grid-template-columns:repeat(3,1fr)}
  .fpair__grid{grid-template-columns:1fr 1fr;gap:56px}
  .modo__grid{grid-template-columns:0.8fr 1.2fr;gap:50px;align-items:start}
  .modo__cols{grid-template-columns:1fr 1fr}
  .imgnav{grid-template-columns:repeat(3,1fr)}
  .contact__grid{grid-template-columns:1fr 1fr;gap:50px}
  .endband__in{grid-template-columns:1fr auto;align-items:center}
  .step{gap:30px}
  .split{grid-template-columns:1fr 1fr;gap:50px}
  .split--rev .split__img{order:2}
  .benefit__grid{grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:center}
  .benefit__cards{grid-template-columns:1fr 1fr}
  .profile{grid-template-columns:360px 1fr;gap:44px}
  .profile--rev .profile__img{order:2}
  .f-top{grid-template-columns:1.15fr .85fr}
  .f-right{margin-top:30px}
}
@media (max-width:899px){
  .band{background-attachment:scroll}
  .hero__media{border-radius:0 50px 0 0;height:min(64vh,520px)}
}
