/* Bagna Code — stile del sito.
   Colori e font: modifica le variabili qui sotto in :root. */
/* Font self-hosted (cartella fonts/) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-normal-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-normal-400.woff2) format('woff2');
}

:root{--paper:#f5f5f2;--ink:#0f121e;--muted:#626672;--accent:#3d4dff;--accent-dark:#8f9bff;--line:rgba(15,18,30,.15);--serif:"Instrument Serif",serif;--sans:"Bricolage Grotesque",system-ui,sans-serif;--mono:"Martian Mono",ui-monospace,monospace;--font-mono:"Martian Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:3.6rem}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:italic;color:var(--accent)}
svg.art{overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

.display{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.025em}
.eyebrow{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.wrap{max-width:72rem;margin:0 auto;width:100%}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ink);border-radius:999px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;transition:.2s;cursor:pointer;font-family:inherit}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.wordmark{font-family:var(--serif);letter-spacing:-.025em}

/* nav */
nav{position:sticky;top:0;z-index:40;height:3.6rem;border-bottom:1px solid var(--line);background:rgba(245,245,242,.85);backdrop-filter:blur(10px);padding:0 1.25rem}
nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
nav .brand{display:flex;align-items:center;gap:.25rem;font-size:1.5rem;line-height:1}
nav .brand svg{width:2.5rem;height:2.5rem}
nav ul{display:none;gap:2rem;font-size:.875rem;color:var(--muted)}
nav ul a:hover{color:var(--ink)}
nav .right{display:flex;align-items:center;gap:2rem}
nav .btn{padding:.5rem 1.25rem}
@media(min-width:768px){nav ul{display:flex}}
#progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:60}

/* sections: each fills the screen under the nav */
.screen{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 3.6rem);padding:6rem 1.25rem;overflow:hidden}
.dark{background:var(--ink);color:var(--paper);background-image:radial-gradient(rgba(245,245,242,.12) 1px,transparent 1px);background-size:28px 28px}
.dark em{color:var(--accent-dark)}
@media(min-width:640px){.screen{padding-left:2rem;padding-right:2rem}nav{padding:0 2rem}}

/* hero */
.dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(15,18,30,.16) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.hero-grid{position:relative;display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:7fr 5fr}}
.hero h1{font-size:clamp(2.8rem,6vw,6rem)}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em svg{position:absolute;left:0;bottom:-.25rem;width:100%;height:.75rem}
.hero h1 em path{stroke-dasharray:260;stroke-dashoffset:260;animation:underline 1s 3.2s ease-out forwards}
.hero .tag{display:flex;align-items:center;gap:.75rem;margin-bottom:2.5rem}
.hero .tag i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.hero p.lead{margin-top:2.5rem;max-width:36rem;font-size:1.25rem;line-height:1.6;color:var(--muted)}
.hero .cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}
.art-box{position:relative;height:24rem}
@media(min-width:640px){.art-box{height:32rem}}
.ring{position:absolute;left:50%;top:50%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(15,18,30,.1)}
.orbit{position:absolute;color:rgba(15,18,30,.7);animation:drift 7s ease-in-out infinite}
.orbit.txt{font-family:var(--serif);font-style:italic;font-size:2.5rem;line-height:1;color:var(--accent);text-align:center}
.fujot-btn{position:absolute;inset:4% 16%;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink);cursor:pointer;outline:none}
.fujot-btn:focus-visible{box-shadow:0 0 0 1px rgba(15,18,30,.4)}
.fujot{width:100%;height:100%;overflow:visible}
.marquee{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);padding:1rem 0;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);overflow:hidden;white-space:nowrap}
.marquee .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee span.s{display:inline-flex;gap:2.5rem;padding-right:2.5rem}
.marquee b{color:var(--accent);font-weight:400}

