.demo-stage {
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(460px, 1.15fr);
  overflow: hidden;
  border: 1px solid #cbd1c7;
  border-radius: 24px;
  background: #d5d9d1;
}
.host-scene { position: relative; min-height: 480px; overflow: hidden; container-type: size; }
.host-scene::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 12%;
  bottom: 6.5%;
  left: 14%;
  height: 24.5%;
  border-radius: 10px 10px 3px 3px;
  background: #101210;
}
.host-pose {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: url(#he-host-shirt-gray);
  transform-origin: center bottom;
  visibility: hidden;
}
.host-pose.active { visibility: visible; }
.host-pose[data-pose='1'] { transform: scaleY(1.05); }
.host-pose[data-pose='2'] { transform: scaleX(.98); }
.shirt-logo {
  position: absolute;
  z-index: 2;
  width: calc(min(100cqw, 100cqh) * .055);
  height: auto;
  left: calc(50% + min(100cqw, 100cqh) * .035);
  bottom: calc(min(100cqw, 100cqh) * .455);
  pointer-events: none;
}
.demo-progress { position: absolute; z-index: 3; bottom: 24px; left: 24px; display: flex; gap: 8px; }
.demo-progress button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #838b80; border-radius: 50%; background: transparent; color: #596157; font-size: 11px; }
.demo-progress button.active { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.demo-progress button:disabled { cursor: default; opacity: .46; }
.demo-progress button.active:disabled { opacity: 1; }
.demo-progress button:not(:disabled):hover,
.demo-progress button:not(:disabled):focus-visible { border-color: var(--ink); background: var(--paper); }
.speech-card {
  position: relative;
  align-self: center;
  min-height: 390px;
  display: grid;
  margin: 24px 28px 24px 8px;
  padding: clamp(30px, 3vw, 44px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(47,55,46,.12);
}
.speech-card::before {
  content: '';
  position: absolute;
  top: 88px;
  left: -26px;
  width: 52px;
  height: 52px;
  transform: rotate(45deg);
  border-radius: 6px;
  background: var(--paper);
}
.demo-panel { position: relative; z-index: 1; align-self: center; }
.demo-panel[hidden] { display: none; }
.demo-label { margin: 0 0 18px; color: #7d857a; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.mobile-host-portrait { display: none; }
.demo-panel h3 { margin: 0; font: 500 clamp(38px, 3.6vw, 54px)/.98 'Manrope', sans-serif; letter-spacing: -.06em; }
.demo-panel h3 span { color: #6e786a; overflow-wrap: anywhere; }
.entry-form { margin-top: 38px; }
.entry-input { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #828a7f; }
.entry-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 15px 0; color: var(--ink); }
.entry-input input::placeholder { color: #92998f; }
.entry-input button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-size: 22px;
}
.guest-list { margin-top: 24px; padding: 3px 22px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.48); }
.guest-list ul { list-style: none; margin: 0; padding: 0; }
.guest-list li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); color: #697168; font-size: 14px; }
.guest-list li:last-child { border-bottom: 0; }
.guest-list li:nth-child(-n+2) span:last-child,
.guest-list .your-row span:last-child { color: #4c5c43; }
.take-badge-cta { margin-top: 22px; }
.badge-demo { display: grid; grid-template-columns: 40px minmax(200px, 290px) 40px; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.badge-demo > button { width: 40px; height: 40px; border: 1px solid #abb2a8; border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; }
.badge-demo > button:hover { border-color: var(--acid); background: var(--acid); }
.badge-preview { position: relative; height: 245px; display: grid; place-items: center; }
.badge-art { position: relative; width: 100%; height: 100%; display: grid; place-items: end center; isolation: isolate; }
.badge-art[hidden] { display: none; }
.badge-art strong { overflow-wrap: anywhere; }

/* Each sample is drawn with scalable CSS surfaces, clips, and print details. */
.pass-strap, .festival-strap { position: absolute; z-index: -1; top: -5px; width: 20px; height: 57px; background: #183cd7; box-shadow: inset -4px 0 5px #06176775, 1px 2px 4px #1114; }
.pass-strap { display: grid; place-items: center; writing-mode: vertical-rl; color: #d4dcff; font-size: 5px; font-weight: 700; letter-spacing: .1em; }
.pass-clip, .festival-clip, .forum-clip { position: absolute; z-index: 2; top: 37px; left: 50%; width: 27px; height: 17px; transform: translateX(-50%); border: 1px solid #777e83; border-radius: 3px; background: linear-gradient(90deg, #91999b, #f7f8f5 44%, #939a9e); box-shadow: 0 2px 3px #0004; }
.pass-clip::after, .festival-clip::after, .forum-clip::after { content: ''; display: block; width: 6px; height: 6px; margin: 3px auto; border: 1px solid #7a8183; border-radius: 50%; }
.design-card { position: relative; width: 158px; height: 202px; overflow: hidden; display: grid; grid-template-rows: 47px 1fr 18px 67px; border: 5px solid #edf0f1; border-radius: 8px; background: #f9faf8; box-shadow: 0 14px 22px #26304533, inset 0 0 0 1px #b8bec0; transform: rotate(-2deg); }
.design-card::after, .forum-card::after, .festival-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #fff6, transparent 35%, #fff2 70%, transparent); }
.design-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 11px; border-bottom: 1px solid #c7cbcc; color: #5b6264; font-size: 8px; }
.barcode { width: 88px; height: 23px; background: repeating-linear-gradient(90deg, #24292a 0 1px, transparent 1px 3px, #24292a 3px 5px, transparent 5px 7px); }
.design-card strong { align-self: end; padding: 0 11px 5px; color: #11171b; font: 600 18px/1.03 'Manrope', sans-serif; letter-spacing: -.02em; }
.design-role { padding: 0 11px; color: #5a6266; font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
.design-brand { display: flex; align-items: end; justify-content: space-between; padding: 9px 11px; background: #1535c8; color: white; font: 600 20px/.86 'Manrope', sans-serif; letter-spacing: -.07em; }
.design-brand b { color: #a8c5ff; font-size: 32px; font-weight: 400; }

.forum-clip { top: 56px; width: 34px; height: 20px; }
.forum-card { position: relative; width: min(100%, 280px); height: 180px; overflow: hidden; border: 6px solid #e9eef2; border-radius: 12px; background: #fff; box-shadow: 0 14px 25px #14264a30, inset 0 0 0 1px #0a36c7; transform: rotate(1.5deg); }
.forum-head { height: 49px; display: flex; align-items: center; gap: 8px; padding: 7px 17px; background: #113ad2; color: white; font: 800 14px/.88 'Manrope', sans-serif; letter-spacing: -.045em; }
.forum-symbol { font-size: 30px; line-height: 1; }
.forum-head small { margin-left: auto; align-self: start; font-size: 9px; letter-spacing: .12em; }
.forum-body { height: 104px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px 12px; color: #202533; }
.forum-body small { color: #6c78a0; font-size: 7px; font-weight: 700; letter-spacing: .2em; }
.forum-body strong { max-width: 100%; margin: 5px 0; font: 700 27px/1 'Manrope', sans-serif; letter-spacing: -.06em; text-align: center; }
.forum-body span { color: #113ad2; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.forum-foot { display: flex; justify-content: space-between; padding: 3px 12px; border-top: 1px solid #cbd5f8; color: #566ab9; font-size: 7px; letter-spacing: .07em; }

.festival-strap { width: 19px; background: #16191e; }
.festival-clip { top: 24px; }
.festival-card { position: relative; width: 164px; height: 216px; overflow: hidden; border: 4px solid #f4f3ec; border-radius: 7px; background: #f4f3ec; box-shadow: 0 15px 25px #3026304d; transform: rotate(3deg); }
.festival-art { position: relative; height: 151px; overflow: hidden; padding: 11px; background: linear-gradient(145deg, #082a30 5%, #176262 49%, #ff7b39 50%, #ec3c59 88%); color: #fff; }
.festival-art::after { content: ''; position: absolute; right: -40px; bottom: -52px; width: 126px; height: 126px; border: 2px solid #fff8; border-radius: 50%; box-shadow: 0 0 0 12px #fff2, 0 0 0 28px #fff2; }
.festival-sun { position: absolute; top: 21px; right: 9px; width: 44px; height: 44px; border-radius: 50%; background: #ffd655; box-shadow: 0 0 0 8px #ffcf4b33; }
.festival-art small, .festival-art b, .festival-art em { position: relative; z-index: 1; display: block; }
.festival-art small { font-size: 6px; font-weight: 700; letter-spacing: .14em; }
.festival-art b { margin-top: 48px; font: 800 26px/.8 'Manrope', sans-serif; letter-spacing: -.08em; }
.festival-art em { margin-top: 9px; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: .13em; }
.festival-wave { position: absolute; left: -26px; bottom: 26px; width: 90px; height: 36px; border-top: 2px solid #e9fff0; border-radius: 50%; transform: rotate(-24deg); }
.festival-bottom { height: 57px; display: grid; grid-template-columns: 1fr auto; align-content: center; padding: 5px 9px; color: #171d20; }
.festival-bottom span { grid-column: 1 / -1; color: #ed3e5a; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.festival-bottom strong { min-width: 0; font: 700 15px/1 'Manrope', sans-serif; letter-spacing: -.04em; }
.festival-bottom small { color: #586268; font-size: 5px; font-weight: 800; letter-spacing: .06em; }
.badge-preview.long-name .design-card strong { font-size: 13px; }
.badge-preview.long-name .forum-body strong { font-size: 18px; }
.badge-preview.long-name .festival-bottom strong { font-size: 9px; }
.demo-contact { margin-top: 14px; }

.experience-section{position:relative;z-index:2;margin-top:-30px;padding:100px clamp(24px,7vw,110px);border-radius:36px 36px 0 0;background:#e8ebe4;box-shadow:0 -16px 44px rgba(23,29,22,.12)}
.experience-heading{max-width:900px;margin-bottom:38px}.experience-heading h2{margin:0;font-size:clamp(56px,5.8vw,86px);font-weight:500;line-height:1.03;letter-spacing:-.065em}.experience-heading>p:last-child{max-width:550px;margin:18px 0 0;color:var(--muted);font-size:19px;line-height:1.5}
.visual-filter{position:absolute;width:0;height:0;overflow:hidden}.demo-stage{direction:ltr;overflow-anchor:none}.speech-card{direction:rtl}.demo-panel h3{font-family:'Heebo',sans-serif;font-weight:500;line-height:1.05}.demo-label{font-family:'Heebo',sans-serif;letter-spacing:0;font-size:12px}.entry-input input{font-size:18px}.guest-list li{font-size:15px}.badge-demo{direction:rtl}.badge-preview{direction:ltr}.badge-art strong[dir=auto]{font-family:'Heebo',sans-serif;text-align:center;unicode-bidi:plaintext}.design-card strong[dir=auto]{text-align:start;font-size:18px}.festival-bottom strong[dir=auto]{text-align:start}.badge-preview.long-name .design-card strong{font-size:13px}.badge-preview.long-name .forum-body strong{font-size:18px}.badge-preview.long-name .festival-bottom strong{font-size:9px}.demo-contact{margin-top:18px}
.experience-section + .inquiry-section{z-index:3}
@media(max-width:900px){.demo-stage{grid-template-columns:1fr}.host-scene{min-height:390px}.speech-card{min-height:440px;margin:0 22px 22px}.speech-card::before{top:-22px;left:50%;transform:translateX(-50%) rotate(45deg)}}
@media(max-width:600px){.experience-section{padding:75px 22px;border-radius:24px 24px 0 0}.experience-heading h2{font-size:clamp(49px,12vw,68px)}.host-scene{min-height:220px}.demo-progress{bottom:14px;left:14px}.speech-card{min-height:440px;margin:0 12px 12px;padding:34px 24px;border-radius:14px}.demo-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.demo-kicker .demo-label{margin:0}.mobile-host-portrait{position:relative;display:block;flex:none;width:74px;height:74px;overflow:hidden;border:1px solid #c4cbc0;border-radius:50%;background:#d5d9d1}.demo-panel[data-step='0'] .mobile-host-portrait{display:none}.mobile-host-portrait img{position:absolute;top:-25px;left:50%;width:170px;height:170px;max-width:none;transform:translateX(-50%);filter:url(#he-host-shirt-gray)}.demo-panel h3{font-size:39px}.badge-demo{grid-template-columns:34px minmax(155px,1fr) 34px;gap:7px}.badge-demo>button{width:34px;height:34px}.badge-preview{height:230px}.forum-card{height:165px}.forum-body{height:89px}.forum-clip{top:57px}.design-card{width:145px;height:190px}.festival-card{width:152px;height:204px}.festival-art{height:145px}.festival-bottom{height:51px}}

/* On desktop, each section rises over the one before it like the English site. */
@media(min-width:981px){
  html{scroll-padding-top:0}
  .site-header{position:fixed;inset:0 0 auto}
  .hero,.service-section,.experience-section{position:sticky;top:0;height:100svh;min-height:100svh;max-height:100svh;overflow:hidden}
  .hero{z-index:0}
  .service-section{z-index:1;display:grid;align-content:center;padding-top:88px;padding-bottom:54px}
  .service-grid{margin-top:54px}
  .service-grid article{min-height:250px}
  .service-grid h3{margin-top:44px}
  .experience-section{z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr);align-content:center;padding-top:86px;padding-bottom:36px}
  .experience-heading{max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);column-gap:55px;align-items:end;margin-bottom:28px}
  .experience-heading .eyebrow{grid-column:1/-1;margin-bottom:12px}
  .experience-heading h2{font-size:clamp(48px,4.5vw,68px)}
  .experience-heading>p:last-child{margin:0 0 5px}
  .experience-section .demo-stage{height:100%;min-height:0}
  .experience-section .host-scene,.experience-section .speech-card{min-height:0}
  .inquiry-section{min-height:100svh}
}