.event-film {
  --paper:#f4f2eb;
  --ink:#252820;
  --accent:#c4502c;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.event-film * {
  box-sizing:border-box;
}
.event-film a {
  color:inherit;
  text-decoration:none;
}
.event-film button {
  font:inherit;
  cursor:pointer;
}
.event-film :is(a,button):focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px;
}
.event-film h1,.event-film h2,.event-film h3,.event-film h4,.event-film p {
  margin:0;
}
.event-film em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
}
.film-nav {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #25282020;
  margin:0 5%;
  gap:24px;
  position:relative;
  z-index:5;
}
.film-brand {
  display:flex;
  align-items:center;
  font-size:25px;
  font-weight:700;
  letter-spacing:-1.2px;
}
.brand-period {
  color:var(--accent);
}
.film-mark {
  width:35px;
  height:35px;
  background:var(--accent);
  color:var(--paper);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  margin-right:10px;
  font-size:29px;
  position:relative;
}
.film-mark span {
  font-size:14px;
  position:absolute;
  right:3px;
  top:0;
}
.film-nav nav,.film-nav-actions {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
}
.event-film .film-button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  background:var(--ink);
  color:var(--paper);
  padding:19px 24px;
  border-radius:5px;
  font-size:14px;
  transition:background .2s,transform .2s;
}
.event-film .film-button:hover {
  background:var(--accent);
  transform:translateY(-2px);
}
.event-film .film-button-small {
  padding:13px 18px;
  gap:24px;
}
.film-button span {
  font-size:19px;
}
.film-hero {
  position:relative;
  min-height:710px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  padding:105px 5% 110px;
  align-items:center;
}
.film-hero-copy {
  position:relative;
  z-index:2;
}
.film-eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:9px;
}
.film-dot {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  background:var(--accent);
}
.event-film h1 {
  font-size:clamp(58px,6.3vw,96px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-5px;
  margin:30px 0 25px;
}
.event-film h1 em {
  color:var(--accent);
}
.film-intro {
  font-size:16px;
  line-height:1.8;
  color:#62645b;
}
.film-hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin:32px 0 18px;
}
.film-text-link {
  font-size:12px;
  border-bottom:1px solid #9a9b92;
  padding:9px 0;
}
.film-text-link span {
  margin-left:12px;
}
.film-small {
  font-size:10px;
  color:#73766c;
  letter-spacing:.25px;
}
.film-universe {
  position:relative;
  height:500px;
  margin-left:-30px;
  perspective:900px;
  transform:translateY(var(--scene-shift,0px));
}
.film-universe canvas {
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  z-index:1;
}












.film-coordinate {
  position:absolute;
  bottom:0;
  right:15%;
  font-size:8px;
  color:#8a8a7c;
  letter-spacing:1.6px;
}
.film-hero-bottom {
  position:absolute;
  bottom:30px;
  left:5%;
  right:5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#676b60;
}
.film-hero-bottom>a {
  display:flex;
  align-items:center;
  gap:12px;
}
.scroll-circle {
  border:1px solid #b9bcb0;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:15px;
}
.film-hero-bottom>span {
  font-size:8px;
  letter-spacing:1.5px;
}
.film-hero-bottom button {
  border:0;
  background:transparent;
  font-size:10px;
  padding:10px;
}
.film-hero-bottom button span {
  margin-left:8px;
}
.film-use-cases {
  border-top:1px solid #25282020;
  padding:30px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}
