/* FALCVS inner pages. Two voices only: Cinzel (the mark) and Cormorant Garamond (the reading).
   Night ground, ivory ink. Big statements, quiet everything else. */
:root{
  --night:#04071A; --night-2:#080C24; --ivory:#E8E1D1; --text:#D8D1C0; --quiet:#8D94A8; --dim:#5C6480; --line:#1A2140;
  --display:"Cinzel","Trajan Pro","Times New Roman",serif;
  --read:"Cormorant Garamond",Georgia,serif;
  --gut:max(24px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--night);color:var(--text);font-family:var(--read);font-size:clamp(19px,1.35vw,22px);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ivory);outline-offset:5px}
html:not([data-lang="it"]) .l-it,html:not([data-lang="es"]) .l-es,html[data-lang="it"] .l-en,html[data-lang="es"] .l-en{display:none!important}
p{margin:0 0 1.05em}
.eyebrow,.kicker{font-family:var(--display);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--quiet);font-weight:400;margin:0 0 26px}
h1,h2{font-weight:400}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:env(safe-area-inset-top,0px)}
.top::before{content:"";position:absolute;inset:0;background:rgba(4,7,26,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transition:opacity .5s ease}
.top::after{content:"";position:absolute;left:50%;bottom:0;height:1px;width:calc(var(--p,0)*100%);transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(232,225,209,.5) 20%,rgba(232,225,209,.5) 80%,transparent);opacity:0;transition:opacity .5s}
.scrolled .top::before,.scrolled .top::after{opacity:1}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gut);transition:padding .5s ease}
.scrolled .bar{padding-block:14px}
.home{display:block;width:124px;color:var(--ivory);transition:width .5s ease}
.scrolled .home{width:98px}
.mark{display:block;width:100%;height:auto}
.tools{display:flex;align-items:center;gap:22px}
.langs{display:flex;gap:2px}
.langs button{font:400 11px/1 var(--display);letter-spacing:.2em;padding:10px 6px 10px 8px;background:none;border:0;color:var(--dim);cursor:pointer;transition:color .3s}
.langs button:hover{color:var(--quiet)}
.langs button[aria-pressed="true"]{color:var(--ivory)}
.menu-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--ivory);cursor:pointer;padding:0;position:relative;z-index:2}
.menu-btn svg{width:30px;height:20px;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.menu-btn[aria-expanded="true"] svg{transform:rotate(90deg)}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:35;background:var(--night);display:grid;grid-template-rows:1fr auto;padding:120px var(--gut) calc(40px + env(safe-area-inset-bottom,0px));opacity:0;transition:opacity .45s ease}
.menu.on{opacity:1}
.menu ol{list-style:none;margin:0;padding:0;display:grid;align-content:center;justify-items:center;gap:6px;height:100%}
.menu li{overflow:hidden}
.menu a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-size:clamp(28px,6vw,54px);letter-spacing:.14em;color:var(--ivory);padding:10px 0;transform:translateY(100%);transition:transform .7s cubic-bezier(.2,.7,.1,1),color .3s}
.menu.on a{transform:none}
.menu li:nth-child(2) a{transition-delay:.06s}.menu li:nth-child(3) a{transition-delay:.12s}.menu li:nth-child(4) a{transition-delay:.18s}
.menu a .n{font-size:12px;letter-spacing:.3em;color:var(--dim);width:2.4em;text-align:right}
.menu a:hover{color:#fff}
.menu a[aria-current="page"]{color:var(--quiet)}
.menu-foot{display:grid;justify-items:center;gap:8px;text-align:center}
.menu-foot p{margin:0;font-size:16px;color:var(--quiet)}
.menu-open{overflow:hidden}
.menu-open .top::before{opacity:0}

/* ---------- shared layout ---------- */
main{display:block}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.wrap-read{max-width:760px;margin:0 auto;padding:170px var(--gut) 120px}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px var(--gut) 12vh}
.hero h1{font-family:var(--display);font-size:clamp(34px,5.6vw,84px);line-height:1.08;letter-spacing:.02em;color:var(--ivory);margin:0;max-width:15ch;text-wrap:balance}
.hero .h-line{display:block}
.hero .h-line+.h-line{color:var(--quiet);font-size:.62em;line-height:1.3;margin-top:.5em;max-width:22ch}
.scroll-cue{display:block;width:1px;height:64px;background:linear-gradient(var(--quiet),transparent);margin-top:44px}

