/* The Human wAI — brand kit tokens: fixed palette, Funnel Display, pixel vs soft */
@font-face { font-family: 'Funnel Display'; src: url('../asset/font/FunnelDisplay-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('../asset/font/FunnelDisplay-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('../asset/font/FunnelDisplay-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('../asset/font/FunnelDisplay-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Funnel Display'; src: url('../asset/font/FunnelDisplay-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --navy: #00145b;
  --verde: #95ef3f;
  --azzurro: #0f89ed;
  --celeste: #56b4f4;
  --bianco: #ffffff;
  --mist: #f2f3f5;
  --navy-soft: #36467f;
  --navy-line: #c9cfe0;
  --on-navy-soft: #c4cdea;
  --gradient: linear-gradient(100deg, var(--celeste) 0%, var(--verde) 100%);
  --font: 'Funnel Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pad: 2.5rem;
  --pad-y: clamp(4.5rem, 9vw, 8rem);
  --nav-h: 72px;
  --s: 4px;
  --ease: cubic-bezier(.16,1,.3,1);
  /* Pixel dissolve from the key visual: 21.87pt tiles on a 1920 canvas = 1.14vw.
     The white side keeps the hairline tile seams of the PDF */
  --tile: clamp(12px, 1.14vw, 24px);
  --seam: #dcefe0;
  --seam-grid:
    linear-gradient(to right, var(--seam) 1px, transparent 1px) 0 0 / var(--tile) var(--tile),
    linear-gradient(to bottom, var(--seam) 1px, transparent 1px) 0 0 / var(--tile) var(--tile);
  /* Stepped pill from the kit's CTA Button */
  --pixel-clip: polygon(
    calc(var(--s) * 3) 0, calc(100% - var(--s) * 3) 0,
    calc(100% - var(--s) * 3) var(--s), calc(100% - var(--s) * 2) var(--s),
    calc(100% - var(--s) * 2) calc(var(--s) * 2), calc(100% - var(--s)) calc(var(--s) * 2),
    calc(100% - var(--s)) calc(var(--s) * 3), 100% calc(var(--s) * 3),
    100% calc(100% - var(--s) * 3), calc(100% - var(--s)) calc(100% - var(--s) * 3),
    calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s) * 2) calc(100% - var(--s) * 2),
    calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 3) calc(100% - var(--s)),
    calc(100% - var(--s) * 3) 100%, calc(var(--s) * 3) 100%,
    calc(var(--s) * 3) calc(100% - var(--s)), calc(var(--s) * 2) calc(100% - var(--s)),
    calc(var(--s) * 2) calc(100% - var(--s) * 2), var(--s) calc(100% - var(--s) * 2),
    var(--s) calc(100% - var(--s) * 3), 0 calc(100% - var(--s) * 3),
    0 calc(var(--s) * 3), var(--s) calc(var(--s) * 3),
    var(--s) calc(var(--s) * 2), calc(var(--s) * 2) calc(var(--s) * 2),
    calc(var(--s) * 2) var(--s), calc(var(--s) * 3) var(--s)
  );
}

* { box-sizing: border-box; }
/* main.js shows and hides the menu, consent box, "Altro" field and form messages with [hidden] */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  scrollbar-color: var(--navy) var(--mist);
}
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.5;
  background: var(--bianco); color: var(--navy);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--verde); color: var(--navy); }
button, input, select { font-family: inherit; font-weight: 500; color: inherit; }
input { caret-color: var(--azzurro); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; }

/* === PRIMITIVES ======================================================= */
.container { max-width: 1240px; margin: 0 auto; position: relative; }
.section {
  padding: var(--pad-y) var(--pad);
  position: relative;
  scroll-margin-top: var(--nav-h);
}
.section--navy { background: var(--navy); color: var(--bianco); overflow: hidden; }
.section--gradient { background: var(--gradient); }
.section--mist { background: var(--mist); }

