/* ArGi Group SA — stylesheet condiviso
   Componenti UI comuni a tutte le pagine (estratti dai blocchi <style> inline).
   I token (:root), topbar, hero e i layout di pagina restano inline perche' variano per pagina. */

/* ─────── skip-link ─────── */
@font-face{
  font-family:"Goga SS02";
  src:url("fonts/goga-test-regular.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Goga SS02";
  src:url("fonts/goga-test-semibold.otf") format("opentype");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}

.wordmark,
.footer-wordmark .row1,
.pl-wordmark{
  font-feature-settings:"ss02" 1;
}

.footer-wordmark .row1{
  font-synthesis:none;
}

.footer-wordmark .argi{
  font-weight:600;
}

.footer-wordmark .group{
  font-weight:400;
}

.skip-link{
  position:fixed; left:50%; top:8px; transform:translate(-50%,-160%);
  z-index:200; background:var(--accent); color:#0a0a0a;
  font:500 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding:12px 18px; border-radius:2px;
  transition:transform .25s ease;
}
.skip-link:focus{transform:translate(-50%,0)}

/* ─────── menu ─────── */
.menu{position:relative}
.menu-trigger{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:12px;
  min-height:44px; padding:0 2px;
  border:0; background:transparent;
  color:var(--ink-soft);
  font:500 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  transition:color .34s cubic-bezier(.16,1,.3,1);
}
.menu-trigger:hover{color:var(--ink)}
.menu.open .menu-trigger{color:var(--accent)}
.menu-trigger:focus-visible{outline:1px solid var(--accent); outline-offset:8px}
.menu-trigger .bars{position:relative; width:22px; height:9px; flex:none; display:block}
.menu-trigger .bars span{
  position:absolute; left:0; width:22px; height:1px; background:currentColor;
  transform:translate3d(0,0,0); transform-origin:center;
  backface-visibility:hidden; will-change:transform;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.menu-trigger .bars span:nth-child(1){top:0}
.menu-trigger .bars span:nth-child(2){bottom:0}
.menu.open .bars span:nth-child(1){transform:translate3d(0,4px,0) rotate(45deg)}
.menu.open .bars span:nth-child(2){transform:translate3d(0,-4px,0) rotate(-45deg)}

.menu-panel{
  position:absolute; top:calc(100% + 14px); left:0;
  width:248px;
  background:var(--bg-2);
  border:1px solid var(--rule);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  padding:8px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0,-10px,0) scale(.985); transform-origin:top left;
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .34s;
  will-change:opacity, transform;
}
.menu.open .menu-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0) scale(1);
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.16,1,.3,1),
    visibility 0s;
}
.menu-panel a{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 14px;
  font:300 15px/1 var(--sans); letter-spacing:.015em;
  color:var(--ink);
  transition:background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.menu-panel a .i{
  font:500 10px/1 var(--sans); letter-spacing:.16em;
  color:var(--ink-faint); flex:none;
}
.menu-panel a:hover{background:rgba(255,255,255,.04); color:var(--accent); padding-left:18px}
.menu-panel a[aria-current="page"]{color:var(--ink)}
.menu-panel a[aria-current="page"] .i{color:var(--accent)}
@media (max-width:760px){
  .menu-panel{width:min(264px, calc(100vw - 36px))}
}

/* ─────── btn-back ─────── */
.btn-back{
  display:inline-flex; align-items:center; gap:12px;
  min-height:46px; padding:0 2px;
  font:500 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .42s cubic-bezier(.16,1,.3,1);
}
.btn-back:hover, .btn-back:focus-visible{color:var(--accent)}
.btn-back:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .btn-back{transition-duration:.001s}
}

/* ─────── transizione di pagina ─────── */
/* Sipario scuro che copre l'uscita e scopre l'ingresso: un movimento
   verso l'alto continuo da una pagina all'altra. Coerente con il sipario
   del preloader della homepage. */
.page-transition{
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  pointer-events:none;
  transform:translateY(-100%);
  animation:ptReveal .68s cubic-bezier(.16,1,.3,1) both;
}
/* hairline accento sul bordo che scorre: scopre la pagina dal basso */
.page-transition::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent);
}
.page-transition.leaving{
  animation:ptCover .5s cubic-bezier(.5,0,.25,1) forwards;
}
.page-transition.pt-instant{
  animation:none; transform:translateY(-100%);
}
@keyframes ptReveal{
  from{ transform:translateY(0) }
  to{   transform:translateY(-100%) }
}
@keyframes ptCover{
  from{ transform:translateY(100%) }
  to{   transform:translateY(0) }
}
@media (prefers-reduced-motion:reduce){
  .page-transition{ display:none }
}
.footer-fine a{transition:color .25s ease}
.footer-fine a:hover{color:var(--accent)}