/* ---------- about ---------- */
.hero-about{align-items:flex-end}
.hero-img{position:absolute;inset:0;margin:0;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:78% 20%;display:block}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,7,26,.75) 0%,rgba(4,7,26,0) 22%,rgba(4,7,26,0) 40%,rgba(4,7,26,.92) 78%,var(--night) 100%)}
.hero-text{position:relative;z-index:1;max-width:1240px;width:100%;margin:0 auto}
@media (min-width:900px){
  .hero-img{left:auto;width:50%}
  .hero-img img{object-position:right 30%}
  .hero-img::after{background:linear-gradient(to right,var(--night) 0%,rgba(4,7,26,0) 35%),linear-gradient(to bottom,rgba(4,7,26,.6),rgba(4,7,26,0) 25%,rgba(4,7,26,0) 70%,var(--night))}
  .hero-about{align-items:center}
}
.story{max-width:1240px;margin:0 auto;padding:4vh var(--gut) 0}
.chapter{display:grid;grid-template-columns:1fr;gap:6px;padding:9vh 0 2vh;border-top:1px solid var(--line)}
.chapter.cont{border-top:0;padding-top:0}
.numeral{font-family:var(--display);font-size:clamp(54px,8vw,120px);line-height:1;color:#1C2444;margin:0 0 18px;letter-spacing:.04em}
.chapter-body{max-width:34em}
.chapter-body .lead{font-size:1.32em;line-height:1.45;color:var(--ivory)}
@media (min-width:900px){
  .chapter{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px}
  .chapter .numeral{position:sticky;top:120px;align-self:start}
}
.statement{position:relative;text-align:center;padding:14vh 0 13vh;max-width:1100px;margin:0 auto}
.statement p{font-family:var(--display);font-size:clamp(28px,4.6vw,66px);line-height:1.18;letter-spacing:.04em;color:var(--ivory);margin:0;text-wrap:balance}
.statement.latin p{font-size:clamp(22px,3.2vw,44px);letter-spacing:.1em}
.statement .tr{font-family:var(--read);font-style:italic;letter-spacing:0;font-size:clamp(20px,1.8vw,26px)!important;color:var(--quiet);margin-top:18px}
.wing{display:block;height:1px;width:0;margin:40px auto 0;background:linear-gradient(90deg,transparent,var(--ivory),transparent);transition:width 1.6s cubic-bezier(.2,.7,.1,1) .2s}
.in .wing,.no-motion .wing{width:min(420px,70%)}
.kicker{display:block;margin-top:9vh}
.story .kicker{padding-top:9vh;border-top:1px solid var(--line)}
.closing{text-align:center;padding:16vh 0 10vh}
.closing .sig{font-family:var(--display);font-size:clamp(20px,2.2vw,28px);letter-spacing:.3em;color:var(--ivory);margin:0 0 14px}
.closing .motto{font-style:italic;color:var(--quiet)}

/* ---------- services ---------- */
.hero-plain{min-height:78svh;padding-left:0;padding-right:0}
.hero-plain h1{max-width:18ch}
.svc{list-style:none;margin:0;padding:0}
.svc-row{display:grid;grid-template-columns:1fr;gap:10px;padding:8vh 0;border-top:1px solid var(--line);position:relative}
.svc-row::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--ivory);transition:width 1.2s cubic-bezier(.2,.7,.1,1)}
.svc-row.in::after{width:120px}
.big-n{font-family:var(--display);font-size:clamp(64px,10vw,150px);line-height:.9;color:#1C2444}
.svc-row h2{font-family:var(--display);font-size:clamp(24px,3vw,42px);letter-spacing:.08em;color:var(--ivory);margin:0 0 16px}
.svc-row p{max-width:30em;font-size:1.12em}
@media (min-width:900px){.svc-row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}}
.duo{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);padding-bottom:12vh}
.duo-col{padding-top:8vh}
.duo .kicker{margin-top:0}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:8vw}}