.film-use-cases>span {
  font-size:8px;
  letter-spacing:1.5px;
}
.film-use-cases p {
  font-family:Georgia,serif;
  font-size:22px;
  display:flex;
  align-items:center;
  gap:30px;
}
.film-use-cases i {
  color:var(--accent);
  font-size:18px;
  font-style:normal;
}
.film-story {
  background:#20271f;
  color:#f4f2eb;
  padding:100px 8%;
  position:relative;
}
.film-story-heading {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  align-items:end;
  gap:20px;
  padding-bottom:55px;
}
.film-story-heading .film-eyebrow {
  grid-column:1/-1;
  color:#c7b88e;
}
.event-film h2 {
  font-size:clamp(35px,4vw,58px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-2px;
}
.film-story-heading>p:last-child {
  font-size:14px;
  line-height:1.8;
  color:#b0b7a8;
  padding-bottom:5px;
}
.film-chapter {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10%;
  min-height:640px;
  border-top:1px solid #ffffff25;
}
.chapter-number {
  font-size:9px;
  letter-spacing:2px;
  color:#b2bca5;
}
.chapter-copy h3 {
  font-size:clamp(34px,3.8vw,55px);
  line-height:1.12;
  letter-spacing:-1.5px;
  font-weight:400;
  margin:25px 0;
}
.chapter-copy h3 em {
  color:#d4c29a;
}
.chapter-copy>p {
  color:#b9bfb2;
  font-size:15px;
  line-height:1.85;
  max-width:390px;
}
.chapter-detail {
  display:block;
  font-size:10px;
  color:#d0d6c7;
  margin-top:28px;
  line-height:1.8;
}
.chapter-detail b {
  margin:0 9px;
  color:#a6b491;
}
.film-preview {
  border-radius:8px;
  padding:27px;
  background:#f1eee4;
  color:#303428;
  box-shadow:0 40px 65px #0003;
  position:relative;
  transition:transform .15s linear;
}
.preview-top {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  padding-bottom:20px;
  border-bottom:1px solid #30342825;
  margin-bottom:25px;
}
.preview-label {
  display:block;
  font-size:8px;
  letter-spacing:1.5px;
}
.preview-registration h4 {
  position:relative;
  font-family:Georgia,serif;
  font-size:44px;
  line-height:1;
  margin:15px 0;
}
.preview-registration h4>span {
  position:absolute;
  right:10px;
  top:8px;
  color:var(--accent);
  font-size:60px;
}
.preview-registration>p {
  font-size:12px;
  color:#757769;
  margin-bottom:22px;
}
.mock-field {
  font-size:12px;
  border:1px solid #30342830;
  border-radius:4px;
  padding:13px;
  margin:10px 0;
  display:flex;
  justify-content:space-between;
}
.mock-field span {
  font-size:9px;
  color:#797d6f;
}
.mock-submit {
  background:#b94c2b;
  color:white;
  border-radius:4px;
  padding:14px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  margin-top:14px;
}
.film-preview>small {
  display:block;
  text-align:center;
  font-size:7px;
  letter-spacing:1.5px;
  margin-top:20px;
  opacity:.65;
}
.preview-checkin {
  background:#dae0cb;
}
.live-dot {
  color:#50613e;
  font-size:7px;
}
.scan-frame {
  width:190px;
  height:190px;
  margin:35px auto;
  padding:25px;
  border:1px solid #6e7a5c;
  border-radius:15px;
  position:relative;
  color:#2a3925;
}
.scan-frame svg {
  width:100%;
  height:100%;
}
.scan-line {
  position:absolute;
  left:8px;
  right:8px;
  top:45%;
  height:2px;
  background:#a34a2a;
  box-shadow:0 0 14px #c4502c88;
  animation:film-scan 3s ease-in-out infinite alternate;
}
.checkin-confirmation {
  display:flex;
  align-items:center;
  gap:15px;
  background:#ffffff70;
  padding:18px;
  border-radius:6px;
}
.checkin-confirmation>span {
  border-radius:50%;
  background:#556d43;
  color:white;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
}
.checkin-confirmation strong {
  font-size:16px;
  font-weight:500;
}
.checkin-confirmation p {
  font-size:10px;
  margin-top:5px;
  color:#68755c;
}
.preview-certificate {
  background:#e8dfcc;
}
.certificate-border {
  border:1px solid #a89c7a;
  padding:27px 15px;
  text-align:center;
}
.certificate-star {
  font-size:45px;
  color:#8b6941;
  display:block;
  margin-bottom:20px;
}
.preview-certificate h4 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:34px;
  line-height:1.15;
  margin:19px 0;
}
.preview-certificate p {
  font-size:9px;
  color:#7b755f;
}
.preview-certificate strong {
  display:block;
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:400;
  margin:12px 0;
}
.certificate-signature {
  font-family:Georgia,serif;
  font-style:italic;
  border-bottom:1px solid #a89c7a;
  padding:24px 0 12px;
  margin:0 20px 20px;
  font-size:13px;
}
.certificate-signature span {
  margin-left:15px;
}
.certificate-verified {
  font-size:7px;
  letter-spacing:1px;
}
.film-essentials {
  padding:110px 8%;
}
.film-finale {
  background:#e8e5d9;
  padding:95px 5%;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.film-finale>*:not(.finale-orbit) {
  position:relative;
  z-index:1;
}
.film-finale .film-eyebrow {
  justify-content:center;
  color:#707262;
}
.film-finale h2 {
  font-size:clamp(40px,5.5vw,80px);
  margin:25px 0 35px;
}
.film-finale em {
  color:var(--accent);
}
.finale-orbit {
  position:absolute;
  width:850px;
  height:280px;
  border:1px solid #b5b09a66;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
}
.film-footer {
  padding:35px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}
.film-footer span,.film-footer>a:last-child {
  font-size:10px;
  color:#74766b;
}
.film-skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--paper);
  padding:15px;
}
.film-skip:focus {
  top:10px;
}
.event-film.motion-paused .scan-line {
  animation-play-state:paused;
}
@keyframes film-scan {
  from {
    transform:translateY(-55px);
  }
  to {
    transform:translateY(55px);
  }
}
@media(min-width:1500px) {
  .film-hero {
    min-height:820px;
  }
  .film-universe {
    height:590px;
  }
  .film-nav,.film-hero,.film-hero-bottom,.film-use-cases,.film-footer {
    padding-left:max(5%,calc((100vw - 1500px)/2));
    padding-right:max(5%,calc((100vw - 1500px)/2));
  }
  .film-nav {
    margin:0;
  }
}
@media(max-width:1000px) {
  .film-nav nav {
    gap:18px;
  }
  .film-hero {
    padding-top:75px;
    min-height:670px;
  }
  .event-film h1 {
    letter-spacing:-3px;
  }
  .film-universe {
    height:420px;
    margin-left:-55px;
  }



  .film-hero-actions {
    gap:15px;
  }
  .film-text-link {
    font-size:10px;
  }
  .film-hero-bottom>span {
    display:none;
  }
  .film-use-cases p {
    font-size:18px;
    gap:18px;
  }
  .film-story,.film-essentials {
    padding-left:6%;
    padding-right:6%;
  }
  .film-chapter {
    gap:6%;
    min-height:600px;
  }
  .film-preview {
    padding:22px;
  }

}
@media(max-width:700px) {
  .film-nav {
    height:78px;
    margin:0 6%;
    gap:12px;
  }
  .film-brand {
    font-size:21px;
  }
  .film-mark {
    width:29px;
    height:29px;
    font-size:24px;
  }
  .film-nav nav,.film-signin {
    display:none;
  }
  .event-film .film-button-small {
    font-size:10px;
    padding:12px;
    gap:12px;
  }
  .film-hero {
    display:flex;
    flex-direction:column;
    padding:60px 6% 90px;
    align-items:stretch;
    min-height:auto;
  }
  .film-eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
  }
  .event-film h1 {
    font-size:clamp(52px,11vw,76px);
    margin-top:25px;
    letter-spacing:-3px;
  }
  .film-intro {
    font-size:14px;
  }
  .desktop-break {
    display:none;
  }
  .film-hero-actions {
    gap:20px;
    flex-wrap:wrap;
    margin-top:25px;
  }
  .event-film .film-button {
    font-size:12px;
    padding:16px 18px;
    gap:25px;
  }
  .film-universe {
    height:390px;
    width:100%;
    max-width:450px;
    margin:25px auto 0;
  }





  .film-coordinate {
    font-size:7px;
  }
  .film-hero-bottom {
    left:6%;
    right:6%;
    bottom:25px;
    font-size:9px;
  }
  .film-use-cases {
    padding:25px 6%;
    display:block;
    text-align:center;
  }
  .film-use-cases p {
    justify-content:center;
    font-size:14px;
    gap:11px;
    margin-top:15px;
    flex-wrap:wrap;
  }
  .film-use-cases i {
    font-size:12px;
  }
  .film-story {
    padding-top:65px;
    padding-bottom:35px;
  }
  .film-story-heading {
    display:block;
    padding-bottom:35px;
  }
  .film-story-heading h2 {
    margin:22px 0;
  }
  .film-story-heading>p:last-child {
    font-size:13px;
  }
  .event-film h2 {
    font-size:36px;
    letter-spacing:-1.5px;
  }
  .film-chapter {
    grid-template-columns:1fr;
    gap:35px;
    padding:45px 0 60px;
    min-height:auto;
  }
  .chapter-copy h3 {
    font-size:39px;
    margin:20px 0;
  }
  .chapter-copy>p {
    font-size:14px;
    max-width:none;
  }
  .film-preview {
    width:100%;
    max-width:420px;
    justify-self:center;
  }
  .film-essentials {
    padding-top:65px;
    padding-bottom:65px;
  }


  .film-finale {
    padding:65px 6%;
  }
  .film-finale h2 {
    font-size:43px;
  }
  .film-footer {
    flex-wrap:wrap;
    padding:28px 6%;
  }
  .film-footer .film-brand {
    width:45%;
  }
  .film-footer span:first-of-type {
    width:42%;
    line-height:1.6;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important;
  }
  .event-film * {
    animation:none!important;
    transition:none!important;
  }
  .film-preview,.film-universe {
    transform:none!important;
  }
}

