/* Center each section on the same page axis, with labels above the content. */
* { box-sizing: border-box; }
#perche > .section-shell { flex-direction: column; align-items: center; }
#perche > .section-shell > div:first-child { flex: none !important; align-self: center !important; padding-top: 0 !important; }
#perche > .section-shell > div:last-child { flex: none !important; width: 100%; max-width: 960px; }
#perche h2, #perche p { text-align: center; }
#perche [data-reveal][style*="max-width"], #perche p { margin-inline: auto !important; }
#perche [data-reveal][style*="max-width"] { width: 100%; }
.section-heading { flex-direction: column; align-items: center; text-align: center; }
.section-heading > * { flex: none !important; align-self: center !important; }
.section-heading h2 { max-width: 1000px; }
#stampa [data-reveal] > div:first-child { justify-content: center; }
#top .hero-heading { text-align: center; font-size: clamp(26px, 7.2vw, 110px) !important; }
#top .hero-heading > span { padding-left: 0 !important; justify-content: center; }
[data-intro="ruleTop"], [data-intro="ruleBot"] { display: none; }
#contatti > .section-shell:first-child { align-items: center !important; }
#contatti > .section-shell:first-child > div { align-items: center !important; text-align: center; min-width: 0; }
#contatti > .section-shell:first-child > div:last-child > div:nth-child(2) { flex-direction: column; }
#contatti > .section-shell:first-child > div:last-child > div:last-child { justify-content: center; }
/* The section selector stays within reach on desktop and mobile. */
[data-navwrap] {
  pointer-events: auto; position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 24px; padding: 7px 22px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 0;
  background: rgba(11,12,15,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF; font-size: 12px; font-weight: 400; letter-spacing: .02em; white-space: nowrap;
  animation: nav-enter 700ms cubic-bezier(.2,.7,.2,1) both;
}
/* Fine extensions echo the horizontal strokes of the Seiza mark. */
[data-navwrap]::before, [data-navwrap]::after {
  content: ''; position: absolute; width: 12px; height: 1px;
  background: rgba(255,255,255,.4); pointer-events: none;
}
[data-navwrap]::before { right: 100%; top: -1px; }
[data-navwrap]::after { left: 100%; bottom: -1px; }
[data-navwrap] a { position: relative; padding-block: 4px; }
[data-navwrap] a:hover, [data-navwrap] a:focus-visible { color: #1EA0FF; }
[data-navline] {
  position: absolute; bottom: 5px; left: 0; width: 1px; height: 1px;
  background: #1EA0FF; opacity: 0; transform-origin: left center;
  transition: transform 450ms cubic-bezier(.2,.7,.2,1), opacity 200ms;
  pointer-events: none;
}
@keyframes nav-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 819px) {
  [data-navwrap] {
    position: fixed !important; top: 78px; bottom: auto;
    width: calc(100% - 40px); max-width: 380px; display: flex;
    justify-content: space-around; gap: 4px; padding: 0 10px;
    background: rgba(11,12,15,.48); font-size: clamp(10px, 2.8vw, 11px);
  }
  [data-navwrap] a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px; }
  [data-navline] { bottom: 7px; }
  html { scroll-padding-top: 140px; }
  .hero-content { padding-top: 148px !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-navwrap] { animation: none; }
  [data-navwrap] a, [data-navline] { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a:focus-visible { outline: 2px solid #1EA0FF; outline-offset: 5px; }

[data-hover="0"]:hover { background: #FFFFFF; color: #0B0C0F; }
[data-hover="1"]:hover { background: #FFFFFF; color: #0B0C0F; }
[data-hover="2"]:hover { background: #FFFFFF; color: #0B0C0F; }
[data-hover="3"]:hover { border-color: #FFFFFF; color: #FFFFFF; }

.founder-portrait { width: clamp(160px, 18vw, 240px); aspect-ratio: 4 / 5; overflow: hidden; background: #25272b; }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1); }

/* The S opens into the two title lines without blocking page interaction. */
.intro-pending [data-intro="textTop"],
.intro-pending [data-intro="textBot"],
.intro-pending [data-intro="heroFoot"] { opacity: 0; }
.intro-mark { position: absolute; left: 0; width: 100%; height: clamp(150px, 23.6vw, 340px); transform: translateY(-50%); color: #FFFFFF; pointer-events: none; }
.intro-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .intro-mark { display: none; }
  .intro-pending [data-intro="textTop"],
  .intro-pending [data-intro="textBot"],
  .intro-pending [data-intro="heroFoot"] { opacity: 1 !important; }
}