/* ---------- buttons ---------- */
.cta{margin:2.4em 0 0}
.cta a,.cform button{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory);background:transparent;border:1px solid rgba(232,225,209,.35);padding:18px 34px 18px 38px;cursor:pointer;transition:border-color .4s,background .4s,color .4s}
.cta a::after,.cform button .lbl::after{content:"";width:22px;height:1px;background:currentColor;display:inline-block;margin-left:14px;vertical-align:middle;transition:width .4s}
.cta a:hover,.cform button:hover{border-color:var(--ivory);background:var(--ivory);color:var(--night)}
.cta a:hover::after,.cform button:hover .lbl::after{width:34px}
.cform button:disabled{opacity:.6;cursor:wait}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:9vh;padding-top:170px;padding-bottom:14vh}
.contact-intro h1{font-family:var(--display);font-size:clamp(32px,4.4vw,64px);line-height:1.1;letter-spacing:.02em;color:var(--ivory);margin:0 0 30px;text-wrap:balance}
.contact-intro .intro{font-size:1.25em;line-height:1.5;color:var(--text);max-width:22em}
.direct{margin-top:7vh}
.direct a{font-size:1.15em;border-bottom:1px solid var(--line);transition:border-color .3s}
.direct a:hover{border-color:var(--ivory)}
@media (min-width:980px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8vw;align-items:start;min-height:100svh}}
.cform .fields{display:grid;gap:14px}
.row{position:relative;padding-top:22px}
.row input,.row textarea{width:100%;font:400 1.15em/1.45 var(--read);color:var(--ivory);background:transparent;border:0;border-bottom:1px solid #222A49;border-radius:0;padding:10px 0 12px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .4s}
.row textarea{resize:none;min-height:5.2em}
.row label{position:absolute;left:0;top:34px;font-family:var(--display);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);pointer-events:none;transition:top .35s ease,font-size .35s ease,color .35s ease}
.row input:focus+label,.row input:not(:placeholder-shown)+label,.row textarea:focus+label,.row textarea:not(:placeholder-shown)+label{top:0;font-size:10px;color:var(--quiet)}
.row input:focus,.row textarea:focus{border-bottom-color:var(--ivory)}
.tried .row :invalid{border-bottom-color:#B88E8E}
.consent{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;margin-top:22px}
.consent input{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin:5px 0 0;border:1px solid rgba(232,225,209,.45);display:grid;place-content:center;cursor:pointer}
.consent input:checked::after{content:"";width:7px;height:7px;background:var(--ivory)}
.consent label{font-size:16px;line-height:1.5;color:var(--quiet)}
.consent a{color:var(--text);border-bottom:1px solid var(--dim)}
.tried .consent input:invalid{border-color:#D9A9A9}
.cform .cta{margin-top:26px}
.hp{position:absolute;left:-9999px}
.status.ok{text-align:center;padding:10vh 0}
.status.ok p{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);line-height:1.3;color:var(--ivory);letter-spacing:.04em;margin:28px 0 0}
.status.ok .wing{width:min(300px,60%);margin:0 auto}
.status.err{color:#E3C2C2;font-style:italic;margin-top:20px}

/* ---------- privacy ---------- */
.privacy h1{font-family:var(--display);font-size:clamp(30px,4vw,52px);color:var(--ivory);margin:0 0 20px}
.privacy .kicker{margin:3em 0 .8em}
.privacy p{font-size:.95em}
.privacy a{border-bottom:1px solid var(--line)}
.privacy .upd{font-style:italic;color:var(--dim);margin-top:3em}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:12vh var(--gut) calc(48px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:22px;text-align:center}
.foot-mark{display:grid;justify-items:center;gap:18px}
.foot-mark a{display:block;width:200px;color:var(--ivory)}
.foot .motto{font-family:var(--display);font-size:11px;letter-spacing:.5em;color:var(--quiet);margin:0;padding-left:.5em}
.foot-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:18px 0 0;font-size:17px;color:var(--text)}
.foot-line span{color:var(--dim)}
.foot-line a:hover{color:var(--ivory)}
.vat{font-size:13px;color:var(--dim);margin:0}

/* ---------- back to top ---------- */
.totop{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;border:1px solid rgba(232,225,209,.3);background:rgba(4,7,26,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ivory);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s,transform .4s,border-color .3s;z-index:30;padding:0}
.totop svg{width:20px;height:20px}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--ivory)}
.menu-open .totop{opacity:0;pointer-events:none}