/* Stationary stages frame each section as a separate plane in space. */
.film-depth-stage {
  perspective: 1100px;
  perspective-origin: 50% 50%;
  --depth-progress: 0;
  --depth-distance: 0;
}
.film-depth-panel {
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--depth-progress) * 55px), calc(var(--depth-distance) * -240px)) rotateX(calc(var(--depth-progress) * -22deg)) rotateY(calc(var(--depth-progress) * 5deg));
  transform-origin: center;
  backface-visibility: hidden;
}
.film-chapter .chapter-copy {
  transform: translateZ(25px);
}
.film-chapter .film-preview {
  transform: translateZ(45px) rotateY(calc(-12deg + var(--depth-progress) * -15deg)) rotateX(5deg);
  transform-style: flat;
  box-shadow: 14px 18px 0 -9px #9c9f89, 24px 30px 0 -16px #66725b, 25px 55px 70px #0006;
  transition: none;
}
.film-chapter .film-preview > :not(small) {
  transform: none;
}
.film-chapter .preview-certificate {
  transform: translateZ(45px) rotateY(calc(12deg + var(--depth-progress) * -15deg)) rotateZ(-5deg);
}
.film-story-heading h2, .film-finale h2 {
  transform: translateZ(55px);
}


.film-universe {
  transform-style: preserve-3d;
}