.jimbo, .pix {
  display: inline-block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

/* Key-visual headline */
.tilt {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.tilt__line { display: block; transform-origin: left center; }
.tilt__line:nth-child(1) { transform: rotate(-2deg); }
.tilt__line:nth-child(2) { transform: rotate(-0.5deg); margin-left: 0.5em; }
.tilt__line:nth-child(3) { transform: rotate(1deg); margin-left: 0.2em; }

/* === BUTTONS: stepped pill ============================================ */
.btn {
  --btn-bg: var(--navy); --btn-ink: var(--bianco);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 0;
  background: var(--navy); color: var(--btn-ink);
  clip-path: var(--pixel-clip);
  font-family: var(--font); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; text-align: center;
  cursor: pointer; text-decoration: none; user-select: none;
  transition: color 0s linear .05s;
}
.btn::before {
  content: ''; position: absolute; inset: 3px; z-index: -1;
  background: var(--btn-bg);
  clip-path: var(--pixel-clip);
  transition: background .2s steps(3);
}
.btn:hover { --btn-bg: var(--verde); --btn-ink: var(--navy); }
.btn:focus-visible { outline: 3px solid var(--verde); outline-offset: -8px; }
.btn:disabled { cursor: progress; --btn-bg: var(--navy-soft); --btn-ink: var(--bianco); }
.btn--ghost { --btn-bg: var(--bianco); --btn-ink: var(--navy); }
.btn--ghost:hover { --btn-bg: var(--navy); --btn-ink: var(--bianco); }
.btn--ghost:focus-visible { outline-color: var(--azzurro); }
.btn--verde { --btn-bg: var(--verde); --btn-ink: var(--navy); background: var(--verde); }
.btn--verde:hover { --btn-bg: var(--bianco); }
.btn.lg { min-height: 56px; padding: 0.85rem 2rem; font-size: 1rem; }
.btn.full { width: 100%; }

/* === NAV ============================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 var(--pad);
  background: var(--bianco);
}
.nav__brand { display: block; }
.nav__brand-logo { height: 54px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); margin-left: auto; margin-right: 1rem; }
.nav__link { font-size: 0.98rem; font-weight: 600; text-decoration: none; }
.nav__link:hover { text-decoration: underline; color: var(--azzurro); }
.nav__cta { min-height: 44px; padding: 0.5rem 1.15rem; font-size: 0.82rem; }
.nav__hamburger, .mobile-menu__close {
  display: none;
  width: 44px; height: 44px; padding: 10px;
  background: transparent; color: inherit;
  border: 0; cursor: pointer;
}
.nav__hamburger svg, .mobile-menu__close svg { display: block; width: 100%; height: 100%; }
.is-mobile { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--navy); color: var(--bianco);
  padding: calc(var(--nav-h) + 1.25rem) 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 2rem;
  overflow-y: auto;
  animation: fadeDown .3s var(--ease);
}
.mobile-menu__close { display: block; position: absolute; top: 14px; right: 1.1rem; }
.mobile-menu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.mobile-menu__list a {
  display: block; padding: 0.6rem 0;
  font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--verde); }

/* === REVEAL =========================================================== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }

/* === HERO: the 6x3 key visual ========================================= */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  min-height: calc(100svh - var(--nav-h));
  background: var(--gradient);
  overflow: hidden;
}
.hero__copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(1.1rem, 2.4vh, 1.75rem);
  /* Text stops where the dissolve turns mostly white (4th tile column from the panel) */
  padding: clamp(1.5rem, 4vh, 3rem) calc(var(--tile) * 12 + 1rem) clamp(1.5rem, 4vh, 3rem) clamp(2rem, 6vw, 6rem);
}
.hero__lockup { position: relative; width: min(100%, 520px, 58vh); }
.hero__title { line-height: 0; }
.hero__title img { width: 100%; height: auto; }
.hero__hosts {
  position: absolute; top: -7%; right: 11%;
  width: 29%;
  display: grid; justify-items: end; gap: 0.3rem;
  transform: rotate(-7deg);
}
.hero__hosts img { width: 100%; height: auto; }
.hero__hosts img + img { width: 82%; }
.hero__payoff {
  font-size: clamp(1.25rem, min(2.1vw, 3.4vh), 1.85rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.01em;
}
.hero__payoff span { display: block; }
.hero__payoff span:nth-child(2) { margin-left: 1.1em; }
.hero__payoff span:nth-child(3) { margin-left: 0.5em; }
.hero__when { display: grid; gap: 0.45rem; }
.hero__date { width: clamp(240px, min(26vw, 42vh), 400px); }
.hero__when p { font-weight: 600; font-size: 1.05rem; }
.hero__ctas { display: none; }
.hero__star { position: absolute; color: var(--bianco); animation: twinkle 3.2s steps(2) infinite; }
.hero__star--a { width: 46px; top: 8%; left: 6%; }
.hero__star--b { width: 24px; top: 14%; left: 11%; animation-delay: 1.1s; }

/* 16 tile columns copied from the key visual; the panel starts at 1.28 / 2.28 = 56.14% */
.hero__edge {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(56.14% - var(--tile) * 16);
  width: calc(var(--tile) * 16);
  background: url('../asset/pixel/dissolve-v.svg') left top / 100% auto repeat-y;
  animation: edgeSnap .9s steps(7) both;
}
/* Tiles that slowly come and go inside the dissolve (PixelDrift) */
.drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.drift__tile {
  position: absolute;
  background-color: var(--bianco);
  box-shadow: inset 1px 1px 0 var(--seam);
  opacity: 0;
  animation: drift 5s ease-in-out both;
}
.drift__tile.is-hole { box-shadow: none; }
.drift__tile.is-travel {
  animation-name: travelMove, travelFade;
  animation-timing-function: steps(var(--n)), linear;
}
.is-paused .drift__tile { animation-play-state: paused; }
/* Measuring stick for PixelDrift: one tile wide, --drift-shift tiles tall */
.drift__probe { position: absolute; visibility: hidden; width: var(--tile); height: calc(var(--tile) * var(--drift-shift, 0)); }
.hero__panel {
  position: relative; z-index: 2;
  background: var(--seam-grid), var(--bianco);
  padding: clamp(1.5rem, 3.5vh, 2.5rem) clamp(1.75rem, 4vw, 4rem) clamp(1.5rem, 3.5vh, 2.5rem) clamp(1rem, 2vw, 2rem);
  display: flex; align-items: center;
}
.hero__panel .form-card { width: 100%; max-width: 520px; }
.hero__panel .tilt { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }

/* === CONCEPT ========================================================== */
.concept-head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.concept-head .tilt { font-size: clamp(2.5rem, 4.7vw, 4.1rem); }
.concept-dove { height: 0.86em; vertical-align: -0.06em; margin-left: 0.08em; color: var(--azzurro); }
.concept-text { display: grid; gap: 1rem; max-width: 34rem; font-size: 1.125rem; color: var(--navy-soft); }

/* The duo: AI lane left, people lane right, a dotted spine between them. Cards span two half-rows
   and alternate lanes, so they interlock like a zip. AI = stepped pixel card on the gradient with a square
   node; people = soft round navy card with a round node (shape carries the meaning, not colour alone) */
.duo { --gap: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.duo__lane { display: grid; gap: 0.35rem; align-content: end; padding-bottom: 1.5rem; border-bottom: 2px solid var(--navy); }
.duo__lane h3 {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em;
}
.duo__lane h3::before { content: ''; flex: none; width: 0.62em; height: 0.62em; }
.duo__lane--ai h3::before { background: var(--gradient); }
.duo__lane--people h3::before { background: var(--navy); border-radius: 50%; }
.duo__lane p { font-size: 1.125rem; font-weight: 600; color: var(--navy-soft); }

.duo__zip {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: inherit; column-gap: inherit; grid-auto-rows: minmax(3.25rem, auto);
  margin: 0; padding: 1.75rem 0 0.5rem; list-style: none;
}
/* the spine: a pixel-dotted line where the two lanes meet */
.duo__zip::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px;
  background: repeating-linear-gradient(to bottom, var(--navy) 0 4px, transparent 4px 10px);
}
.duo__item { grid-row: var(--row); position: relative; display: grid; align-items: center; margin-block: 0.3rem; }
.duo__item--ai { grid-column: 1; }
.duo__item--people { grid-column: 2; }
/* stub + node joining each card to the spine */
.duo__item::before, .duo__item::after { content: ''; position: absolute; top: 50%; }
.duo__item::before { width: calc(var(--gap) / 2); height: 2px; margin-top: -1px; background: var(--navy); }
.duo__item::after { width: 16px; height: 16px; margin-top: -8px; background: var(--navy); }
.duo__item--ai::before { left: 100%; }
.duo__item--ai::after { left: calc(100% + var(--gap) / 2 - 8px); }
.duo__item--people::before { right: 100%; }
.duo__item--people::after { right: calc(100% + var(--gap) / 2 - 8px); border-radius: 50%; }

.duo__card { display: grid; gap: 0.4rem; padding: 1.4rem 1.6rem 1.5rem; }
.duo__card strong { font-size: clamp(1.6rem, 2.7vw, 2.35rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.duo__card span { font-size: 1.0625rem; line-height: 1.35; font-weight: 500; }
.duo__card b { font-weight: 800; }
.duo__item--ai .duo__card { background: var(--gradient); color: var(--navy); --s: 6px; clip-path: var(--pixel-clip); }
.duo__item--people .duo__card { background: var(--navy); color: var(--bianco); border-radius: 1.75rem; }
.duo__item--people .duo__card b { color: var(--verde); }

/* On reveal the AI cards snap in by steps from their lane, the people cards glide in: rigid against soft */
.duo.in .duo__card { animation: cardSoft .8s var(--ease) both; animation-delay: calc(var(--i) * 110ms + .3s); }
.duo.in .duo__item--ai .duo__card { animation-name: cardPixel; animation-duration: .5s; animation-timing-function: steps(4, end); }
@keyframes cardPixel { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes cardSoft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* The lane names the subject on wide screens, so the card's own subject is for screen readers only;
   stacked, it becomes visible and every card reads on its own */
.duo__who {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.concept-close {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 2.25rem;
}
.concept-close p {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  transform: rotate(-0.6deg); transform-origin: left center;
}
.concept-close__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em;
}
.concept-close__link svg { width: 14px; height: 14px; fill: currentColor; }
.concept-close__link:hover { color: var(--azzurro); }

/* === CASE ============================================================= */
.case-chip {
  position: absolute; right: -60px; top: clamp(2rem, 6vw, 4.5rem);
  width: clamp(200px, 30vw, 420px);
  color: var(--azzurro); opacity: .9;
}
.case-intro { margin-top: 1.5rem; max-width: 37rem; font-size: 1.1875rem; color: var(--on-navy-soft); }
/* Electra and Mia: who made them (Brainpull), then one row per agent:
   identity badge on the left, problem → operations → the person it works next to on the right */
.assistants { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
.maker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.maker__logo { height: clamp(30px, 3.4vw, 44px); width: auto; }
.maker p { max-width: 36rem; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.25; color: var(--on-navy-soft); }
.maker strong { color: var(--bianco); font-weight: 700; }

/* Agent: badge and headline side by side, then the story strip across the full width */
.agent {
  --tone: var(--verde); --strap: clamp(3rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.agent.assistant--celeste { --tone: var(--celeste); }
.agent .assistant { max-width: 470px; }
.agent__headline { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; max-width: 14em; }
.agent__who { color: var(--tone); }

/* The strip: three panels, each a pixel scene over a label, one bold line and one note.
   The arrow in the gutter lights up once its panel has played */
.story {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem);
}
.story__panel { display: grid; align-content: start; gap: 1.1rem; }
.scene { position: relative; }
.scene__stage {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  background:
    linear-gradient(to top, rgba(255, 255, 255, .09) 12%, transparent 12%),
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 6.25% 10%,
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 6.25% 10%,
    rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
  transition: opacity .4s ease, box-shadow .4s ease;
}
.story:not([data-still]) .story__panel:not(.is-on) .scene__stage { opacity: .6; }
.story:not([data-still]) .story__panel.is-done .scene__stage { opacity: .8; }
.story__panel.is-on .scene__stage { box-shadow: inset 0 0 0 3px var(--tone); }
.scene__arrow {
  position: absolute; top: 50%; left: 100%; width: 16px; height: 16px;
  margin: -8px 0 0 calc(clamp(2rem, 3.5vw, 3rem) / 2 - 8px);
  fill: rgba(255, 255, 255, .3); transition: fill .3s ease;
}
.story[data-still] .scene__arrow, .is-done .scene__arrow, .is-on .scene__arrow { fill: var(--tone); }

/* Sprites are sized on the stage height, so the scene holds at any panel width */
.scene__who, .scene__bot, .scene__b { position: absolute; }
.scene__who { bottom: 12%; height: 46%; aspect-ratio: 1; }
.scene__who .pixel-avatar { width: 100%; height: 100%; }
.scene__op { left: 8%; z-index: 1; }
.scene__client { right: 8%; }
.scene__bot { bottom: 12%; height: 52%; aspect-ratio: 18 / 20; }
.scene__b { height: 27%; aspect-ratio: 1; transform-origin: 0 100%; }
.scene--0 .scene__b--ask { left: 34%; top: 8%; }
.scene__b--bang0 { right: 34%; top: 14%; }
.scene__b--bang1 { right: 18%; top: 4%; }
.scene__b--bang2 { right: 4%; top: 18%; }
.scene--1 .scene__bot { left: 50%; }
.scene__b--card { left: 33%; top: 6%; }
.scene--2 .scene__bot { left: 3%; height: 40%; }
.scene--2 .scene__op { left: 27%; }
.scene--2 .scene__client { right: 5%; }
.scene__b--ok { left: 46%; top: 8%; }

/* What plays when a panel lights up: the requests pile up, the agent walks in by steps, the answer pops */
.is-on .scene__b { animation: bubblePop .45s steps(3, end) both .35s; }
.is-on .scene__b--bang1 { animation-delay: .8s; }
.is-on .scene__b--bang2 { animation-delay: 1.25s; }
.is-on .scene__bot--enter { animation: botEnter 1s steps(6, end) both .2s; }
.is-on .scene__b--card { animation-delay: 1.4s; }
.is-on .scene__bot--side { animation: botEnter .5s steps(3, end) both; }
.is-on .scene__b--ok { animation-delay: .8s; }
@keyframes bubblePop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes botEnter { from { transform: translateX(-180%); } to { transform: none; } }

.story__label { margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-soft); transition: color .3s ease; }
.story[data-still] .story__label, .is-on .story__label { color: var(--tone); }
.story__title { margin-top: 0.4rem; font-size: clamp(1.125rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.2; color: var(--bianco); }
.story__note { margin-top: 0.4rem; font-size: 1rem; line-height: 1.4; color: var(--on-navy-soft); }

.assistants__team { display: flex; align-items: center; gap: 1rem 1.5rem; }
.assistants__team p { max-width: 40rem; font-size: 1.125rem; color: var(--on-navy-soft); }
.assistants__team strong { color: var(--bianco); font-weight: 700; }
.team-faces { list-style: none; margin: 0; padding: 0; display: flex; flex: none; }
.team-faces li {
  width: 60px; height: 60px; margin-left: -10px;
  background: var(--gradient);
  --s: 4px; clip-path: var(--pixel-clip);
  box-shadow: 0 0 0 3px var(--navy);
}
.team-faces li:first-child { margin-left: 0; }
.team-faces .pixel-avatar { width: 100%; height: 100%; }
.pixel-avatar { display: block; }

/* Each badge hangs from its lanyard and sways slowly, as if just clipped on (--tone, --strap from .agent) */
.assistant__hang {
  position: relative;
  margin-top: var(--strap);
  transform-origin: 50% calc(var(--strap) * -1);
  animation: sway 7s ease-in-out infinite alternate;
}
.assistant--celeste .assistant__hang { animation-duration: 8.5s; animation-delay: -4s; }
.assistant__strap {
  position: absolute; z-index: 2;
  bottom: calc(100% - 26px); left: 50%;
  width: 24px; margin-left: -12px;
  height: calc(var(--strap) + 26px);
  /* stitched fabric: two navy seams on the brand tone, fading up into the section */
  background:
    linear-gradient(90deg, transparent 0 4px, var(--navy) 4px 6px, transparent 6px 18px, var(--navy) 18px 20px, transparent 20px),
    var(--tone);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%);
  mask-image: linear-gradient(to bottom, transparent, #000 50%);
}
/* Metal clip into the badge slot */
.assistant__strap::after {
  content: ''; position: absolute; bottom: 0; left: -4px; right: -4px; height: 16px;
  background: var(--mist);
  box-shadow: inset 0 0 0 3px var(--navy-soft);
}

.badge {
  position: relative;
  background: var(--bianco); color: var(--navy);
  --s: 8px; clip-path: var(--pixel-clip);
}
/* Lanyard slot */
.badge::before {
  content: ''; position: absolute; top: 14px; left: 50%;
  width: 56px; height: 10px; margin-left: -28px;
  background: var(--navy);
}
.badge__top {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 2.4rem 1.5rem 0.9rem;
  background: var(--tone);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.badge__maker { height: 20px; width: auto; }
.badge__id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.5rem 1.5rem 0; }
/* ID photo: the assistant as an animated pixel robot */
.badge__photo {
  position: relative; display: block;
  width: clamp(100px, 9.5vw, 128px); aspect-ratio: 1 / 1.15;
  background:
    linear-gradient(to right, #1b2a6b 1px, transparent 1px) 0 0 / 12.5% 10.87%,
    linear-gradient(to bottom, #1b2a6b 1px, transparent 1px) 0 0 / 12.5% 10.87%,
    var(--navy);
  --s: 4px; clip-path: var(--pixel-clip);
}
.bot { position: absolute; inset: 0; }
.bot__body { position: absolute; left: 8%; bottom: 3%; width: 84%; animation: botBob 1.3s steps(1) infinite; }
.bot--mia .bot__body { animation-delay: -0.6s; }
.bot__blink { opacity: 0; animation: botBlink 4.6s steps(1) infinite; }
.bot--mia .bot__blink { animation-delay: -2.1s; }
.bot__frame { animation: botFrame 0.9s steps(1) infinite; }
.bot__frame--1 { animation-delay: -0.45s; }
.bot__bulb { position: absolute; top: 5%; right: 7%; width: 13%; animation: botGlow 2.6s ease-in-out infinite; }
.bot__bubble { position: absolute; top: 4%; right: 4%; width: 32%; }
.bot__dot { animation: botType 1.2s steps(1) infinite; }
.badge__name { line-height: 0; }
.badge__name .jimbo { display: block; height: clamp(2.4rem, 4vw, 3.3rem); width: auto; max-width: 100%; }
.badge__role { margin-top: 0.5rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.badge__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1.25rem; padding: 0.9rem 1.5rem 1rem;
  background: var(--mist); color: var(--navy);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em;
}
.badge__code {
  flex: none; width: 84px; height: 22px;
  background: repeating-linear-gradient(90deg,
    var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 7px,
    transparent 7px 8px, var(--navy) 8px 9px, transparent 9px 12px);
}

.proofs {
  list-style: none; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.proofs li { display: grid; gap: 0.5rem; align-content: start; }
.proofs__star { width: 30px; color: var(--verde); }
.proofs strong { font-size: 1.375rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
.proofs span:not(.pix) { color: var(--on-navy-soft); line-height: 1.4; }

/* === PROGRAM ========================================================== */
.program { overflow: hidden; }
.program__shape {
  position: absolute; left: 0; top: clamp(1rem, 4vw, 3rem);
  width: clamp(190px, 25vw, 340px); height: auto;
  image-rendering: pixelated;
}
.program__corner {
  position: absolute; right: 0; top: 0;
  width: clamp(150px, 19vw, 260px); height: auto;
  image-rendering: pixelated;
}
.program__head {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1.25rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.program__head p { font-size: 1.125rem; font-weight: 600; max-width: 22rem; }
/* Two columns that read top-down: before the coffee break on the left, after it on the right */
.agenda {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.agenda__row {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.75rem; align-items: baseline;
  padding: 0.8rem 0.6rem;
  border-bottom: 1px solid var(--navy-line);
  background: var(--bianco);
}
.agenda__row:nth-child(1), .agenda__row:nth-child(6) { border-top: 2px solid var(--navy); }
.agenda__row.reveal { transform: none; }
.agenda__time { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.agenda__body h3 { font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.agenda__body p { margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.4; color: var(--navy-soft); }
.agenda__who {
  display: inline-block; margin-left: 0.5rem; padding: 0 0.4rem;
  background: var(--mist); color: var(--navy);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.agenda__row--pause { background: var(--mist); }
.agenda__row--pause .agenda__body h3 { font-size: 1rem; }
.agenda__row--coffee { background: var(--gradient); align-items: center; padding-block: 0.65rem; }
.agenda__coffee { display: flex; align-items: center; gap: 0.5rem; transform: rotate(-1.2deg); }
.agenda__coffee .jimbo { height: clamp(1.3rem, 1.8vw, 1.6rem); }
.agenda__cup { width: 44px; margin-left: auto; color: var(--mist); transform: rotate(9deg); }

/* === AUDIENCE ========================================================= */
.audience__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.audience__text { margin-top: 1.5rem; max-width: 36rem; font-size: 1.1875rem; font-weight: 600; }
/* The three outcomes as white pixel tags: they read at a glance on the gradient,
   and stay distinct from the navy CTA so nobody mistakes them for buttons */
.audience { overflow: hidden; } /* the sitter walks off past the edge */
.audience__list {
  list-style: none; margin: 1.75rem 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.audience__list li {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.1rem 0.65rem 0.9rem;
  background: var(--bianco); color: var(--navy);
  --s: 4px; clip-path: var(--pixel-clip);
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
}
.audience__list li::before {
  content: ''; flex: none; width: 12px; height: 12px;
  background: var(--verde); box-shadow: inset 0 0 0 2px var(--navy);
}
.sticker-chair { position: relative; justify-self: center; width: min(100%, 340px); color: var(--mist); }
.sticker-chair__icon { display: block; width: 100%; }
/* The tag hangs on the chair legs, so the seat stays free for the sitter */
.sticker-chair__label {
  position: absolute; left: 4%; right: 6%; top: 71%;
  padding: 0.35em 0.4em 0.45em;
  background: var(--bianco); color: var(--navy); text-align: center;
  --s: 4px; clip-path: var(--pixel-clip);
  font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
  transform: rotate(-3deg);
}
/* Sitter: placed on the seat (chair artwork: back to 42%, seat 42–69%).
   Standing on the floor = 27% of its own height lower than seated. */
.sitter { position: absolute; left: 14%; top: 11%; width: 72%; aspect-ratio: 18 / 23; }
.sitter svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sitter__walk, .sitter__seated { opacity: 0; }
.sitter__walk { position: absolute; inset: 0; }
/* One 6.5s loop shared by both sprites: walk in, sit, stay, get up, walk off */
.sticker-chair.in .sitter__walk { animation: sitterWalk 6.5s infinite; }
.sticker-chair.in .sitter__seated { animation: sitterSit 6.5s infinite; }
/* Two walking frames, never both on screen */
.sticker-chair.in .sitter__step--a { animation: botFrame 0.26s steps(1) infinite; }
.sticker-chair.in .sitter__step--b { animation: botFrame 0.26s steps(1) -0.13s infinite; }
.sticker-chair__label span { display: block; }
.sticker-chair__label .jimbo { display: block; width: 100%; margin-top: 0.1em; }

/* === SPEAKER ========================================================== */
.speakers__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.speakers__title { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.sticker-mic { position: relative; flex: none; width: clamp(96px, 9vw, 130px); color: var(--azzurro); transform: rotate(8deg); }
.sticker-mic__icon { display: block; width: 100%; }
.sticker-mic__label {
  position: absolute; left: 5%; top: 67%;
  width: 52%; color: var(--bianco);
  transform: rotate(-57deg);
}
.stage-nav { display: flex; gap: 0.5rem; flex: none; }
.stage-nav__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border: 0;
  background: var(--navy); color: var(--bianco);
  --s: 4px; clip-path: var(--pixel-clip);
  cursor: pointer;
  transition: background-color .2s steps(3), color .2s steps(3);
}
.stage-nav__btn svg { width: 18px; height: 18px; fill: currentColor; }
.stage-nav__btn:hover:not(:disabled) { background: var(--verde); color: var(--navy); }
.stage-nav__btn:disabled { opacity: 0.25; cursor: default; }
.stage-nav__btn:focus-visible { outline: 3px solid var(--verde); outline-offset: -7px; }

.stage__track {
  list-style: none; margin: 0; padding: 0 0 1.25rem;
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.stage__track::-webkit-scrollbar { display: none; }
.stage__track:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 4px; }
.stage-card {
  flex: 0 0 clamp(250px, 23%, 290px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--mist);
  --s: 8px; clip-path: var(--pixel-clip);
}
.stage-card__portrait {
  position: relative;
  display: grid; place-items: end center;
  aspect-ratio: 1 / 0.9; overflow: hidden;
  background: var(--gradient);
}
.stage-card:nth-child(3n+2) .stage-card__portrait { background: var(--celeste); }
.stage-card:nth-child(3n) .stage-card__portrait { background: var(--verde); }
.stage-card.is-coming .stage-card__portrait { background: var(--navy-line); }
.stage-card__portrait .pixel-avatar { width: 76%; height: auto; }
.stage-card__photo { width: 100%; height: 100%; object-fit: cover; }
.stage-card__company {
  position: absolute; top: 0.85rem; left: 0.85rem;
  padding: 0.2rem 0.55rem;
  background: var(--bianco); color: var(--navy);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.stage-card__body { flex: 1; display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.15rem 1.3rem; }
.stage-card__name { font-size: 1.4rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.stage-card.is-coming .stage-card__name { color: var(--azzurro); }
.stage-card__role { color: var(--navy-soft); line-height: 1.3; }
.stage-card__talk {
  display: grid; gap: 0.3rem; justify-items: start;
  margin-top: 0.65rem; padding-top: 0.7rem; border-top: 2px solid var(--navy);
  font-size: 0.95rem; font-weight: 600; line-height: 1.3;
}
.stage-card__talk time { padding: 0 0.4rem; background: var(--verde); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em; }
.stage__progress { height: 6px; background: var(--mist); }
.stage__progress span { display: block; height: 100%; background: var(--navy); transform-origin: left; transition: transform .3s var(--ease); }

/* === LOCATION ========================================================= */
.location-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.location-info { display: grid; gap: 1.5rem; justify-items: start; }
.location-info .tilt { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.location-info p { font-size: 1.125rem; max-width: 26rem; }
.location-map { --s: 8px; clip-path: var(--pixel-clip); min-height: 400px; background: var(--navy-line); }
.location-map iframe { display: block; width: 100%; height: 100%; min-height: 400px; border: 0; }

/* === PARTNER ========================================================== */
.partner-rows { display: grid; gap: 0; border-top: 2px solid var(--navy); }
.partner-row {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem 2rem; align-items: center;
  padding: 1.75rem 0.25rem;
  border-bottom: 1px solid var(--navy-line);
}
.partner-row.reveal { transform: none; }
.partner-row h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.partner-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(2rem, 5vw, 4rem); }
.partner-row img { height: 28px; width: auto; }
.partner-row [data-partner="metamer"] img { height: 46px; }
.partner-row [data-partner="forbes"] img { height: 32px; }
.partner-row span { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }

/* === FORM ============================================================= */
/* 16 dissolve rows plus 3 white rows whose seams fade into the section above */
.form-section { padding-top: calc(var(--tile) * 19 + clamp(2rem, 4vw, 3.5rem)); overflow: hidden; }
.form-section__edge {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--tile) * 19);
  background: url('../asset/pixel/dissolve-h-end.svg') left top / auto 100% repeat-x;
  transform: scaleY(-1);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.form-copy { display: grid; gap: 1.5rem; justify-items: start; }
.form-copy__logo { width: min(100%, 400px); height: auto; }
.form-copy__date { width: min(100%, 340px); }
.form-copy p { max-width: 26rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.4; }
.form-copy strong { font-weight: 800; }
.form-touchpoints { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 700; }
.form-touchpoints a:hover { color: var(--bianco); }

.form-card { color: var(--navy); }
.form-section .form-card { background: var(--bianco); padding: clamp(1.5rem, 3vw, 2.5rem); --s: 8px; clip-path: var(--pixel-clip); }
.form-section .form-card .btn { --s: 4px; }
.form-card__head { display: grid; gap: 0.85rem; margin-bottom: 1.25rem; }
.form-card__head .tilt { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.form-card__head p { color: var(--navy-soft); line-height: 1.35; }
.form-card form { display: grid; gap: 0.8rem; }
.field { display: grid; gap: 0.25rem; min-width: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field__label { font-size: 0.875rem; font-weight: 600; }
.field input, .field select {
  appearance: none;
  width: 100%; min-width: 0; height: 44px;
  padding: 0 0.8rem;
  border: 2px solid var(--navy); border-radius: 0;
  background: var(--bianco); color: var(--navy);
  font-size: 1rem;
  transition: box-shadow .15s ease;
}
.field input:focus, .field select:focus { outline: 0; border-color: var(--azzurro); box-shadow: 0 0 0 3px var(--celeste); }
.field input::placeholder { color: #5d6a97; opacity: 1; }
/* Pixel chevron, drawn on the 7x4 grid of the kit icons */
.field select {
  padding-right: 2.6rem;
  background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%2300145b' d='M0 0h2v1H0zM5 0h2v1H5zM1 1h2v1H1zM4 1h2v1H4zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E") right 0.85rem center / 14px 8px no-repeat;
  text-overflow: ellipsis; cursor: pointer;
}
.field select:hover { background-color: var(--mist); }
.field select.is-empty { color: #5d6a97; }
.field select option, .field select optgroup { color: var(--navy); background: var(--bianco); }
.field__other { margin-top: 0.4rem; animation: fadeDown .3s var(--ease); }
.check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.3; color: var(--navy-soft); cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; margin: 1px 0 0; border: 2px solid var(--navy); border-radius: 0; background: var(--bianco); flex: 0 0 auto; cursor: pointer; }
.check input:checked { background: var(--navy); box-shadow: inset 0 0 0 3px var(--verde); }
.form-consent { display: grid; gap: 0.4rem; animation: fadeDown .3s var(--ease); }
.form-consent__intro, .form-consent__note { font-size: 0.875rem; line-height: 1.35; color: var(--navy-soft); }
.form-consent__all {
  justify-self: start; padding: 0.15rem 0;
  background: transparent; border: 0;
  font-weight: 700; font-size: 0.875rem; color: var(--navy);
  text-decoration: underline; cursor: pointer;
}
.form-error {
  padding: 0.65rem 0.8rem;
  background: var(--navy); color: var(--bianco);
  font-size: 0.95rem; font-weight: 600; line-height: 1.3;
}
.form-success {
  display: grid; gap: 0.75rem; justify-items: start;
  padding: 1.75rem;
  background: var(--verde); color: var(--navy);
  animation: fadeDown .4s var(--ease);
}
.form-success h3 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.form-success p { line-height: 1.4; }

/* === FOOTER =========================================================== */
.footer-mini {
  padding: 1.5rem var(--pad);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
  background: var(--navy); color: var(--bianco);
  font-size: 0.9rem;
}
.footer-mini__brand { display: inline-flex; align-items: center; gap: 0.85rem; }
.footer-mini__logo { height: 18px; width: auto; }
.footer-mini__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-mini a:hover { color: var(--verde); }
.footer-mini :focus-visible { outline-color: var(--verde); }

/* === KEYFRAMES ======================================================== */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes edgeSnap {
  from { transform: translateX(26%); }
  to   { transform: none; }
}
@keyframes drift {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}
@keyframes travelMove {
  to { transform: translate(var(--tx), var(--ty)); }
}
@keyframes travelFade {
  0%   { opacity: 0; }
  12%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes botBob {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-4%); }
}
@keyframes botBlink {
  0%, 94%, 100% { opacity: 0; }
  95%, 97%      { opacity: 1; }
}
@keyframes botFrame {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes botGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes botType {
  0%, 100% { opacity: 0.2; }
  35%, 70% { opacity: 1; }
}
/* 0–20% walk in · 20–24% climb on · 24–70% seated · 70–74% get down · 74–94% walk off */
@keyframes sitterWalk {
  0%          { opacity: 1; transform: translate(-110%, 27%); animation-timing-function: steps(7, end); }
  20%         { opacity: 1; transform: translate(0, 27%); animation-timing-function: step-end; }
  20.1%, 73.9% { opacity: 0; transform: translate(0, 27%); animation-timing-function: step-end; }
  74%         { opacity: 1; transform: translate(0, 27%); animation-timing-function: steps(7, end); }
  94%         { opacity: 1; transform: translate(130%, 27%); animation-timing-function: step-end; }
  94.1%, 100% { opacity: 0; transform: translate(130%, 27%); }
}
@keyframes sitterSit {
  0%, 20%     { opacity: 0; transform: translateY(27%); animation-timing-function: step-end; }
  20.1%       { opacity: 1; transform: translateY(27%); animation-timing-function: steps(3, end); }
  24%         { opacity: 1; transform: none; animation-timing-function: step-end; }
  70%         { opacity: 1; transform: none; animation-timing-function: steps(3, end); }
  73.9%       { opacity: 1; transform: translateY(27%); animation-timing-function: step-end; }
  74%, 100%   { opacity: 0; transform: translateY(27%); }
}
@keyframes sway {
  from { transform: rotate(-1.4deg); }
  to   { transform: rotate(1.1deg); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(.72) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__edge, .hero__star, .form-consent, .form-success, .mobile-menu, .assistant__hang { animation: none; }
  .drift { display: none; }
  .stage__progress span { transition: none; }
  .duo.in .duo__card, .scene__b, .scene__bot { animation: none !important; }
  .bot *, .bot__body, .bot__bulb { animation: none !important; }
  .bot__frame--1, .bot__blink { opacity: 0; }
  /* The seat is simply taken */
  .sitter__walk { display: none; }
  .sitter__seated, .sticker-chair.in .sitter__seated { opacity: 1; animation: none; }
}

/* === RESPONSIVE ======================================================= */
@media (max-width: 1100px) {
  .nav__links { gap: 1rem; }
  .nav__link { font-size: 0.9rem; }
}
@media (max-width: 1000px) {
  :root { --pad: 1.5rem; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__hamburger { display: block; }
  .is-desktop { display: none; }
  .is-mobile { display: inline; }

  /* Post layout: gradient on top, dissolve, then content */
  .hero { display: block; min-height: 0; padding-bottom: calc(var(--tile) * 15); }
  .hero__copy { padding: 2rem var(--pad) 2.25rem; align-items: center; text-align: center; }
  .hero__lockup { width: min(82%, 400px); }
  .hero__payoff span { margin-left: 0 !important; }
  .hero__payoff { font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
  .hero__date { width: min(80%, 340px); }
  .hero__when { justify-items: center; }
  .hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .hero__panel { display: none; }
  .hero__star--a { top: 3%; left: 6%; width: 32px; }
  .hero__star--b { display: none; }
  /* Shorter transition on stacked layouts: the 2 sparsest rows and the last fade rows are cropped */
  .hero__edge {
    --drift-shift: 2;
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: calc(var(--tile) * 15);
    background: url('../asset/pixel/dissolve-h-end.svg') left calc(var(--tile) * -2) / auto calc(var(--tile) * 19) repeat-x;
    animation: none;
  }
  #concept { padding-top: 3rem; }

  .concept-head, .agent, .audience__grid, .location-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .agent { --strap: 2.75rem; gap: 2rem; }
  .proofs { grid-template-columns: minmax(0, 1fr); }
  .proofs li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 0.85rem; }
  .proofs__star { grid-row: span 2; margin-top: 0.15rem; }

  .duo { --gap: 2.5rem; }
  .duo__card { padding: 1.15rem 1.25rem 1.25rem; }
  .duo__card span { font-size: 1rem; }

  .case-chip { opacity: .25; width: 170px; right: -56px; top: 1.25rem; }
  .sticker-mic { display: none; }

  /* Audience: the chair sticker moves beside the outcomes instead of below everything */
  .audience { padding-block: 3.5rem; }
  .audience__grid { position: relative; }
  .audience__text { margin-top: 1rem; font-size: 1.0625rem; }
  /* Chair sits beside the outcomes, above the CTA row (56px button + 1.5rem gap) */
  /* 114px keeps "Ottimizzazione dei costi" (223px) on one line at 390px wide */
  .audience__list { flex-direction: column; align-items: flex-start; gap: 0.45rem; margin: 1.75rem 0 1.5rem; padding-right: 114px; }
  .audience__list li { font-size: 1rem; padding: 0.5rem 0.8rem 0.55rem 0.7rem; gap: 0.55rem; }
  .sticker-chair { position: absolute; right: -0.25rem; bottom: calc(56px + 1.5rem); width: 112px; }
  .sticker-chair__label { font-size: 1rem; }

  .form-copy { justify-items: center; text-align: center; }
  .form-copy p { max-width: none; }
  .form-touchpoints { justify-content: center; }
}
@media (max-width: 720px) {
  :root { --tile: 11px; }

  .program__shape { display: none; }
  .program__corner { width: 96px; }
  .agenda { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .agenda__row:nth-child(6) { border-top: 0; }
  .agenda__row { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.6rem; padding: 0.7rem 0.35rem; }
  .agenda__time { font-size: 1rem; }

  /* Mobile keeps the two lanes face to face, as on desktop: AI left, people right, the dotted
     spine between them and the cards zipped half a row apart. Only sizes shrink */
  .duo { --gap: 1.25rem; }
  .duo__lane { gap: 0.25rem; padding-bottom: 0.9rem; }
  .duo__lane h3 { font-size: clamp(1.4rem, 7vw, 1.75rem); gap: 0.4rem; }
  .duo__lane p { font-size: 0.875rem; line-height: 1.3; }
  .duo__zip { padding-top: 1.25rem; grid-auto-rows: minmax(2.5rem, auto); }
  .duo__item { margin-block: 0.25rem; }
  .duo__item::after { width: 10px; height: 10px; margin-top: -5px; }
  .duo__item--ai::after { left: calc(100% + var(--gap) / 2 - 5px); }
  .duo__item--people::after { right: calc(100% + var(--gap) / 2 - 5px); }
  .duo__card { gap: 0.3rem; padding: 0.9rem 0.85rem 1rem; }
  .duo__card strong { font-size: clamp(1.05rem, 4.9vw, 1.35rem); hyphens: auto; }
  .duo__card span:last-child { font-size: 0.9375rem; line-height: 1.3; }

  /* Strip goes vertical: scene left, text right, the arrow turns downwards between panels */
  .story { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .story__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .scene__stage { aspect-ratio: 4 / 3; }
  .scene__arrow { top: 100%; left: 50%; margin: calc(1.75rem / 2 - 8px) 0 0 -8px; transform: rotate(90deg); }
  .story__label { font-size: 0.75rem; }
  .story__title { margin-top: 0.3rem; font-size: 1.0625rem; }
  .story__note { margin-top: 0.3rem; font-size: 0.9375rem; }

  .partner-row { grid-template-columns: minmax(0, 1fr); }
  .field-pair { grid-template-columns: minmax(0, 1fr); }

  .badge__top, .badge__id, .badge__foot { padding-inline: 1.15rem; }
  .badge__foot { font-size: 0.8125rem; }
  .badge__code { width: 56px; }
  .assistants__team { align-items: flex-start; flex-direction: column; }

  /* Lineup bleeds to the screen edges so the next card peeks in */
  .speakers__head { align-items: flex-end; }
  .stage__track { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
  .stage-card { flex-basis: min(74vw, 290px); }
  .stage-nav__btn { width: 46px; height: 46px; }

  .footer-mini { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .tilt { font-size: 2.3rem; }
  .nav { padding: 0 1rem; }
  .nav__brand-logo { height: 48px; }
}