/* shared headings */
.head{margin-bottom:3.5rem}
.label{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.label svg{width:3rem;height:3rem;margin:-.75rem 0 -.75rem -.25rem;flex:none}
.label::after{content:"";height:1px;flex:1;background:var(--line)}
.dark .label,.dark .eyebrow{color:rgba(245,245,242,.6)}
.dark .label::after{background:rgba(245,245,242,.2)}
.head h2{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.025em;font-size:clamp(2.6rem,6vw,5.2rem);max-width:56rem}
.head p{margin-top:1.5rem;max-width:36rem;font-size:1.125rem;color:var(--muted)}

/* mission */
.mission h2{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.025em;font-size:clamp(3rem,7vw,6.2rem)}
.mission .vision{margin-top:2rem;max-width:48rem;font-size:1.25rem;line-height:1.6;color:rgba(245,245,242,.75)}
.values{margin-top:5rem;border-top:1px solid rgba(245,245,242,.2);padding-top:2.5rem;display:grid;gap:2.5rem}
@media(min-width:640px){.values{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.values .n{font-family:var(--mono);font-size:.75rem;color:var(--accent-dark)}
.values h3{font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1;margin-top:1rem}
.values p{margin-top:.75rem;color:rgba(245,245,242,.7)}

/* services */
.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:.75rem 2rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line);transition:background .3s}
.row:hover{background:rgba(15,18,30,.03)}
.row .no{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.row h3{font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1;transition:transform .3s}
.row:hover h3{transform:translateX(.5rem)}
.row .focus{display:inline-block;margin-left:1rem;transform:translateY(-.5rem);background:var(--accent);color:#fff;border-radius:999px;padding:.25rem .75rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.row p{color:var(--muted);max-width:28rem}
.row .tags{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
@media(min-width:768px){.row{grid-template-columns:1fr 5fr 4fr 2fr}.row h3{font-size:3rem}.row .tags{justify-content:flex-end}}

/* steps */
.steps{display:grid;gap:3rem 2rem}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{border-top:1px solid var(--ink);padding-top:1.5rem}
.step .big{font-family:var(--serif);font-size:4.5rem;line-height:1;color:var(--accent)}
.step h3{margin-top:2rem;font-size:1.125rem;font-weight:500}
.step p{margin-top:.5rem;color:var(--muted)}

/* projects */
.cards{display:grid;gap:3rem 2.5rem}
@media(min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border-top:1px solid var(--ink);padding-top:2rem}
.card h3{font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1;margin-top:1.5rem}
.card .tl{margin-top:.75rem;font-size:1.125rem;line-height:1.3}
.card .tx{margin-top:1rem;color:var(--muted)}
.card a.lnk{display:inline-block;margin-top:1.5rem;border-bottom:1px solid var(--ink);padding-bottom:2px;font-family:var(--mono);font-size:.875rem;transition:.2s}
.card a.lnk:hover{color:var(--accent);border-color:var(--accent)}
.logo{width:4rem;height:4rem;margin-top:1.5rem;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center}
.logo img{width:2.25rem;height:2.25rem;object-fit:contain}

/* contact */
.mail{display:block;word-break:break-all;font-family:var(--serif);line-height:.98;letter-spacing:-.025em;font-size:clamp(2.2rem,7.6vw,7rem);transition:color .2s}
.mail .code{color:var(--accent-dark)}
.mail:hover{color:var(--accent-dark)}
.mail .arrow{display:inline-block;margin-left:1rem;transition:transform .3s}
.mail:hover .arrow{transform:translateX(.75rem)}
.links{margin-top:4rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;font-family:var(--mono);font-size:.875rem}
.links a{border-bottom:1px solid rgba(245,245,242,.4);padding-bottom:2px}
.links a:hover{color:var(--accent-dark);border-color:var(--accent-dark)}

/* footer */
footer{background:var(--ink);color:var(--paper);padding:0 1.25rem 1.5rem;overflow:hidden}
footer .in{max-width:72rem;margin:0 auto;border-top:1px solid rgba(245,245,242,.2)}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:2rem;font-family:var(--mono);font-size:.75rem;color:rgba(245,245,242,.6)}
footer .top p+p{margin-top:.25rem}
footer .top svg{display:none;width:6rem;height:6rem;color:var(--paper);overflow:visible}
@media(min-width:640px){footer .top svg{display:block}}
footer .wordmark.big{display:block;white-space:nowrap;text-align:center;font-size:17vw;line-height:.8;padding-top:2rem;color:var(--paper);user-select:none}
footer em{color:var(--accent-dark)}

/* margins: small drawings, wide screens only */
.fl{position:absolute;display:none;color:rgba(15,18,30,.4);pointer-events:none;animation:drift 8s ease-in-out infinite}
.dark .fl{color:rgba(245,245,242,.45)}
.fl.txt{font-family:var(--serif);font-style:italic;text-align:center;line-height:1}
@media(min-width:1400px){.fl{display:block}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* steam, flame */
.steam-char{opacity:0;transform-box:fill-box;transform-origin:center;animation:steam 5.6s ease-out infinite}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.3s ease-in-out infinite}
@keyframes steam{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.6)}18%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),-58px) rotate(var(--rot)) scale(1.15)}}
@keyframes flicker{0%,100%{transform:scaleY(1) skewX(0)}30%{transform:scaleY(1.12) skewX(2deg)}65%{transform:scaleY(.93) skewX(-2deg)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes underline{to{stroke-dashoffset:0}}
@keyframes fall{from{transform:translate3d(0,-20vh,0) rotate(var(--r0))}to{transform:translate3d(var(--dx),125vh,0) rotate(var(--r1))}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes word-in{from{opacity:0;transform:translateY(14px)}}
@keyframes failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* opening screen */
#loader{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s ease-out;animation:failsafe .01s 8s forwards}
#loader.out{opacity:0;pointer-events:none}
#loader .word{position:relative;z-index:1;font-size:17vw;line-height:.9;white-space:nowrap;animation:word-in .9s ease-out both}
@media(min-width:640px){#loader .word{font-size:13vw}}
#loader .bar{position:relative;z-index:1;margin-top:2.5rem;height:1px;width:min(22rem,70vw);background:var(--line);overflow:hidden}
#loader .bar i{display:block;height:100%;background:var(--accent);transform-origin:left;animation:load 2.4s linear both}
#loader .eyebrow{position:relative;z-index:1;margin-top:1rem}
.rain{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.rain>div{position:absolute;top:0;color:rgba(15,18,30,.8)}
.rain>div.w{font-family:var(--serif);font-style:italic;white-space:nowrap;text-align:center;line-height:1}
#rain{z-index:50}
#loader .rain{z-index:0}
#pill{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:55;background:var(--ink);color:var(--paper);border-radius:999px;padding:.6rem 1.25rem;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;display:none}

@media(prefers-reduced-motion:reduce){
  #loader{display:none}
  .rv{opacity:1;transform:none;transition:none}
  .steam-char,.flame,.orbit,.fl,.marquee .track{animation:none}
  .steam-char{opacity:.5}
  .hero h1 em path{animation:none;stroke-dashoffset:0}
}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line);padding:1.25rem 0}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;font-family:var(--serif);font-size:1.75rem;line-height:1.15}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);font-size:1rem;color:var(--accent);flex:none;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin-top:1rem;max-width:44rem;color:var(--muted);line-height:1.6}
.qa summary:focus-visible{outline:1px solid rgba(15,18,30,.4);outline-offset:4px}
footer .top a{border-bottom:1px solid rgba(245,245,242,.4)}
footer .top a:hover{color:var(--accent-dark);border-color:var(--accent-dark)}
footer .top a{position:relative}
footer .top a::after{content:"";position:absolute;inset:-.8rem -.6rem}