.event-film.motion-paused .film-depth-panel,
.event-film.motion-paused .film-depth-panel * {
  transform: none;
}
@media (max-width: 700px) {
  .film-depth-stage { perspective: 700px; perspective-origin: 50% 25%; }
  .film-depth-panel {
    transform-style: flat;
    transform-origin: var(--depth-origin, 50% 0%);
    transform: translate3d(0, calc(var(--depth-progress) * 75px), calc(var(--depth-distance) * -280px)) rotateX(calc(var(--depth-progress) * -32deg)) rotateY(calc(var(--depth-progress) * 12deg));
  }
  .film-chapter { position: relative; }
  .film-chapter .chapter-copy { transform: none; }
  .film-chapter .film-preview {
    transform-origin: 50% 0%;
    transform: perspective(700px) translate3d(0, calc(var(--preview-progress, 0) * 55px), calc(25px - var(--preview-progress, 0) * 185px)) rotateX(calc(var(--preview-progress, 0) * -28deg)) rotateY(calc(var(--preview-progress, 0) * -18deg));
  }

}
@media (prefers-reduced-motion: reduce) {
  .film-depth-panel, .film-depth-panel * { transform: none !important; }

}

/* A tangible two-sided pass, with touch scrolling left to the browser. */
.ticket-interaction {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 1100px;
  touch-action: pan-y;
}
.ticket-rig {
  width: 320px;
  height: 432px;
  transform-style: preserve-3d;
  transform: rotateX(calc(9deg + var(--ticket-x, 0deg))) rotateY(calc(-17deg + var(--ticket-y, 0deg))) rotateZ(-7deg);
  transition: transform 180ms ease-out;
}
.event-film .ticket-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 750ms cubic-bezier(.2, .75, .2, 1);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.event-film .ticket-card:active { cursor: grabbing; }
.ticket-card.is-flipped { transform: rotateY(180deg); }
/* The canvas is the visible ticket; these faces provide its accessible text. */
.ticket-face {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ticket-hint {
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .5px;
  color: #737365;
}
.ticket-hint > span { margin: 0 6px; }
.film-universe .film-coordinate { bottom: -42px; right: 0; left: 0; text-align: center; }
.event-film.motion-paused .ticket-rig { transform: rotateZ(-5deg); transition: none; }
.event-film.motion-paused .ticket-card { transition: none; }
@media (max-width: 1000px) and (min-width: 701px) {
  .ticket-rig { width: 290px; height: 432px; scale: .87; }
}
@media (max-width: 700px) {
  .film-universe { height: 475px; margin-top: 40px; margin-bottom: 35px; }
  .ticket-rig { width: min(290px, 82vw); height: 432px; transform: rotateX(calc(7deg + var(--ticket-x, 0deg))) rotateY(calc(-12deg + var(--ticket-y, 0deg))) rotateZ(-5deg); }
  .ticket-hint { bottom: -4px; }
  .film-universe .film-coordinate { bottom: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-rig { transform: rotateZ(-5deg); }
}

/* Separate stages let every card enter in depth, including on a narrow screen. */
.film-process { padding: 95px 8% 80px; background: #eae7dc; }
.film-section-heading { padding-bottom: 50px; }
.film-section-heading .film-eyebrow { color: var(--accent); margin-bottom: 22px; }
.film-section-heading h2 em { color: var(--accent); }
.film-section-heading > p:last-child { margin-top: 22px; font-size: 15px; line-height: 1.8; color: #666b5e; }
.film-card-grid { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.film-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 35px; }
.film-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.film-card-grid > .film-depth-stage { min-width: 0; --card-direction: 1; }
.film-card-grid > .film-depth-stage:nth-child(even) { --card-direction: -1; }
.film-card-grid .film-depth-panel {
  height: 100%; border: 1px solid #373e2620; border-radius: 10px; padding: 28px;
  box-shadow: 0 5px 0 -2px #c8c9b9, 0 20px 35px #2735220c;
  transform: translate3d(0, calc(var(--depth-progress) * 65px), calc(var(--depth-distance) * -220px)) rotateX(calc(var(--depth-progress) * -24deg)) rotateY(calc(var(--depth-progress) * var(--card-direction) * 16deg));
}
.film-process-card { display: flex; flex-direction: column; background: #f7f5ee; }
.process-card-top { display: flex; justify-content: space-between; align-items: flex-start; color: var(--accent); margin-bottom: 32px; }
.process-number { font-family: Georgia, serif; font-size: 55px; line-height: 1; letter-spacing: -3px; }
.process-card-top > span:last-child { font-size: 23px; }
.film-card-grid h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; margin-bottom: 15px; }
.film-card-grid p { font-size: 14px; line-height: 1.85; color: #626959; }
.process-caption { display: block; margin-top: auto; padding-top: 32px; font-size: 8px; letter-spacing: 1.7px; color: #7b806e; }
.film-feature-card { background: #fffdf6; min-height: 290px; }
.feature-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #e8e9db; color: #42533b; }
.feature-icon svg { width: 25px; height: 25px; }
.feature-index { font-size: 9px; letter-spacing: 1.5px; color: #7d8174; }
.film-feature-grid > .film-depth-stage:nth-child(2n) .feature-icon { background: #f2e0d3; color: #ac4e2e; }
.event-film.motion-paused .film-card-grid .film-depth-panel { transform: none; }
@media (max-width: 1100px) {
  .film-process-grid, .film-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .film-process { padding: 65px 6%; }
  .film-section-heading { padding-bottom: 35px; }
  .film-section-heading > p:last-child { font-size: 14px; }
  .film-process-grid, .film-feature-grid { grid-template-columns: 1fr; gap: 28px; }
  .film-card-grid .film-depth-panel {
    padding: 27px;
    transform: translate3d(0, calc(var(--depth-progress) * 65px), calc(var(--depth-distance) * -250px)) rotateX(calc(var(--depth-progress) * -30deg)) rotateY(calc(var(--depth-progress) * var(--card-direction) * 18deg));
  }
  .film-feature-card { min-height: 275px; }
  .process-card-top { margin-bottom: 24px; }
}