/* ---------- reveal (only with JS, never for reduced motion) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.1,1)}
.js .reveal.in{opacity:1;transform:none}
.js .hero .hero-text{animation:rise 1.4s cubic-bezier(.2,.7,.1,1) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero .hero-text{animation:none}
  .wing{width:min(420px,70%);transition:none}
  .menu,.menu a{transition:none}
}
@media (max-width:560px){
  .home{width:104px}.scrolled .home{width:88px}
  .tools{gap:8px}
  .langs button{padding:10px 4px 10px 6px;font-size:10px}
  .foot-mark a{width:160px}
}

/* story */ /* contact */
/* refinements */
.bar{max-width:1288px;margin:0 auto}
.hero .h-line+.h-line{font-family:var(--read);font-style:italic;text-transform:none;letter-spacing:0;font-size:clamp(22px,2.1vw,32px);line-height:1.4;color:var(--text);margin-top:.9em;max-width:26ch}
.menu nav a{display:flex}
.menu a{transform:none}
.menu nav a{transform:translateY(100%)}
.menu.on nav a{transform:none}
.menu-foot a{font-family:var(--read);font-size:18px;letter-spacing:0;color:var(--text);padding:0;display:inline}
@media (max-width:899px){
  .hero-about{min-height:auto;display:block;padding:0}
  .hero-about .hero-img{position:relative;height:68svh;inset:auto}
  .hero-about .hero-img img{object-position:85% 38%}
  .hero-about .hero-img::after{background:linear-gradient(to bottom,rgba(4,7,26,.8) 0%,rgba(4,7,26,0) 25%,rgba(4,7,26,0) 55%,var(--night) 100%)}
  .hero-about .hero-text{margin-top:-12svh;padding:0 var(--gut) 10vh}
  .hero h1{font-size:clamp(32px,9vw,44px)}
  .scroll-cue{height:48px;margin-top:32px}
}
@media (max-width:899px){.hero-plain{min-height:62svh}}
/* the eye: the only colour on the site, it wakes up after the page settles */
.hero-img picture{display:block;width:100%;height:100%}
.hero-img .eye{position:absolute;inset:0;opacity:0;animation:eyewake 2.6s ease 1.4s forwards}
@keyframes eyewake{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-img .eye{animation:none;opacity:1}}
/* the logo is the menu: no other control in the header */
button.home{background:none;border:0;padding:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
button.home .mark{transition:opacity .4s}
button.home:hover .mark{opacity:.75}
.menu-open button.home .mark{opacity:1}
.menu-foot{gap:18px}
.menu-foot .langs button{font-size:12px;padding:10px 10px 10px 12px}
.menu-foot .motto{font-style:italic;color:var(--quiet);font-size:16px}
.foot{padding-top:10vh}
.cta a,.cform button{white-space:nowrap}
@media (max-width:560px){.cta a,.cform button{letter-spacing:.24em;padding:17px 24px 17px 28px;font-size:11px}.cta a::after,.cform button .lbl::after{width:16px;margin-left:10px}}
.foot{padding:7vh var(--gut) calc(36px + env(safe-area-inset-bottom,0px));gap:0}
.foot .vat{font-size:13px;letter-spacing:.08em;color:var(--dim);display:flex;gap:12px;justify-content:center}
.foot .vat a{color:var(--quiet)}.foot .vat a:hover{color:var(--ivory)}

/* ===== v3: living details ===== */
/* the eye lights up, glows, and settles into its colour */
.hero-img .glow{position:absolute;inset:0;opacity:0;animation:eyeglow 3.4s ease-in-out 1.2s forwards}
.hero-img .eye{animation:eyewake 1.6s ease 1.9s forwards}
@keyframes eyeglow{0%{opacity:0}38%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-img .glow{animation:none}}

/* living field of lines (services, contact) */
.field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-plain{overflow:hidden}
.hero-plain .hero-text{position:relative;z-index:1}
.contact-grid{position:relative}
.field-bg{position:absolute;left:50%;top:0;width:100vw;height:100svh;transform:translateX(-50%);z-index:0;opacity:.9}
.contact-grid>*:not(.field){position:relative;z-index:1}

/* services as a system: three nodes, a pulse travelling between them */
.system{display:flex;align-items:center;justify-content:space-between;gap:0;padding:7vh 0 9vh;max-width:980px;margin:0 auto}
.node{display:grid;justify-items:center;gap:10px;text-align:center;min-width:0;flex:0 0 auto}
.node .dot{width:11px;height:11px;border:1px solid var(--ivory);border-radius:50%;position:relative}
.node .dot::after{content:"";position:absolute;inset:-9px;border:1px solid rgba(232,225,209,.25);border-radius:50%;animation:ping 3.6s ease-out infinite}
.node:nth-child(3) .dot::after{animation-delay:1.2s}.node:nth-child(5) .dot::after{animation-delay:2.4s}
@keyframes ping{0%{transform:scale(.6);opacity:0}20%{opacity:1}100%{transform:scale(1.9);opacity:0}}
.node .nn{font-family:var(--display);font-size:11px;letter-spacing:.3em;color:var(--dim)}
.node .nt{font-family:var(--display);font-size:13px;letter-spacing:.18em;color:var(--ivory);max-width:12ch;line-height:1.35}
.node:hover .dot{background:var(--ivory)}
.link{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(232,225,209,.15),rgba(232,225,209,.35),rgba(232,225,209,.15));position:relative;margin:0 18px;align-self:flex-start;margin-top:5px;overflow:visible}
.link i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--ivory);box-shadow:0 0 10px 2px rgba(150,190,240,.55);animation:pulse 3.6s cubic-bezier(.6,0,.4,1) infinite}
.link:nth-of-type(2) i{animation-delay:1.8s}
@keyframes pulse{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@media (max-width:640px){
  .system{flex-direction:column;align-items:flex-start;padding:4vh 0 7vh}
  .node{grid-template-columns:11px auto auto;align-items:center;justify-items:start;gap:16px;text-align:left}
  .node .nt{max-width:none}
  .link{width:1px;height:46px;flex:0 0 46px;margin:8px 0 8px 5px;background:linear-gradient(rgba(232,225,209,.15),rgba(232,225,209,.35),rgba(232,225,209,.15))}
  .link i{top:0;left:-2px;animation-name:pulsev}
  @keyframes pulsev{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
}
@media (prefers-reduced-motion:reduce){.node .dot::after,.link i{animation:none;opacity:0}}

/* decoding statements: glyphs keep their width while they resolve */
.statement .dc{display:inline-block;text-align:center;overflow:visible}
.statement .dc.on{color:#9FB6D6}
html,body{overflow-x:clip}
.hero-plain{overflow:visible}
.hero-plain .field{left:50%;width:100vw;transform:translateX(-50%)}
a.home{display:block}
.foot .langs{margin-top:14px;justify-content:center}
.foot .langs button{font-size:11px}
.hero .dc{display:inline-block;text-align:center;overflow:visible}
.hero .dc.on,.statement .dc.on{color:#9FB6D6}
@media (min-width:900px){.hero-about .hero-img img{object-position:right 46%}}