.hero{--W:300px;--Hm:252px;--Ww:300px;--Hw:66px;--Gp:16px;--k:.55;--bh:600px;--SH:max(var(--stage-min),calc(100svh - var(--nav-h)));--pt:max(32px,calc((var(--SH) - var(--bh)) / 2));--ty:calc(var(--SH) / 2 - var(--pt) - (var(--Hm) + var(--Gp) + var(--Hw)) / 2);position:relative;display:flex;flex-direction:column;align-items:center;min-height:var(--SH);padding:var(--pt) var(--m) 56px;overflow:clip;background:var(--white)}
html.js .hero{margin-top:var(--nav-h)}
@media (min-width:600px){.hero{--W:520px;--Hm:437px;--Ww:440px;--Hw:96px;--Gp:24px;--bh:640px}}
.hero__group{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.hero__logo{position:relative;width:calc(var(--W) * var(--k));height:calc(var(--Hm) * var(--k));margin-bottom:calc(var(--Gp) * var(--k))}
.hero__mark,.hero__strip{position:absolute;inset:0}
.hero__strip{--l:calc(var(--i) * 12.5%);--r:calc(100% - (var(--i) + 1) * 12.5%);background:linear-gradient(105deg,#8a6a3b 0%,#ad8a55 38%,#efe0bd 48%,#ad8a55 58%,#8a6a3b 100%);background-size:300% 100%;background-position:0 0;-webkit-mask:url(../img/marchio-redesign.svg) center/contain no-repeat;mask:url(../img/marchio-redesign.svg) center/contain no-repeat;clip-path:inset(0 var(--r) 0 var(--l))}
.hero__mark::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(105deg,transparent 47%,#e8cf98 48.5%,#fff6e0 50%,#e8cf98 51.5%,transparent 53%) 100% 0/300% 100% no-repeat;mix-blend-mode:screen;-webkit-mask:url(../img/marchio-redesign.svg) center/contain no-repeat;mask:url(../img/marchio-redesign.svg) center/contain no-repeat}
.hero__word{display:block;width:calc(var(--Ww) * var(--k));height:calc(var(--Hw) * var(--k));background:var(--brown);-webkit-mask:url(../img/wordmark.svg) center/contain no-repeat;mask:url(../img/wordmark.svg) center/contain no-repeat}
.hero__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:28px;text-align:center}
.hero__copy::before{content:"";position:absolute;left:0;right:0;top:-10px;height:1px;background:var(--gold);opacity:0;pointer-events:none}
.hero__h1{max-width:none;font-family:var(--serif);font-weight:500;font-size:var(--t-h1);line-height:1.08;text-wrap:balance}
.hero__rule{display:block;width:120px;height:1px;margin-top:20px;background:var(--gold)}
.hero__body{max-width:62ch;margin-top:20px;text-wrap:pretty}
.hero__copy>.btn{margin-top:28px}
@media (min-width:600px){.hero__copy{margin-top:32px}.hero__copy>.btn{margin-top:32px}}
.hero__embers{position:absolute;left:50%;top:calc(var(--SH) / 2 - (var(--Hm) + var(--Gp) + var(--Hw)) / 2);width:var(--W);height:var(--Hm);margin-left:calc(var(--W) / -2);pointer-events:none}
.hero__amb{position:absolute;z-index:1;pointer-events:none;left:50%;top:calc(var(--SH) / 2 - (var(--Hm) + var(--Gp) + var(--Hw)) / 2);width:min(100%,calc(var(--W) * 2.2));height:var(--Hm);margin-left:calc(min(100%,calc(var(--W) * 2.2)) / -2)}
.ember{position:absolute;bottom:18%;width:6px;height:11px;background:var(--gold-soft);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0}
.hero__amb .ember{left:0;will-change:transform,opacity}
@media (max-height:700px) and (max-width:599px){.hero{--W:150px;--Hm:126px;--Ww:150px;--Hw:33px;--Gp:8px}.hero__copy{margin-top:14px}}
@media (prefers-reduced-motion:no-preference){
  html.logo-play .hero__mark{transform:translateY(10%) scale(.9)}
  html.logo-play .hero__strip{clip-path:inset(100% var(--r) 0 var(--l))}
  html.logo-play .hero__word,html.logo-play .hero__in{opacity:0}
  html.logo-play .hero__rule{transform:scaleX(0)}
  html.logo-play .hero__group{transform:translateY(var(--ty)) scale(calc(1 / var(--k)))}
  html.logo-go .hero__mark{animation:hero-lift 2.2s var(--ease) .2s both}
  html.logo-go .hero__strip{animation:hero-rise .9s var(--ease) calc(.3s + var(--p) * .07s) both}
  html.logo-go .hero__mark::after{animation:hero-glint-pos 1.1s ease-out 2.2s both,hero-glint-op 1.1s linear 2.2s both}
  html.logo-go .hero__word{animation:hero-word 1s ease-out 1.2s both}
  html.logo-go .hero__group{animation:hero-settle .8s var(--ease) 1.4s both}
  html.logo-go .hero__copy::before{animation:hero-line 1.3s linear 1.25s both}
  html.logo-go .hero__rule{animation:hero-rule .35s ease-out 2.3s both}
  html.logo-go .hero__copy>.hero__in{animation:hero-text .5s var(--ease) var(--rd) both}
  html.logo-go .hero__copy>.btn:focus-visible,html.logo-go .hero__copy>.btn.is-seen{animation:none;opacity:1}
  html.logo-go .hero__embers .ember{animation:hero-ember var(--dur) ease-out var(--delay) both}
  .hero__h1{--rd:1.4s}
  .hero__body{--rd:1.47s}
  .hero__copy>.btn{--rd:1.54s}
  html.logo-play:not(.hero-end) .consent{visibility:hidden}
  html.hero-end .consent{animation:hero-fade .4s var(--ease) both}
}
@keyframes hero-lift{from{transform:translateY(10%) scale(.9)}to{transform:none}}
@keyframes hero-rise{from{clip-path:inset(100% var(--r) 0 var(--l))}to{clip-path:inset(0 var(--r) 0 var(--l))}}
@keyframes hero-word{from{opacity:0}to{opacity:1}}
@keyframes hero-settle{from{transform:translateY(var(--ty)) scale(calc(1 / var(--k)))}to{transform:none}}
@keyframes hero-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-ember{0%{opacity:0;transform:translate(0,0) scale(var(--s))}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-300px) scale(var(--s))}}
@keyframes hero-rule{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:none}}
@keyframes hero-glint-pos{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hero-glint-op{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes hero-text{
  from{opacity:0;transform:translateY(24px);clip-path:inset(100% -8px 0 -8px)}
  to{opacity:1;transform:none;clip-path:inset(-8px -8px -8px -8px)}
}
@keyframes hero-line{
  0%{transform:scaleX(0);opacity:1;clip-path:inset(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  38%{transform:scaleX(1);opacity:1;clip-path:inset(0);animation-timing-function:linear}
  62%{transform:scaleX(1);opacity:1;clip-path:inset(0);animation-timing-function:ease-in-out}
  90%{opacity:1}
  100%{transform:scaleX(1);opacity:0;clip-path:inset(0 calc(50% - 60px) 0 calc(50% - 60px))}
}
.k3{max-width:1040px;margin:0 auto;padding:clamp(88px,9vw,160px) var(--m,24px)}
.k3__h{margin:0 auto;max-width:34ch;text-align:center;text-wrap:balance;color:var(--brown)}
.k3__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(56px,6vw,88px)}
@media (min-width:1100px){.k3{max-width:1176px;padding-inline:24px}.k3__grid{max-width:960px;margin-inline:auto}}
.k3__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.k3__fig svg{width:168px;height:168px;display:block;overflow:visible}
.k3__fig figcaption{max-width:28ch;font-size:var(--t-small);line-height:1.6;color:var(--brown-2)}
.k3__lbl{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--brown)}
@media (max-width:640px){
  .k3__grid{grid-template-columns:1fr;gap:56px}
  .k3__fig svg{width:120px;height:120px}
  .k3__fig figcaption{max-width:30ch}
}