* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, sans-serif; background: #101014; color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.site-header { position: fixed; top: 0; width: 100%; padding: 22px 48px; display: flex; justify-content: space-between; align-items: center; z-index: 10; background: rgba(16,16,20,.75); backdrop-filter: blur(16px); }
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { display: block; width: clamp(150px, 12vw, 220px); height: auto; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; font-size: 22.4px; }
.hero { min-height: 100vh; padding: 160px 48px 80px; display: flex; align-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 80% 30%, rgba(255,106,61,.22), transparent 35%), linear-gradient(135deg, #101014, #171720 55%, #09090c); }
.hero::after { content: ""; position: absolute; inset: 120px 48px 60px auto; width: 42vw; border-radius: 40px; background: linear-gradient(135deg, #ff6a3d, #6836ff); opacity: .22; filter: blur(8px); transform: rotate(-6deg); }
.hero-content { max-width: 780px; position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: 3px; color: #ff6a3d; font-size: 11.2px; font-weight: 800; }
h1 { font-size: clamp(38.4px, 6.4vw, 86.4px); line-height: .95; margin: 16px 0; }
h2 { font-size: clamp(28.8px, 4vw, 57.6px); line-height: 1; margin: 0; }
.lead { max-width: 680px; font-size: 16px; color: #d6d6df; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; margin-top: 24px; padding: 16px 28px; background: #ff6a3d; color: #fff; border-radius: 999px; font-weight: 800; border: none; cursor: pointer; }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); }
.section {
  padding: 110px 48px;
  border-top: 1px solid rgba(160, 166, 176, 0.18);
}

.hero + .section {
  border-top: 1px solid rgba(160, 166, 176, 0.18);
}
.section-head { margin-bottom: 44px; }
.filters { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.filters button { padding: 10px 18px; border: 1px solid #333; background: transparent; color: #fff; border-radius: 999px; cursor: pointer; }
.filters button.active { background: #fff; color: #101014; }
.grid, .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { overflow: hidden; border-radius: 24px; background: #19191f; border: 1px solid rgba(255,255,255,.07); }
.project-card img { width: 100%; height: 390px; object-fit: cover; display: block; transition: transform .4s ease; }
.project-card:hover img { transform: scale(1.04); }
.project-info { padding: 24px; }
.project-info p { color: #ff6a3d; font-size: 10.4px; letter-spacing: 2px; font-weight: 800; }
.project-info h3 { margin: 8px 0; font-size: 22.4px; }
.project-info span { color: #c8c8d2; display: block; margin-bottom: 18px; }
.dark, .site-footer { background: #07070a; }
.features div, .testimonial, .contact-form, .success-message { background: #19191f; padding: 32px; border-radius: 24px; border: 1px solid rgba(255,255,255,.07); }
.features p, .testimonial p, .about p, .about li { color: #c8c8d2; line-height: 1.7; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.testimonial { max-width: 860px; font-size: 17.6px; }
.contact-form { display: grid; gap: 12.8px; max-width: 576px; }
.success-message { max-width: 576px; margin-bottom: 16px; color: #8affb0; }
input, textarea { width: 100%; padding: 12.8px; border-radius: 11.2px; border: 1px solid #333; background: #101014; color: #fff; font: inherit; }
textarea { min-height: 128px; }
.site-footer { padding: 48px; display: flex; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.project-page { padding-top: 150px; }
.back-link { color: #ff6a3d; font-weight: 800; }
.project-gallery { display: grid; gap: 24px; margin-top: 40px; }
.project-gallery img { width: 100%; border-radius: 24px; background: #19191f; }
@media (max-width: 900px) { .logo img { width: 150px; } .grid, .features, .portfolio-grid, .split { grid-template-columns: 1fr; } .site-header, .section, .hero, .site-footer { padding-left: 24px; padding-right: 24px; } .site-footer { flex-direction: column; } .menu-toggle { display: block; } .site-nav { display: none; position: absolute; top: 74px; right: 24px; left: 24px; background: #19191f; padding: 20px; border-radius: 20px; flex-direction: column; } .site-nav.open { display: flex; } }
.nav-cart, .cart-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; background: rgba(255,255,255,.1); padding: 8px 18px; border-radius: 999px; line-height: 1; }
.nav-cart span, .cart-pill span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: 0; background: #ff6a3d; border-radius: 999px; font-size: 11.2px; line-height: 1; }
.shop-page, .cart-page { padding-top: 150px; }
.shop-head { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { overflow: hidden; border-radius: 24px; background: #19191f; border: 1px solid rgba(255,255,255,.07); }
.product-card img { width: 100%; height: 230px; object-fit: cover; display: block; background: #101014; }
.product-info { padding: 24px; display: grid; gap: 14px; }
.product-info h3 { margin: 0; font-size: 19.2px; }
.product-info span, .product-info li, .small-note, .summary-row.muted { color: #c8c8d2; line-height: 1.6; }
.product-info ul { padding-left: 18px; margin: 0; }
.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 10px; }
.product-bottom strong { font-size: 22.4px; }
.product-bottom .btn { margin-top: 0; padding: 12px 18px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cart-items, .cart-summary { background: #19191f; border: 1px solid rgba(255,255,255,.07); border-radius: 24px; padding: 24px; }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cart-item:first-child { padding-top: 0; }
.cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-item img { width: 96px; height: 76px; object-fit: cover; border-radius: 14px; background: #101014; }
.cart-item h3 { margin: 0 0 6px; }
.cart-item p { margin: 0; color: #c8c8d2; }
.item-actions { display: flex; align-items: center; gap: 10px; }
.qty-btn, .remove-btn, .clear-cart { border: 1px solid rgba(255,255,255,.15); background: transparent; color: #fff; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.remove-btn, .clear-cart { color: #ff9b80; }
.cart-summary { position: sticky; top: 110px; }
.summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.checkout-btn { width: 100%; margin-top: 24px; }
.clear-cart { width: 100%; margin-top: 12px; }
.empty-cart { color: #c8c8d2; }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .shop-head, .cart-layout { grid-template-columns: 1fr; display: grid; } .shop-grid { grid-template-columns: 1fr; } .cart-item { grid-template-columns: 76px 1fr; } .item-actions { grid-column: 2; } .cart-summary { position: static; } }

.language-switcher {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 50px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}

.language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.8px;
  font-weight: 800;
  letter-spacing: .5px;
  opacity: .75;
}

.language-switcher a.active {
  background: #fff;
  color: #101014;
  opacity: 1;
}


/* Aftermotion refinement: slightly tighter typography on larger screens */
@media (min-width: 901px) {
  .site-nav { font-size: 11.2px; }
  .eyebrow { font-size: 8.8px; letter-spacing: 2.4px; }
  h1 { font-size: clamp(33.6px, 5.12vw, 68.8px); }
  h2 { font-size: clamp(24px, 3.2vw, 46.4px); }
  .lead { font-size: 12.8px; max-width: 620px; }
  .btn { font-size: 11.2px; padding: 13px 23px; }
  .filters button { font-size: 10.4px; padding: 8px 15px; }
  .project-info p { font-size: 8.8px; }
  .project-info h3 { font-size: 17.6px; }
  .project-info span,
  .features p,
  .about p,
  .about li,
  .product-info span,
  .product-info li,
  .small-note { font-size: 11.2px; }
  .features h3 { font-size: 14.4px; }
  .testimonial { font-size: 14.4px; }
  .product-info h3 { font-size: 16px; }
  .product-bottom strong { font-size: 17.6px; }
}

/* Footer / legal */
.site-footer {
  align-items: flex-start;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-brand { max-width: 360px; }
.footer-brand strong {
  display: inline-block;
  font-size: 14.4px;
  letter-spacing: 1.4px;
}
.footer-brand p,
.footer-legal p,
.footer-copyright {
  color: #8f8f99;
  font-size: 9.6px;
  line-height: 1.6;
}
.footer-copyright { margin-top: 18px; }
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10.4px;
}
.footer-legal {
  max-width: 460px;
}
.footer-legal span {
  display: block;
  margin-bottom: 10px;
  color: #d8d8df;
  font-size: 8.8px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.footer-legal p { margin: 0; }
@media (max-width: 900px) {
  .footer-links { gap: 14px; }
  .footer-legal { max-width: 100%; }
}

/* Minimal Aftermotion footer */
.site-footer {
  justify-content: flex-start;
  padding-top: 42px;
  padding-bottom: 42px;
}
.footer-brand { max-width: none; }
.footer-brand strong {
  font-size: 14.4px;
  letter-spacing: 1.6px;
}
.footer-copyright {
  margin: 10px 0 0;
  color: #777782;
  font-size: 8.8px;
}

/* Aftermotion refinement: contact form 20% more compact */
.contact-form { padding: 25.6px; }
.contact-form .btn { margin-top: 19.2px; }


/* Aftermotion legal note */
.footer-legal-note {
  margin: 14px 0 0;
  max-width: 920px;
  color: #5f5f68;
  font-size: 7.6px;
  line-height: 1.55;
  letter-spacing: .15px;
}


/* Aftermotion contact popup */
body.modal-open {
  overflow-y: scroll;
  overflow-x: hidden;
}
[data-contact-open] { cursor: pointer; }
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.contact-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(5px);
}
.contact-modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: none;
  overflow: hidden;
  padding: clamp(24px, 3.2vh, 36px) clamp(24px, 3vw, 40px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: #111116;
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
  transform: translateY(18px) scale(.985);
  transition: transform .22s ease;
}
.contact-modal.open .contact-modal-panel { transform: translateY(0) scale(1); }
.contact-modal-panel h2 {
  max-width: 620px;
  margin: 4px 54px clamp(16px, 2vh, 22px) 0;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: .98;
}
.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.contact-modal-close:hover { background: rgba(255,255,255,.08); }
.contact-modal-form {
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  gap: clamp(9px, 1.2vh, 12px);
}
.contact-modal-form input,
.contact-modal-form textarea {
  background: #1a1a20;
  border-color: rgba(255,255,255,.1);
  padding: clamp(11px, 1.35vh, 14px) 16px;
  font-size: clamp(14px, 1.4vw, 16px);
}
.contact-modal-form textarea { min-height: clamp(96px, 15vh, 130px); resize: none; }
.contact-modal-form .btn { width: 100%; margin-top: 4px; padding-block: clamp(11px, 1.5vh, 14px); }
@media (max-width: 640px) {
  .contact-modal { padding: 14px; }
  .contact-modal-panel { padding: 24px 18px 18px; border-radius: 22px; }
  .contact-modal-panel h2 { margin-right: 42px; }
  .contact-modal-close { top: 14px; right: 14px; }
}

@media (max-height: 720px) and (min-width: 641px) {
  .contact-modal { padding: 14px; }
  .contact-modal-panel { width: min(700px, 100%); padding: 22px 30px; }
  .contact-modal-panel h2 { font-size: clamp(25px, 4.8vh, 38px); margin-bottom: 14px; }
  .contact-modal-panel .eyebrow { margin-bottom: 6px; }
  .contact-modal-form { gap: 8px; }
  .contact-modal-form input,
  .contact-modal-form textarea { padding: 10px 14px; }
  .contact-modal-form textarea { min-height: 88px; }
  .contact-modal-form .btn { padding-block: 10px; }
}

/* Header contact CTA */
.site-nav .nav-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #ff6a3d;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(255,106,61,.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.site-nav .nav-contact-cta:hover {
  transform: translateY(-1px);
  background: #ff7650;
  box-shadow: 0 14px 34px rgba(255,106,61,.26);
}

/* Larger, taller no-scroll contact popup */
.contact-modal-panel {
  width: min(860px, 100%);
  padding: clamp(32px, 4vh, 48px) clamp(28px, 3.5vw, 52px) clamp(34px, 4.2vh, 52px);
}
.contact-modal-panel h2 {
  max-width: 700px;
  margin-bottom: clamp(20px, 2.6vh, 30px);
}
.contact-modal-form {
  gap: clamp(12px, 1.55vh, 16px);
}
.contact-modal-form input,
.contact-modal-form textarea {
  padding: clamp(14px, 1.7vh, 18px) 18px;
}
.contact-modal-form textarea {
  min-height: clamp(145px, 21vh, 190px);
}
.contact-modal-form .btn {
  padding-block: clamp(13px, 1.8vh, 17px);
}

/* Original Aftermotion service showcase */
.animation-services {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,106,61,.13), transparent 28%),
    linear-gradient(180deg, #0d0d12 0%, #07070a 100%);
}
.services-head { max-width: 850px; }
.services-intro {
  max-width: 680px;
  margin: 18px 0 0;
  color: #aaaab4;
  line-height: 1.7;
  font-size: 13px;
}
.service-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.service-showcase-card {
  overflow: hidden;
  min-height: 470px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  background: #15151b;
  transition: transform .3s ease, border-color .3s ease;
}
.service-showcase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,106,61,.42);
}
.service-motion-preview {
  position: relative;
  height: 270px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,106,61,.18), transparent 45%),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.08), transparent 34%),
    #0c0c10;
}
.service-motion-preview::after {
  content: "";
  position: absolute;
  inset: auto 10% 14% 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.motion-core {
  position: absolute;
  left: 50%; top: 48%;
  width: 78px; height: 78px;
  transform: translate(-50%,-50%) rotate(45deg);
  border: 2px solid #fff;
  border-radius: 20px;
  background: #ff6a3d;
  box-shadow: 0 0 55px rgba(255,106,61,.35);
  animation: am-core 4.2s ease-in-out infinite;
}
.motion-orbit {
  position: absolute;
  left: 50%; top: 48%;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.orbit-a { width: 150px; height: 150px; animation: am-spin 7s linear infinite; }
.orbit-b { width: 220px; height: 115px; animation: am-spin-rev 9s linear infinite; }
.motion-streak {
  position: absolute;
  height: 2px;
  background: #fff;
  opacity: .72;
  transform-origin: left center;
}
.streak-a { width: 120px; left: 9%; top: 38%; transform: rotate(-12deg); animation: am-streak 2.6s ease-in-out infinite; }
.streak-b { width: 90px; right: 7%; top: 64%; transform: rotate(9deg); animation: am-streak 2.6s .55s ease-in-out infinite reverse; }
.service-card-2 .motion-core { border-radius: 50% 50% 20% 50%; animation-duration: 5s; }
.service-card-2 .service-motion-preview { background: radial-gradient(circle at 70% 20%, rgba(104,54,255,.24), transparent 34%), #0c0c10; }
.service-card-3 .motion-core { width: 95px; height: 54px; border-radius: 999px; transform: translate(-50%,-50%) rotate(-12deg); }
.service-card-3 .service-motion-preview { background: radial-gradient(circle at 20% 80%, rgba(255,106,61,.22), transparent 35%), #0c0c10; }
.service-showcase-copy { padding: 25px 26px 29px; }
.service-index {
  display: block;
  margin-bottom: 13px;
  color: #ff6a3d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
}
.service-showcase-copy h3 { margin: 0 0 12px; font-size: 19px; }
.service-showcase-copy p { margin: 0; color: #a9a9b3; font-size: 11.5px; line-height: 1.7; }
.services-bottom-line {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.035);
}
.services-bottom-line strong { font-size: 17px; line-height: 1.25; }
.services-bottom-line p { margin: 0; color: #9c9ca7; font-size: 11.5px; line-height: 1.65; }
.services-bottom-line .btn { margin-top: 0; white-space: nowrap; }
@keyframes am-core { 0%,100% { transform: translate(-50%,-50%) rotate(45deg) scale(1); } 50% { transform: translate(-50%,-55%) rotate(58deg) scale(1.08); } }
@keyframes am-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes am-spin-rev { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes am-streak { 0%,100% { opacity: .2; transform: translateX(-12px) rotate(-12deg) scaleX(.65); } 50% { opacity: .9; transform: translateX(18px) rotate(-12deg) scaleX(1.2); } }

@media (max-width: 900px) {
  .site-nav .nav-contact-cta { width: 100%; }
  .service-showcase-grid { grid-template-columns: 1fr; }
  .service-showcase-card { min-height: 0; }
  .services-bottom-line { grid-template-columns: 1fr; }
  .services-bottom-line .btn { justify-self: start; }
}
@media (max-height: 720px) and (min-width: 641px) {
  .contact-modal-panel { width: min(780px, 100%); padding: 24px 34px 26px; }
  .contact-modal-form textarea { min-height: 105px; }
}


/* V5 — service media slots */
.service-video-preview {
  position: relative;
  overflow: hidden;
  background: #0b0b0f;
}
.service-video-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-slot-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(10,10,14,.68);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}


/* Aftermotion cinematic artwork integration */
.hero.hero-art-showcase {
  background: #050608;
  min-height: 100vh;
}
.hero.hero-art-showcase::after { display: none; }
.hero-art-showcase .hero-content { max-width: 610px; }
.hero-art {
  position: absolute;
  inset: 74px 0 0 34%;
  background:
    linear-gradient(90deg, #050608 0%, rgba(5,6,8,.92) 8%, rgba(5,6,8,.28) 34%, rgba(5,6,8,.08) 68%, rgba(5,6,8,.28) 100%),
    linear-gradient(0deg, #050608 0%, transparent 24%),
    url('/images/showcase/hero-knight.jpg') center right / cover no-repeat;
  opacity: .98;
  pointer-events: none;
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 44%, rgba(255,106,61,.12), transparent 28%);
}
.hero-art-showcase .hero-content { z-index: 2; }
.hero-art-showcase h1 { max-width: 720px; }
.hero-art-showcase .lead { max-width: 520px; }

.animation-services {
  background: #07090b;
}
.service-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.service-showcase-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.13);
  background: #0a0c0f;
  isolation: isolate;
}
.service-showcase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,6,8,.98) 0%, rgba(5,6,8,.90) 40%, rgba(5,6,8,.20) 78%, rgba(5,6,8,.05) 100%);
  z-index: 1;
  pointer-events: none;
}
.service-art {
  position: absolute;
  inset: 0 0 0 42%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.02);
  transition: transform .5s ease, filter .5s ease;
}
.service-showcase-card:hover .service-art { transform: scale(1.07); filter: saturate(1.1); }
.service-art-character { background: url('/images/showcase/character-art.jpg') center / cover no-repeat; }
.service-art-character video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-art-background { background-image: url('/images/showcase/background-art.jpg'); }
.service-art-props { background-image: url('/images/showcase/props-art.jpg'); }
.service-showcase-copy {
  position: relative;
  z-index: 2;
  width: 62%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 20px 28px 28px;
}
.service-index {
  color: #ff6a3d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.service-showcase-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(23px, 2.1vw, 34px);
  line-height: 1;
  text-transform: uppercase;
}
.service-showcase-copy p {
  margin: 0;
  max-width: 290px;
  color: #d0d1d6;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1000px) {
  .hero-art { inset-left: 28%; opacity: .72; }
  .service-showcase-grid { grid-template-columns: 1fr; }
  .service-showcase-card,
  .service-showcase-copy { min-height: 260px; }
}
@media (max-width: 700px) {
  .hero-art { inset: 74px -30% 0 0; opacity: .5; }
  .hero-art-showcase .hero-content { max-width: 100%; }
  .service-art { inset-left: 32%; }
  .service-showcase-copy { width: 72%; padding: 24px 18px; }
}

/* v6 service video + brighter hero refinements */
.hero.hero-art-showcase {
  background: #0b0d11;
}
.hero-art {
  background:
    linear-gradient(90deg, #0b0d11 0%, rgba(11,13,17,.82) 9%, rgba(11,13,17,.18) 34%, rgba(11,13,17,.02) 70%, rgba(11,13,17,.13) 100%),
    linear-gradient(0deg, rgba(11,13,17,.72) 0%, transparent 22%),
    url('/images/showcase/hero-knight.jpg') center right / cover no-repeat;
  opacity: 1;
  filter: brightness(1.16) contrast(1.02) saturate(1.04);
}
.hero-art::after {
  background:
    radial-gradient(circle at 72% 44%, rgba(255,106,61,.16), transparent 30%),
    linear-gradient(90deg, rgba(11,13,17,.18), transparent 55%);
}

/* Remove numeric 01/02/03 labels completely */
.service-index { display: none !important; }
.service-showcase-copy h3 {
  color: #ff6a3d;
  margin-bottom: 16px;
}

/* Every service card can play an MP4 while retaining its artwork as a fallback poster/background. */
.service-art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(.90);
  transform-origin: center;
  transition: transform .5s ease, filter .5s ease;
}
.service-showcase-card:hover .service-art video {
  transform: scale(.94);
  filter: saturate(1.06);
}
.service-art-background video,
.service-art-props video {
  width: 100%;
  height: 100%;
}

@media (max-width: 700px) {
  .service-art video { transform: scale(.94); }
  .service-showcase-card:hover .service-art video { transform: scale(.97); }
}

/* v7 — clean service video framing: no black matte, more of the subject visible */
.service-art video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  transform: none !important;
  background: transparent;
}
.service-showcase-card:hover .service-art video {
  transform: scale(1.015) !important;
}
.service-art-character video {
  object-position: 50% 10%;
}
.service-art-background video,
.service-art-props video {
  object-position: 50% 50%;
}

@media (max-width: 700px) {
  .service-art video,
  .service-showcase-card:hover .service-art video {
    transform: none !important;
  }
  .service-art-character video { object-position: 50% 8%; }
}

/* v8 — portrait-style video fit on the right for all three service cards */
.service-art {
  inset: 0;
  transform: none;
}

.service-art video {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: 52%;
  object-fit: contain;
  object-position: center center;
  transform: none !important;
  background: transparent;
}

.service-showcase-card:hover .service-art video {
  transform: scale(1.01) !important;
  transform-origin: center right;
}

.service-art-character video,
.service-art-background video,
.service-art-props video {
  object-position: center center;
}

@media (max-width: 1000px) {
  .service-art video {
    max-width: 58%;
  }
}

@media (max-width: 700px) {
  .service-art video,
  .service-showcase-card:hover .service-art video {
    max-width: 62%;
    transform: none !important;
  }
}


/* v9 — solid black text side with a soft blend into the video panel */
.service-showcase-card::after {
  display: none;
}

.service-showcase-copy {
  width: 62%;
  background: linear-gradient(
    90deg,
    rgba(4,5,8,1) 0%,
    rgba(4,5,8,1) 74%,
    rgba(4,5,8,.96) 84%,
    rgba(4,5,8,.82) 91%,
    rgba(4,5,8,.55) 96%,
    rgba(4,5,8,0) 100%
  );
  backdrop-filter: none;
}

@media (max-width: 700px) {
  .service-showcase-copy {
    width: 72%;
    background: linear-gradient(
      90deg,
      rgba(4,5,8,1) 0%,
      rgba(4,5,8,1) 76%,
      rgba(4,5,8,.92) 88%,
      rgba(4,5,8,.35) 100%
    );
  }
}

/* v10 — larger cinematic video framing across all three service categories */
.service-art video,
.service-art-character video,
.service-art-background video,
.service-art-props video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 65%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transform: none !important;
  background: transparent;
}

.service-showcase-card:hover .service-art video {
  transform: scale(1.015) !important;
  transform-origin: center right;
}

.service-art-background video,
.service-art-props video {
  object-position: 50% 50%;
}

@media (max-width: 1000px) {
  .service-art video,
  .service-art-character video,
  .service-art-background video,
  .service-art-props video {
    width: 68%;
    max-width: none;
  }
}

@media (max-width: 700px) {
  .service-art video,
  .service-art-character video,
  .service-art-background video,
  .service-art-props video,
  .service-showcase-card:hover .service-art video {
    width: 72%;
    max-width: none;
    transform: none !important;
  }
}


/* v11 — identical video framing for all service categories; black fallback before MP4 loads */
.service-art,
.service-art-character,
.service-art-background,
.service-art-props {
  background: #000 !important;
  background-image: none !important;
}

.service-art-character video,
.service-art-background video,
.service-art-props video {
  right: -10% !important;
  left: auto !important;
  object-fit: cover !important;
  object-position: 80% 20% !important;
}

/* v12 — smooth service-card easing and stable animation anchors */
.service-showcase-card {
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  transition:
    transform 620ms cubic-bezier(.22, 1, .36, 1),
    border-color 420ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 620ms cubic-bezier(.22, 1, .36, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.service-showcase-card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(255,106,61,.38);
  box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

/* Kill the older parent zoom so the video does not double-scale / flicker. */
.service-art,
.service-showcase-card:hover .service-art {
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
  transform-origin: 80% 20%;
  transition: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.service-art-character video,
.service-art-background video,
.service-art-props video {
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: 80% 20%;
  transition:
    transform 760ms cubic-bezier(.22, 1, .36, 1),
    filter 520ms cubic-bezier(.22, 1, .36, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.service-showcase-card:hover .service-art-character video,
.service-showcase-card:hover .service-art-background video,
.service-showcase-card:hover .service-art-props video {
  transform: translate3d(0, 0, 0) scale(1.012) !important;
  filter: saturate(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .service-showcase-card,
  .service-art-character video,
  .service-art-background video,
  .service-art-props video {
    transition-duration: 0.01ms !important;
  }
}


/* v13 — tighter hero/services spacing + animated scroll-down CTA */
.hero.hero-art-showcase {
  min-height: 82vh;
  padding-bottom: 58px;
}

.animation-services {
  padding-top: 58px;
}

.hero-scroll-down {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 4;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ff6a3d;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .9;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

.hero-scroll-down:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

.hero-scroll-chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: heroScrollFloat 1.7s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes heroScrollFloat {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: .45; }
  50% { transform: translateY(7px) rotate(45deg); opacity: 1; }
}

@media (max-width: 900px) {
  .hero.hero-art-showcase {
    min-height: 88vh;
    padding-bottom: 72px;
  }
  .animation-services { padding-top: 44px; }
}

@media (max-width: 700px) {
  .hero-scroll-down {
    bottom: 16px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-chevron { animation: none; }
}


/* v15 — service CTA buttons, expandable details and cinematic scroll reveals */
.service-showcase-copy {
  align-items: flex-start;
}

.service-more-btn {
  margin-top: 22px;
  min-width: 132px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #050608;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.16);
  transform: translate3d(0,0,0);
  transform-origin: 50% 50%;
  transition:
    transform 480ms cubic-bezier(.22,1,.36,1),
    box-shadow 480ms cubic-bezier(.22,1,.36,1),
    background-color 320ms ease;
}

.service-more-btn:hover {
  transform: translate3d(0,-2px,0) scale(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.service-more-btn:active {
  transform: translate3d(0,0,0) scale(.985);
}

.service-more-btn:focus-visible {
  outline: 3px solid rgba(255,106,61,.6);
  outline-offset: 3px;
}

.service-more-arrow {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transform: translate3d(0,0,0) rotate(0deg);
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
}

.service-showcase-card.details-open .service-more-arrow {
  transform: translate3d(2px,-2px,0) rotate(45deg);
}

.service-more-panel {
  width: min(100%, 330px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0,10px,0);
  transition:
    max-height 680ms cubic-bezier(.22,1,.36,1),
    opacity 360ms ease,
    transform 620ms cubic-bezier(.22,1,.36,1),
    margin-top 620ms cubic-bezier(.22,1,.36,1);
  margin-top: 0;
}

.service-showcase-card.details-open .service-more-panel {
  max-height: 180px;
  opacity: 1;
  transform: translate3d(0,0,0);
  margin-top: 16px;
}

.service-more-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.service-more-panel li {
  position: relative;
  padding-left: 15px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.45;
}

.service-more-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6a3d;
  box-shadow: 0 0 12px rgba(255,106,61,.45);
}

/* Scroll entrance motion: fade + lift + tiny scale, then settle on stable anchors. */
[data-scroll-reveal] {
  opacity: 0;
  transform: translate3d(0,34px,0) scale(.985);
  transform-origin: 50% 65%;
  filter: blur(5px);
  transition:
    opacity 720ms cubic-bezier(.22,1,.36,1),
    transform 920ms cubic-bezier(.22,1,.36,1),
    filter 720ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}

[data-scroll-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.service-showcase-card[data-scroll-reveal] {
  transform-origin: 50% 82%;
}

/* Once revealed, preserve the existing hover motion without fighting the entrance transform. */
.service-showcase-card[data-scroll-reveal].is-revealed:hover {
  transform: translate3d(0,-4px,0) scale(1);
}

/* Stagger copy elements inside the card after the card enters. */
.service-showcase-card[data-scroll-reveal] .service-showcase-copy > * {
  opacity: 0;
  transform: translate3d(-14px,0,0);
  transition:
    opacity 620ms cubic-bezier(.22,1,.36,1),
    transform 760ms cubic-bezier(.22,1,.36,1);
}

.service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > * {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > *:nth-child(1) { transition-delay: 100ms; }
.service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > *:nth-child(2) { transition-delay: 180ms; }
.service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > *:nth-child(3) { transition-delay: 270ms; }
.service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > *:nth-child(4) { transition-delay: 320ms; }

@media (max-width: 700px) {
  .service-more-btn {
    min-height: 40px;
    min-width: 120px;
    margin-top: 18px;
  }

  [data-scroll-reveal] {
    transform: translate3d(0,22px,0) scale(.992);
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal],
  [data-scroll-reveal].is-revealed,
  .service-showcase-card[data-scroll-reveal] .service-showcase-copy > *,
  .service-showcase-card[data-scroll-reveal].is-revealed .service-showcase-copy > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: 0.01ms !important;
  }

  .service-more-btn,
  .service-more-arrow,
  .service-more-panel {
    transition-duration: 0.01ms !important;
  }
}

/* v16 — dedicated service detail pages */
.service-more-btn { text-decoration: none; }

.service-detail-page { background: #050608; }
.service-detail-hero {
  min-height: 78vh;
  padding: 150px 5vw 70px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 42px;
  align-items: center;
  overflow: hidden;
}
.service-detail-copy { max-width: 720px; }
.service-detail-copy h1 {
  margin: 10px 0 24px;
  font-size: clamp(54px, 7vw, 108px);
  line-height: .9;
  text-transform: uppercase;
  color: #ff6a3d;
}
.service-detail-intro {
  max-width: 650px;
  color: #d4d5da;
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.55;
}
.service-detail-media {
  min-height: 590px;
  border: 1px solid rgba(255,106,61,.42);
  border-radius: 34px;
  overflow: hidden;
  background: #000;
}
.service-detail-media video {
  width: 100%;
  height: 100%;
  min-height: 590px;
  object-fit: cover;
  object-position: 80% 20%;
  display: block;
}
.service-detail-overview { padding-top: 80px; }
.service-detail-summary { max-width: 1040px; margin-bottom: 46px; }
.service-detail-summary h2 { font-size: clamp(34px, 4.2vw, 66px); line-height: 1.05; }
.service-highlight-grid,
.service-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.service-highlight-card,
.service-process-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  padding: 26px;
}
.service-highlight-card span { color: #ff6a3d; font-weight: 900; letter-spacing: .12em; }
.service-highlight-card p { margin: 24px 0 0; font-size: 18px; line-height: 1.45; }
.service-process-card h3 { color: #ff6a3d; margin: 0 0 16px; font-size: 19px; }
.service-process-card p { margin: 0; color: #c7c8cd; line-height: 1.65; }
.service-detail-process { background: #080a0d; }
.deliverable-list { list-style: none; padding: 0; margin: 0; }
.deliverable-list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: clamp(18px, 1.6vw, 24px);
}
.deliverable-list li::before { content: "↗"; color: #ff6a3d; margin-right: 14px; }
.service-detail-cta {
  text-align: center;
  padding-top: 110px;
  padding-bottom: 120px;
}
.service-detail-cta h2 { font-size: clamp(48px, 7vw, 100px); margin: 10px 0 22px; }
.service-detail-cta p { max-width: 760px; margin: 0 auto 32px; color: #c8c9ce; font-size: 18px; line-height: 1.6; }

@media (max-width: 980px) {
  .service-detail-hero { grid-template-columns: 1fr; padding-top: 125px; }
  .service-detail-media, .service-detail-media video { min-height: 520px; }
  .service-highlight-grid, .service-process-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .service-detail-hero { padding: 110px 18px 48px; }
  .service-detail-media, .service-detail-media video { min-height: 420px; }
  .service-highlight-grid, .service-process-grid { grid-template-columns: 1fr; }
}

/* v17 - bright fantasy hero artwork */
.hero.hero-art-showcase { background: #0a0d10; }

.hero-art {
  inset: 74px 0 0 0;
  background:
    linear-gradient(90deg, rgba(5,8,12,.96) 0%, rgba(5,8,12,.88) 18%, rgba(5,8,12,.56) 34%, rgba(5,8,12,.18) 50%, rgba(5,8,12,.03) 68%, rgba(5,8,12,.06) 100%),
    linear-gradient(0deg, rgba(5,8,12,.34) 0%, transparent 28%),
    url('/images/showcase/hero-bright-fantasy.webp') center center / cover no-repeat;
  opacity: 1;
  filter: brightness(1.02) saturate(1.04);
}

.hero-art::after {
  background:
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(90deg, rgba(7,10,14,.20), transparent 55%);
}

.hero-art-showcase .hero-content {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
}

@media (max-width: 700px) {
  .hero-art {
    inset: 74px -18% 0 0;
    background:
      linear-gradient(90deg, rgba(5,8,12,.95) 0%, rgba(5,8,12,.78) 48%, rgba(5,8,12,.24) 78%, rgba(5,8,12,.05) 100%),
      url('/images/showcase/hero-bright-fantasy.webp') 62% center / cover no-repeat;
  }
}


/* v18 — cleaner lighter header and no dark top strip */
.site-header {
  background: rgba(17, 22, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}

.hero.hero-art-showcase {
  background: #0d1116;
}

.hero-art {
  inset: 0 0 0 0;
  background:
    linear-gradient(90deg,
      rgba(7,10,14,.84) 0%,
      rgba(7,10,14,.72) 16%,
      rgba(7,10,14,.42) 30%,
      rgba(7,10,14,.14) 46%,
      rgba(7,10,14,.02) 64%,
      rgba(7,10,14,.02) 100%),
    url('/images/showcase/hero-bright-fantasy.webp') center center / cover no-repeat;
  filter: brightness(1.03) saturate(1.03);
}

.hero-art::after {
  background: radial-gradient(circle at 72% 34%, rgba(255,255,255,.08), transparent 22%);
}

@media (max-width: 700px) {
  .hero-art {
    inset: 0 -18% 0 0;
    background:
      linear-gradient(90deg,
        rgba(7,10,14,.88) 0%,
        rgba(7,10,14,.68) 46%,
        rgba(7,10,14,.20) 76%,
        rgba(7,10,14,.03) 100%),
      url('/images/showcase/hero-bright-fantasy.webp') 62% center / cover no-repeat;
  }
}


/* v19 — white scroll CTA and softer hero text gradient */
.hero-scroll-down {
  color: #ffffff;
  opacity: .96;
  text-shadow: 0 1px 10px rgba(0,0,0,.18);
}

.hero-scroll-chevron {
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.hero-art {
  background:
    linear-gradient(90deg,
      rgba(7,10,14,.68) 0%,
      rgba(7,10,14,.56) 14%,
      rgba(7,10,14,.30) 28%,
      rgba(7,10,14,.10) 44%,
      rgba(7,10,14,.02) 60%,
      rgba(7,10,14,.01) 100%),
    url('/images/showcase/hero-bright-fantasy.webp') center center / cover no-repeat;
}

@media (max-width: 700px) {
  .hero-art {
    background:
      linear-gradient(90deg,
        rgba(7,10,14,.74) 0%,
        rgba(7,10,14,.54) 40%,
        rgba(7,10,14,.18) 72%,
        rgba(7,10,14,.03) 100%),
      url('/images/showcase/hero-bright-fantasy.webp') 62% center / cover no-repeat;
  }
}


/* v20 — simpler premium hero, no left overlay gradient, darker blue scroll text, more transparent header */
.site-header {
  background: rgba(17, 22, 28, 0.50);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.hero-art {
  background: url('/images/showcase/hero-bright-fantasy.webp') center center / cover no-repeat !important;
  filter: brightness(1.02) saturate(1.02);
}

.hero-art::after {
  background: none !important;
}

.hero-art-showcase .hero-content {
  text-shadow: 0 2px 14px rgba(0,0,0,.20);
}

.hero-scroll-down {
  color: #213a63 !important;
  text-shadow: 0 1px 8px rgba(255,255,255,.18);
}

.hero-scroll-chevron {
  border-right-color: #213a63 !important;
  border-bottom-color: #213a63 !important;
}

@media (max-width: 700px) {
  .hero-art {
    background: url('/images/showcase/hero-bright-fantasy.webp') 62% center / cover no-repeat !important;
  }
}


/* v21 — darker blue hero copy and visible secondary CTA on bright header */
.hero-art-showcase h1,
.hero-art-showcase .lead {
  color: #213a63;
}

.hero-art-showcase .btn.ghost {
  background: rgba(17, 29, 49, 0.82);
  color: #ffffff;
  border: 1px solid rgba(17, 29, 49, 0.92);
  box-shadow: 0 8px 24px rgba(12, 22, 40, 0.16);
}

.hero-art-showcase .btn.ghost:hover {
  background: rgba(17, 29, 49, 0.92);
  border-color: rgba(17, 29, 49, 1);
}

@media (max-width: 700px) {
  .hero-art-showcase h1,
  .hero-art-showcase .lead {
    color: #213a63;
  }
}


/* v22 — solid top header bar */
.site-header {
  background: #6f8093 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,.18);
}


/* v23 — revert premium dark translucent header and white hero copy */
.site-header {
  background: rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.hero-art-showcase h1,
.hero-art-showcase .lead {
  color: #ffffff !important;
}

.hero-scroll-down {
  color: #ff6a3d !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.18);
}

.hero-scroll-chevron {
  border-right-color: #ff6a3d !important;
  border-bottom-color: #ff6a3d !important;
}


/* v24 — subtle gray divider under fixed header */
.site-header {
  border-bottom: 1px solid rgba(160, 166, 176, 0.34) !important;
}

/* v25 - clearly visible gray divider lines */
.site-header {
  border-bottom: 1px solid rgba(170, 176, 186, 0.58) !important;
}

.hero.hero-art-showcase {
  border-bottom: 1px solid rgba(170, 176, 186, 0.48) !important;
}


/* v27 — wider hero text layout */
.hero-art-showcase .hero-content {
  max-width: 1180px !important;
}

.hero-art-showcase h1 {
  max-width: 1120px !important;
  font-size: clamp(60px, 7vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.hero-art-showcase .lead {
  max-width: 980px !important;
  font-size: 18px;
  line-height: 1.28;
}

@media (max-width: 1100px) {
  .hero-art-showcase .hero-content {
    max-width: 860px !important;
  }

  .hero-art-showcase h1 {
    max-width: 820px !important;
  }

  .hero-art-showcase .lead {
    max-width: 760px !important;
  }
}

@media (max-width: 700px) {
  .hero-art-showcase h1 {
    max-width: 100% !important;
    font-size: clamp(44px, 11vw, 68px);
    line-height: 0.96;
  }

  .hero-art-showcase .lead {
    max-width: 100% !important;
    font-size: 16px;
  }
}
/* AFTERMOTION — smooth service video hover zoom patch
   Add this at the END of public/css/style.css
   or include it after style.css.
*/

/* Keep the video area and your existing framing stable */
.service-art-character video,
.service-art-background video,
.service-art-props video {
  right: -10% !important;
  left: auto !important;
  object-fit: cover !important;
  object-position: 80% 20% !important;

  /* Stable GPU layer + premium easing */
  transform: translateZ(0) scale(1);
  transform-origin: 80% 20%;
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 900ms cubic-bezier(.16, 1, .3, 1);
}

/* Soft cinematic zoom when the whole service card is hovered */
.service-showcase-card:hover .service-art-character video,
.service-showcase-card:hover .service-art-background video,
.service-showcase-card:hover .service-art-props video,
.service-showcase-card:focus-within .service-art-character video,
.service-showcase-card:focus-within .service-art-background video,
.service-showcase-card:focus-within .service-art-props video {
  transform: translateZ(0) scale(1.045) !important;
  filter: saturate(1.025) contrast(1.015);
}

/* Prevent old hover transforms from fighting this patch */
.service-showcase-card:hover .service-art {
  transform: none !important;
  filter: none !important;
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .service-art-character video,
  .service-art-background video,
  .service-art-props video {
    transition: none !important;
    transform: none !important;
  }
}


/* v29 — faster, stronger, flicker-free video hover zoom */
.service-art {
  overflow: hidden;
  contain: paint;
}

.service-art-character video,
.service-art-background video,
.service-art-props video {
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: 80% 20% !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: none !important;
  transition: transform 360ms cubic-bezier(.22,.61,.36,1) !important;
}

.service-showcase-card:hover .service-art-character video,
.service-showcase-card:hover .service-art-background video,
.service-showcase-card:hover .service-art-props video,
.service-showcase-card:focus-within .service-art-character video,
.service-showcase-card:focus-within .service-art-background video,
.service-showcase-card:focus-within .service-art-props video {
  transform: translate3d(0,0,0) scale(1.09) !important;
  filter: none !important;
}

/* v30 - hero title + lead color */
.hero-art-showcase h1,
.hero-art-showcase .lead {
  color: #3f6d92 !important;
}


/* v31 - hero title color */
.hero-art-showcase h1 {
  color: #3f6d92 !important;
}

/* Why choose us — interactive accordion */
.about-accordion {
  position: relative;
  overflow: hidden;
}

.about-accordion::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 92, 255, 0.13), transparent 68%);
  pointer-events: none;
}

.about-accordion-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: start;
}

.about-accordion-intro {
  position: sticky;
  top: 120px;
}

.about-accordion-intro h2 {
  max-width: 720px;
  margin-bottom: 22px;
}

.about-accordion-intro .about-summary {
  max-width: 600px;
  margin: 0;
}

.why-accordion {
  border-top: 1px solid rgba(160, 166, 176, 0.34);
}

.why-item {
  border-bottom: 1px solid rgba(160, 166, 176, 0.34);
}

.why-trigger {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  grid-template-columns: 42px 1fr 52px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  text-align: left;
  cursor: pointer;
}

.why-index {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  transition: color 220ms ease;
}

.why-title {
  font-size: clamp(1.05rem, 1.65vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  transition: transform 260ms ease, color 220ms ease;
}

.why-plus {
  width: 40px;
  height: 40px;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  position: relative;
  transition: transform 300ms ease, border-color 220ms ease, background 220ms ease;
}

.why-plus::before,
.why-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 300ms ease;
}

.why-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.why-trigger:hover .why-title,
.why-trigger:focus-visible .why-title {
  transform: translateX(6px);
}

.why-trigger:hover .why-index,
.why-trigger:focus-visible .why-index {
  color: rgba(255, 255, 255, 0.82);
}

.why-trigger:hover .why-plus,
.why-trigger:focus-visible .why-plus {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.why-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 5px;
}

.why-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 380ms cubic-bezier(.2,.75,.25,1), opacity 240ms ease;
}

.why-panel-inner {
  overflow: hidden;
}

.why-panel p {
  margin: 0;
  padding: 0 66px 13px 56px;
  color: #c8c8d2;
  line-height: 1.75;
  max-width: 720px;
}

.why-item.is-open .why-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.why-item.is-open .why-plus {
  transform: rotate(45deg);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.why-item.is-open .why-title {
  color: #fff;
}

@media (max-width: 860px) {
  .about-accordion-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .about-accordion-intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .why-trigger {
    grid-template-columns: 30px 1fr 42px;
    gap: 10px;
    padding: 10px 0;
  }

  .why-plus {
    width: 36px;
    height: 36px;
  }

  .why-panel p {
    padding: 0 42px 12px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-panel,
  .why-plus,
  .why-plus::before,
  .why-plus::after,
  .why-title {
    transition: none;
  }
}

/* v32 — animated premium header interactions */
.site-header {
  transition:
    padding 320ms cubic-bezier(.2,.75,.25,1),
    background 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease,
    transform 320ms cubic-bezier(.2,.75,.25,1);
  overflow: visible;
}

.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--scroll-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, #ff6a3d, #ffd29f 45%, #ffffff 100%);
  box-shadow: 0 0 14px rgba(255, 106, 61, 0.48);
  transition: width 80ms linear;
  pointer-events: none;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--header-glow-x, 74%) 0%, rgba(255, 126, 74, 0.14), transparent 30%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.site-header.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(7, 10, 14, 0.72) !important;
  border-bottom-color: rgba(180, 186, 196, 0.46) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.logo img {
  transition: transform 320ms cubic-bezier(.2,.75,.25,1), filter 320ms ease;
}

.logo:hover img {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 18px rgba(255,255,255,.10));
}

.site-nav > a:not(.nav-contact-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  transition: transform 220ms ease, color 220ms ease, opacity 220ms ease;
}

.site-nav > a:not(.nav-contact-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms cubic-bezier(.2,.75,.25,1);
  opacity: .82;
}

.site-nav > a:not(.nav-contact-cta):hover,
.site-nav > a:not(.nav-contact-cta):focus-visible {
  transform: translateY(-2px);
  color: #ffffff;
}

.site-nav > a:not(.nav-contact-cta):hover::after,
.site-nav > a:not(.nav-contact-cta):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-nav .nav-contact-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 260ms cubic-bezier(.2,.75,.25,1), box-shadow 260ms ease, filter 260ms ease;
}

.site-nav .nav-contact-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -42%;
  width: 34%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent);
  transform: rotate(18deg) translateX(-180%);
  transition: transform 560ms cubic-bezier(.2,.75,.25,1);
  z-index: -1;
}

.site-nav .nav-contact-cta:hover,
.site-nav .nav-contact-cta:focus-visible {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 12px 30px rgba(255, 106, 61, 0.26);
  filter: saturate(1.08);
}

.site-nav .nav-contact-cta:hover::before,
.site-nav .nav-contact-cta:focus-visible::before {
  transform: rotate(18deg) translateX(520%);
}

.language-switcher {
  transition: transform 260ms cubic-bezier(.2,.75,.25,1), border-color 220ms ease, background 220ms ease;
}

.language-switcher:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.035);
}

.language-switcher a {
  transition: transform 220ms ease, opacity 220ms ease, background 220ms ease, color 220ms ease;
}

.language-switcher a:hover {
  transform: scale(1.06);
  opacity: 1;
}

@media (max-width: 900px) {
  .site-header.is-scrolled {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-nav > a:not(.nav-contact-cta)::after {
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before,
  .site-header::after,
  .logo img,
  .site-nav > a,
  .site-nav > a::after,
  .language-switcher,
  .language-switcher a {
    transition: none !important;
  }
}


/* v33 — cinematic hero entrance */
.hero-art-showcase .hero-content > .eyebrow,
.hero-art-showcase .hero-content > h1,
.hero-art-showcase .hero-content > .lead,
.hero-art-showcase .hero-content > .hero-actions {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 760ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 760ms ease;
  will-change: transform, opacity, filter;
}

.hero-art-showcase.is-hero-ready .hero-content > .eyebrow,
.hero-art-showcase.is-hero-ready .hero-content > h1,
.hero-art-showcase.is-hero-ready .hero-content > .lead,
.hero-art-showcase.is-hero-ready .hero-content > .hero-actions {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-art-showcase .hero-content > .eyebrow { transition-delay: 80ms; }
.hero-art-showcase .hero-content > h1 { transition-delay: 180ms; }
.hero-art-showcase .hero-content > .lead { transition-delay: 330ms; }
.hero-art-showcase .hero-content > .hero-actions { transition-delay: 480ms; }

.hero-art-showcase .hero-actions .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition:
    opacity 560ms ease,
    transform 680ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.hero-art-showcase.is-hero-ready .hero-actions .btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-art-showcase.is-hero-ready .hero-actions .btn:nth-child(1) {
  transition-delay: 560ms, 560ms, 0ms, 0ms, 0ms;
}

.hero-art-showcase.is-hero-ready .hero-actions .btn:nth-child(2) {
  transition-delay: 660ms, 660ms, 0ms, 0ms, 0ms;
}

.hero-art-showcase .hero-actions .btn::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -55%;
  width: 34%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: rotate(18deg) translateX(-210%);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.hero-art-showcase .hero-actions .btn:hover,
.hero-art-showcase .hero-actions .btn:focus-visible {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 14px 34px rgba(255, 106, 61, .22);
}

.hero-art-showcase .hero-actions .btn:hover::after,
.hero-art-showcase .hero-actions .btn:focus-visible::after {
  transform: rotate(18deg) translateX(560%);
}

.hero-art-showcase .hero-actions .btn.ghost:hover,
.hero-art-showcase .hero-actions .btn.ghost:focus-visible {
  box-shadow: 0 14px 30px rgba(25, 58, 99, .16);
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-showcase .hero-content > .eyebrow,
  .hero-art-showcase .hero-content > h1,
  .hero-art-showcase .hero-content > .lead,
  .hero-art-showcase .hero-content > .hero-actions,
  .hero-art-showcase .hero-actions .btn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hero-art-showcase .hero-actions .btn::after { display: none; }
}


/* v34 — header CTA shine fix: clipped, artifact-free */
.site-nav .nav-contact-cta {
  position: relative;
  overflow: hidden !important;
  clip-path: inset(0 round 999px);
  isolation: isolate;
  contain: paint;
  outline-offset: 3px;
}

.site-nav .nav-contact-cta::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -48%;
  width: 34%;
  height: auto;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 26%,
    rgba(255,255,255,.56) 50%,
    rgba(255,255,255,.08) 74%,
    transparent 100%
  );
  transform: translate3d(-220%, 0, 0) rotate(18deg);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.site-nav .nav-contact-cta:hover::before,
.site-nav .nav-contact-cta:focus-visible::before {
  transform: translate3d(720%, 0, 0) rotate(18deg);
}

/* Keep the label visually above the shine without requiring extra markup */
.site-nav .nav-contact-cta {
  text-shadow: 0 0 0 currentColor;
}

/* Prevent focus/hover artifacts leaking into the fixed header */
.site-header,
.site-nav,
.site-nav .nav-contact-cta {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.site-nav .nav-contact-cta:focus {
  outline: none;
}

.site-nav .nav-contact-cta:focus-visible {
  outline: 2px solid rgba(255,255,255,.92);
}

/* The old negative-z shine caused black bands in some browsers */
.site-nav .nav-contact-cta::before {
  z-index: 0 !important;
}

/* v35 — remove shine sweep from primary CTA buttons */
.hero-art-showcase .hero-actions .btn::after,
.site-nav .nav-contact-cta::before {
  display: none !important;
  content: none !important;
}

/* Keep interaction clean: lift/scale only, no sweep overlay */
.hero-art-showcase .hero-actions .btn,
.site-nav .nav-contact-cta {
  overflow: visible;
}

.site-nav .nav-contact-cta {
  clip-path: none;
  contain: none;
}

/* v36 — fixed-header compositing fix (prevents black bands on hover after scroll) */
.site-header {
  /* Fixed + backdrop-filter + transformed descendants can create GPU tile artifacts. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform: none !important;
  contain: none !important;
  will-change: auto !important;
}

.site-header.is-scrolled {
  /* Slightly denser fallback keeps the same premium look without live backdrop compositing. */
  background: rgba(7, 10, 14, 0.94) !important;
}

/* Disable the full-header animated overlay that forced repaints across the fixed bar. */
.site-header::after {
  display: none !important;
  content: none !important;
}

.site-nav,
.site-nav > a,
.site-nav .nav-contact-cta,
.language-switcher,
.logo,
.logo img {
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  contain: none !important;
  will-change: auto !important;
}

/* Keep hover motion, but avoid filter-based compositing inside the fixed header. */
.site-nav .nav-contact-cta:hover,
.site-nav .nav-contact-cta:focus-visible {
  filter: none !important;
}

.logo:hover img {
  filter: none !important;
}

/* v37 — rebuilt mobile navigation */
@media (max-width: 900px) {
  .site-header {
    padding: 16px 20px !important;
    min-height: 78px;
    overflow: visible;
  }

  .site-header.is-scrolled {
    padding: 12px 20px !important;
    min-height: 68px;
  }

  .logo img {
    width: min(160px, 44vw) !important;
  }

  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    flex: 0 0 46px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    position: relative;
    z-index: 1002;
  }

  .menu-toggle::before,
  .menu-toggle::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 280ms cubic-bezier(.2,.75,.25,1), top 280ms ease;
  }

  .menu-toggle::before { top: 17px; }
  .menu-toggle::after { top: 27px; }

  .menu-toggle.is-open::before {
    top: 22px;
    transform: rotate(45deg);
  }

  .menu-toggle.is-open::after {
    top: 22px;
    transform: rotate(-45deg);
  }

  .site-nav {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: max(112px, calc(env(safe-area-inset-top) + 92px)) 24px 32px !important;
    border-radius: 0 !important;
    background: rgba(13, 14, 20, .985) !important;
    border: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity 260ms ease, transform 340ms cubic-bezier(.16,1,.3,1), visibility 260ms ease;
  }

  .site-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav > a:not(.nav-contact-cta) {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255,255,255,.11);
    font-size: clamp(28px, 8vw, 42px) !important;
    font-weight: 650;
    letter-spacing: -.035em;
    transform: none !important;
  }

  .site-nav > a:not(.nav-contact-cta)::after {
    display: none !important;
  }

  .site-nav .nav-contact-cta {
    width: 100% !important;
    min-height: 62px;
    margin: 28px 0 18px;
    padding: 16px 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 18px !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .language-switcher {
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 5px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    transform: none !important;
  }

  .language-switcher a {
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 16px !important;
    font-weight: 800;
    transform: none !important;
  }

  .language-switcher a.active {
    background: #fff;
    color: #111218;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }
}

@media (max-width: 420px) {
  .site-nav {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-nav > a:not(.nav-contact-cta) {
    min-height: 64px;
    font-size: clamp(26px, 9vw, 36px) !important;
  }
}

/* v35 — high-contrast floating scroll cue */
.hero-scroll-down {
  bottom: 18px;
  min-width: 132px;
  padding: 10px 16px 11px;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8, 12, 18, .72);
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
}

.hero-scroll-down span:first-child {
  color: #ffffff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
  line-height: 1;
}

.hero-scroll-down:hover,
.hero-scroll-down:focus-visible {
  transform: translateX(-50%) translateY(-3px);
  background: rgba(8, 12, 18, .88);
  border-color: rgba(255,106,61,.82);
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 0 1px rgba(255,106,61,.14);
}

.hero-scroll-chevron {
  width: 11px;
  height: 11px;
  border-right: 2.5px solid #ff6a3d !important;
  border-bottom: 2.5px solid #ff6a3d !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

@media (max-width: 700px) {
  .hero-scroll-down {
    bottom: 12px;
    min-width: 118px;
    padding: 9px 14px 10px;
  }

  .hero-scroll-down span:first-child {
    font-size: 9px;
  }
}

/* v36 — minimal high-contrast scroll cue */
.hero-scroll-down {
  bottom: 18px;
  min-width: 0;
  padding: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111820 !important;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.32), 0 2px 8px rgba(255,255,255,.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

.hero-scroll-down span:first-child {
  color: #111820 !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .19em;
  line-height: 1;
}

.hero-scroll-down:hover,
.hero-scroll-down:focus-visible {
  transform: translateX(-50%) translateY(-3px);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #000 !important;
}

.hero-scroll-chevron {
  width: 12px;
  height: 12px;
  border-right: 2.5px solid #111820 !important;
  border-bottom: 2.5px solid #111820 !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}

@media (max-width: 700px) {
  .hero-scroll-down {
    bottom: 12px;
    min-width: 0;
    padding: 0;
  }

  .hero-scroll-down span:first-child {
    font-size: 9px;
  }
}


/* v37 — vertical scroll-reactive hero text gradient */
.hero.hero-art-showcase {
  --hero-gradient-shift: 8%;
}

.hero-art-showcase h1 {
  color: transparent !important;
  background-image: linear-gradient(
    180deg,
    #17324d 0%,
    #315f88 24%,
    #5f91b6 46%,
    #ef8d6f 72%,
    #ff6a3d 100%
  );
  background-size: 100% 240%;
  background-position: 50% var(--hero-gradient-shift);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 90ms linear;
  text-shadow: none !important;
}

.hero-art-showcase .lead {
  color: transparent !important;
  background-image: linear-gradient(
    180deg,
    #244f74 0%,
    #3f6d92 36%,
    #7b7f93 66%,
    #d6795e 100%
  );
  background-size: 100% 220%;
  background-position: 50% calc(var(--hero-gradient-shift) * .86);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 90ms linear;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  .hero-art-showcase h1 {
    background-size: 180% 180%;
  }

  .hero-art-showcase .lead {
    background-size: 180% 180%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-showcase h1,
  .hero-art-showcase .lead {
    background-position: 38% 50% !important;
    transition: none !important;
  }
}


/* v38 — live Cloudflare contact form */
.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form-status {
  min-height: 1.4em;
  margin: 4px 0 0;
  font-size: .82rem;
  line-height: 1.45;
}

.contact-form-status.is-success { color: #8de3b4; }
.contact-form-status.is-error { color: #ff9b7d; }

.contact-form .btn:disabled {
  opacity: .62;
  cursor: wait;
  transform: none !important;
}

/* v22 — mobile service cards: short edge feather, more video visible */
@media (max-width: 700px) {
  .service-showcase-card {
    background: #040508 !important;
    isolation: isolate;
  }

  /* Artwork stays large and visible on the right. */
  .service-art,
  .service-art-character,
  .service-art-background,
  .service-art-props {
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden;
    background: #040508 !important;
  }

  .service-art video,
  .service-art-character video,
  .service-art-background video,
  .service-art-props video {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 66% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% 50% !important;
    transform: none !important;
  }

  /* Smaller solid text area; it no longer blankets most of the video. */
  .service-showcase-copy {
    position: relative;
    z-index: 2 !important;
    width: 56% !important;
    min-height: 300px;
    padding: 24px 18px !important;
    background: #040508 !important;
    overflow: visible;
  }

  /* Very short feather only at the panel edge. */
  .service-showcase-copy::after {
    content: "";
    position: absolute;
    top: 0;
    right: -44px;
    width: 44px;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(4, 5, 8, 1) 0%,
      rgba(4, 5, 8, .90) 22%,
      rgba(4, 5, 8, .62) 52%,
      rgba(4, 5, 8, .28) 78%,
      rgba(4, 5, 8, 0) 100%
    );
  }

  .service-showcase-card::after {
    display: none !important;
    content: none !important;
  }
}

/* v23 — mobile service video framing: keep character face/head in frame after resizes */
@media (max-width: 700px) {
  .service-art video,
  .service-art-character video,
  .service-art-background video,
  .service-art-props video {
    /* Anchor the crop toward the upper-right instead of dead center. */
    object-position: 68% 14% !important;
  }

  /* Character artwork needs a slightly stronger top bias so the head survives narrow crops. */
  .service-art-character video {
    object-position: 66% 8% !important;
  }
}

@media (max-width: 520px) {
  .service-art-character video {
    object-position: 64% 6% !important;
  }
}

@media (max-width: 400px) {
  .service-art-character video {
    object-position: 62% 4% !important;
  }
}

/* =========================================================
   HERO INTRO PREVIEW — cinematic fade on initial page load
   ========================================================= */

.hero-art {
  animation: aftermotionHeroArtIntro 1.45s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: 58% 45%;
}

.hero-art-showcase .hero-content {
  animation: aftermotionHeroContentIntro .95s cubic-bezier(.22, 1, .36, 1) .22s both;
}

.site-header {
  animation: aftermotionHeaderIntro .82s cubic-bezier(.22, 1, .36, 1) .08s both;
}

@keyframes aftermotionHeroArtIntro {
  0% {
    opacity: 0;
    transform: scale(1.035);
    filter: brightness(.78) saturate(.92);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.02) saturate(1.02);
  }
}

@keyframes aftermotionHeroContentIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes aftermotionHeaderIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 700px) {
  .hero-art {
    animation-duration: 1.2s;
    transform-origin: 64% 42%;
  }

  .hero-art-showcase .hero-content {
    animation-duration: .82s;
    animation-delay: .18s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-art-showcase .hero-content,
  .site-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* =========================================================
   SCROLL DOWN CTA — clean single-source animation
   Fixes the visible disappear/reappear jump seen in wtf.mp4.
   No competing parent hover transforms, no chained reveal/loop.
   ========================================================= */

.hero-scroll-down {
  opacity: 0;
  transform: translate3d(-50%, 16px, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* One reveal animation only. */
  animation: aftermotionScrollRevealClean .88s cubic-bezier(.16, 1, .3, 1) 1.32s both;
}

/* Keep the CTA clickable throughout the reveal. */
.hero-scroll-down,
.hero-scroll-down:hover,
.hero-scroll-down:focus,
.hero-scroll-down:focus-visible,
.hero-scroll-down:active {
  pointer-events: auto;
}

/* Critical: hover/focus/active never touch the parent's transform.
   This prevents a cursor entering mid-reveal from replacing the animation transform. */
.hero-scroll-down:hover,
.hero-scroll-down:focus,
.hero-scroll-down:focus-visible,
.hero-scroll-down:active {
  opacity: inherit;
}

/* Continuous attention motion lives only on children.
   It starts from page load, so there is no reveal-to-loop handoff. */
.hero-scroll-down > span:first-child {
  display: inline-block;
  will-change: transform;
  animation: aftermotionScrollLabelClean 2.5s ease-in-out infinite;
}

.hero-scroll-chevron {
  opacity: .76;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: aftermotionChevronClean 2.5s ease-in-out infinite !important;
}

/* Disable the old decorative pseudo-element/ring entirely.
   It caused extra compositing work and made debugging harder. */
.hero-scroll-down::before {
  content: none !important;
  display: none !important;
}

@keyframes aftermotionScrollRevealClean {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 16px, 0);
  }
  100% {
    opacity: .96;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes aftermotionScrollLabelClean {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 2px, 0);
  }
}

@keyframes aftermotionChevronClean {
  0%, 100% {
    opacity: .70;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 6px, 0) rotate(45deg);
  }
}

@media (max-width: 700px) {
  .hero-scroll-down {
    animation-duration: .76s;
    animation-delay: 1.08s;
  }

  .hero-scroll-down > span:first-child,
  .hero-scroll-chevron {
    animation-duration: 2.35s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-down {
    animation: none !important;
    opacity: .96 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .hero-scroll-down > span:first-child,
  .hero-scroll-chevron {
    animation: none !important;
  }

  .hero-scroll-chevron {
    opacity: .76 !important;
    transform: rotate(45deg) !important;
  }
}

/* =========================================================
   BG services heading layout + localization polish
   Desktop: heading and intro each stay on one line.
   Smaller screens retain natural wrapping.
   ========================================================= */

@media (min-width: 1100px) {
  .animation-services .services-head {
    max-width: none;
    width: 100%;
  }

  .animation-services .services-head h2 {
    white-space: nowrap;
    font-size: clamp(38px, 3.15vw, 52px);
    letter-spacing: -0.025em;
  }

  .animation-services .services-intro {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.55;
  }
}

@media (max-width: 1099px) {
  .animation-services .services-head h2,
  .animation-services .services-intro {
    white-space: normal;
  }
}

/* =========================================================
   Services -> About section spacing fix
   Removes the oversized empty gap between the two sections.
   ========================================================= */

.animation-services {
  padding-bottom: 54px;
}

.about-accordion {
  padding-top: 58px;
}

@media (max-width: 900px) {
  .animation-services {
    padding-bottom: 42px;
  }

  .about-accordion {
    padding-top: 46px;
  }
}

@media (max-width: 560px) {
  .animation-services {
    padding-bottom: 34px;
  }

  .about-accordion {
    padding-top: 38px;
  }
}

/* =========================================================
   GLOBAL SECTION SPACING — tighter rhythm across the site
   Applies a more compact vertical cadence to all main sections.
   Keeps hero spacing separate.
   ========================================================= */

/* Base section rhythm */
.section {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Sections that already have custom identities keep them,
   but use the same tighter vertical cadence. */
.animation-services,
.about,
.about-accordion,
.portfolio,
.shop,
.contact,
.service-detail,
.service-highlights,
.service-process,
.project-detail {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Avoid doubled gaps where two sections touch. */
.section + .section,
.animation-services + .section,
.section + .about-accordion,
.about-accordion + .section,
.portfolio + .section,
.shop + .section {
  margin-top: 0;
}

/* Specific transition from services into about remains slightly tighter. */
.animation-services {
  padding-bottom: 48px;
}

.about-accordion {
  padding-top: 48px;
}

/* Tablet */
@media (max-width: 900px) {
  .section,
  .animation-services,
  .about,
  .about-accordion,
  .portfolio,
  .shop,
  .contact,
  .service-detail,
  .service-highlights,
  .service-process,
  .project-detail {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .animation-services {
    padding-bottom: 40px;
  }

  .about-accordion {
    padding-top: 40px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .section,
  .animation-services,
  .about,
  .about-accordion,
  .portfolio,
  .shop,
  .contact,
  .service-detail,
  .service-highlights,
  .service-process,
  .project-detail {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .animation-services {
    padding-bottom: 32px;
  }

  .about-accordion {
    padding-top: 32px;
  }
}

/* =========================================================
   PREMIUM CASTLE / HERO ART MOTION
   Subtle cinematic drift + pointer parallax + scroll depth.
   Keeps the existing hero fade, but removes the static feel.
   ========================================================= */

.hero-art {
  --hero-motion-x: 0px;
  --hero-motion-y: 0px;
  --hero-motion-scale: 1.018;

  opacity: 1;
  transform:
    translate3d(var(--hero-motion-x), var(--hero-motion-y), 0)
    scale(var(--hero-motion-scale));
  transform-origin: 62% 44%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Intro ends exactly at the same base transform used by the live motion. */
  animation: aftermotionCastleIntro 1.45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes aftermotionCastleIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(1.055);
    filter: brightness(.78) saturate(.92);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--hero-motion-x), var(--hero-motion-y), 0)
      scale(var(--hero-motion-scale));
    filter: brightness(1.02) saturate(1.02);
  }
}

/* A very soft light veil that moves independently from the artwork. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 36% 70%, rgba(255,170,95,.055), transparent 34%);
  opacity: .55;
  transform: translate3d(var(--hero-light-x, 0px), var(--hero-light-y, 0px), 0);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* Keep the old pseudo overlay disabled; ::before now carries the premium light motion. */
.hero-art::after {
  background: none !important;
}

@media (max-width: 700px) {
  .hero-art {
    --hero-motion-scale: 1.028;
    transform-origin: 68% 42%;
    animation-duration: 1.2s;
  }

  .hero-art::before {
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art {
    animation: none !important;
    transform: none !important;
  }

  .hero-art::before {
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   CONTACT MODAL — smooth cinematic backdrop blur
   Removes the hard-cut blur and eases darkness + blur together.
   ========================================================= */

.contact-modal-backdrop {
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  transition:
    background-color 520ms cubic-bezier(.16, 1, .3, 1),
    backdrop-filter 520ms cubic-bezier(.16, 1, .3, 1),
    -webkit-backdrop-filter 520ms cubic-bezier(.16, 1, .3, 1) !important;
  will-change: backdrop-filter, background-color;
}

.contact-modal.open .contact-modal-backdrop,
.contact-modal.is-open .contact-modal-backdrop,
.contact-modal[aria-hidden="false"] .contact-modal-backdrop {
  background: rgba(0, 0, 0, .72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Slightly softer panel entrance to match the blur ramp. */
.contact-modal-panel {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.975);
  transition:
    transform 560ms cubic-bezier(.16, 1, .3, 1),
    opacity 420ms ease !important;
  will-change: transform, opacity;
}

.contact-modal.open .contact-modal-panel,
.contact-modal.is-open .contact-modal-panel,
.contact-modal[aria-hidden="false"] .contact-modal-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 700px) {
  .contact-modal.open .contact-modal-backdrop,
  .contact-modal.is-open .contact-modal-backdrop,
  .contact-modal[aria-hidden="false"] .contact-modal-backdrop {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal-backdrop,
  .contact-modal-panel {
    transition: none !important;
  }
}

/* =========================================================
   HERO CASTLE — subtle wind particles
   Lightweight DOM particles with transform/opacity animation only.
   ========================================================= */

.hero-wind-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.hero-wind-particle {
  position: absolute;
  left: -8vw;
  top: var(--p-y, 50%);
  width: var(--p-w, 28px);
  height: var(--p-h, 1px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.42) 34%,
    rgba(255,226,190,.22) 66%,
    rgba(255,255,255,0)
  );
  filter: blur(.35px);
  transform: translate3d(0, 0, 0) rotate(var(--p-r, -4deg));
  will-change: transform, opacity;
  animation: aftermotionWindParticle var(--p-d, 8s) linear var(--p-delay, 0s) infinite;
}

.hero-wind-particle.is-speck {
  width: var(--p-w, 3px);
  height: var(--p-h, 3px);
  background: rgba(255,235,205,.65);
  box-shadow: 0 0 8px rgba(255,210,160,.20);
  filter: none;
}

@keyframes aftermotionWindParticle {
  0% {
    opacity: 0;
    transform:
      translate3d(-10vw, 0, 0)
      rotate(var(--p-r, -4deg));
  }

  10% {
    opacity: var(--p-o, .42);
  }

  54% {
    opacity: calc(var(--p-o, .42) * .9);
  }

  88% {
    opacity: var(--p-o, .42);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(120vw, var(--p-drift, -18px), 0)
      rotate(var(--p-r, -4deg));
  }
}

@media (max-width: 700px) {
  .hero-wind-particles {
    opacity: .72;
  }

  .hero-wind-particle:nth-child(n+11) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wind-particles {
    display: none !important;
  }
}

/* =========================================================
   HERO CASTLE — fantasy wind particles v2
   Replaces the first simple particle pass with denser,
   more organic wind-carried motion and subtle fantasy glow.
   ========================================================= */

/* Disable the old linear particle layer entirely. */
.hero-wind-particles {
  display: none !important;
}

.hero-wind-fantasy {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .96;
}

.hero-wind-fantasy-particle {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-wind-fantasy-particle.is-streak {
  height: 1.4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,245,226,.36) 28%,
    rgba(255,214,154,.32) 58%,
    rgba(255,255,255,0)
  );
  box-shadow:
    0 0 10px rgba(255,214,154,.08),
    0 0 18px rgba(160,205,255,.035);
  filter: blur(.25px);
}

.hero-wind-fantasy-particle.is-speck,
.hero-wind-fantasy-particle.is-glow {
  border-radius: 999px;
}

.hero-wind-fantasy-particle.is-speck {
  background:
    radial-gradient(circle, rgba(255,241,214,.90) 0%, rgba(255,215,155,.38) 55%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 10px rgba(255,224,179,.15);
}

.hero-wind-fantasy-particle.is-glow {
  background:
    radial-gradient(circle, rgba(196,226,255,.62) 0%, rgba(255,231,186,.44) 35%, rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 12px rgba(177,212,255,.15),
    0 0 18px rgba(255,208,145,.12);
  filter: blur(.18px);
}

@media (max-width: 700px) {
  .hero-wind-fantasy {
    opacity: .78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wind-fantasy {
    display: none !important;
  }
}

/* =========================================================
   HERO CASTLE — fantasy wind particles v3 (clearly visible)
   Stronger visibility while keeping a premium look.
   ========================================================= */

.hero-wind-fantasy {
  opacity: 1 !important;
  mix-blend-mode: screen;
}

.hero-wind-fantasy-particle.is-streak {
  height: 2px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,248,232,.78) 24%,
    rgba(255,204,136,.62) 54%,
    rgba(195,224,255,.38) 76%,
    rgba(255,255,255,0)
  ) !important;
  box-shadow:
    0 0 8px rgba(255,224,180,.34),
    0 0 18px rgba(172,211,255,.14) !important;
  filter: blur(.15px) !important;
}

.hero-wind-fantasy-particle.is-speck {
  background:
    radial-gradient(circle,
      rgba(255,252,238,1) 0%,
      rgba(255,213,152,.78) 42%,
      rgba(255,205,130,.18) 72%,
      rgba(255,255,255,0) 100%
    ) !important;
  box-shadow:
    0 0 7px rgba(255,231,190,.55),
    0 0 14px rgba(255,192,112,.24) !important;
}

.hero-wind-fantasy-particle.is-glow {
  background:
    radial-gradient(circle,
      rgba(224,241,255,.95) 0%,
      rgba(255,226,179,.78) 34%,
      rgba(196,219,255,.18) 68%,
      rgba(255,255,255,0) 100%
    ) !important;
  box-shadow:
    0 0 14px rgba(190,224,255,.38),
    0 0 24px rgba(255,205,138,.24) !important;
}

@media (max-width: 700px) {
  .hero-wind-fantasy {
    opacity: .92 !important;
  }
}

/* Full-frame particle positioning fix */
.hero-wind-fantasy-particle {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform-origin: center center;
}

.hero-wind-fantasy {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}



/* =========================================================
   HERO CASTLE — particle layer reveal
   Keeps particles hidden until the castle intro is underway,
   then fades them in smoothly.
   ========================================================= */
.hero-wind-fantasy {
  opacity: 0 !important;
  transition: opacity 1.35s cubic-bezier(.22, 1, .36, 1) !important;
}

.hero-wind-fantasy.is-revealed {
  opacity: 1 !important;
}

@media (max-width: 700px) {
  .hero-wind-fantasy.is-revealed {
    opacity: .92 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wind-fantasy {
    transition: none !important;
  }
}


/* =========================================================
   HERO COPY — scroll-linked depth
   Heading comes slightly forward; lead/buttons recede.
   Uses individual transform properties to avoid fighting
   the existing intro animations.
   ========================================================= */
.hero.hero-art-showcase .hero-content h1 {
  translate: 0 var(--hero-copy-h1-y, 0px);
  scale: var(--hero-copy-h1-scale, 1);
  letter-spacing: var(--hero-copy-h1-spacing, normal);
  transform-origin: 0% 58%;
  will-change: translate, scale, letter-spacing;
}

.hero.hero-art-showcase .hero-content .lead {
  translate: 0 var(--hero-copy-lead-y, 0px);
  scale: var(--hero-copy-lead-scale, 1);
  opacity: var(--hero-copy-lead-opacity, 1);
  transform-origin: 0% 0%;
  will-change: translate, scale, opacity;
}

.hero.hero-art-showcase .hero-actions {
  translate: 0 var(--hero-copy-actions-y, 0px);
  opacity: var(--hero-copy-actions-opacity, 1);
  will-change: translate, opacity;
}

@media (max-width: 700px) {
  .hero.hero-art-showcase .hero-content h1 {
    transform-origin: 0% 55%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-art-showcase .hero-content h1,
  .hero.hero-art-showcase .hero-content .lead,
  .hero.hero-art-showcase .hero-actions {
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    letter-spacing: normal !important;
  }
}


/* Hero eyebrow / studio label — very subtle scroll scale, left anchored */
.hero.hero-art-showcase .hero-content .eyebrow,
.hero.hero-art-showcase .hero-content .kicker {
  scale: var(--hero-copy-eyebrow-scale, 1);
  transform-origin: 0% 50%;
  will-change: scale;
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-art-showcase .hero-content .eyebrow,
  .hero.hero-art-showcase .hero-content .kicker {
    scale: 1 !important;
  }
}


/* =========================================================
   HERO COPY — one natural shared scroll scale group
   Eyebrow + title + lead behave as one left-anchored block.
   ========================================================= */
.hero.hero-art-showcase .hero-copy-scale-group {
  scale: var(--hero-copy-group-scale, 1);
  transform-origin: 0% 50%;
  will-change: scale;
}

/* Prevent nested/double scaling from the earlier experiments. */
.hero.hero-art-showcase .hero-copy-scale-group h1 {
  scale: 1 !important;
}

.hero.hero-art-showcase .hero-copy-scale-group .lead {
  scale: 1 !important;
}

.hero.hero-art-showcase .hero-copy-scale-group .eyebrow,
.hero.hero-art-showcase .hero-copy-scale-group .kicker {
  scale: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-art-showcase .hero-copy-scale-group {
    scale: 1 !important;
  }
}


/* =========================================================
   HERO TITLE + LEAD — move as one natural block
   The paragraph is no longer independently scaled/moved.
   ========================================================= */
.hero.hero-art-showcase .hero-title-lead-group {
  translate: 0 var(--hero-title-lead-y, 0px);
  scale: var(--hero-title-lead-scale, 1);
  transform-origin: 0% 50%;
  will-change: translate, scale;
}

.hero.hero-art-showcase .hero-title-lead-group h1,
.hero.hero-art-showcase .hero-title-lead-group .lead {
  translate: none !important;
  scale: 1 !important;
  transform-origin: 0% 50% !important;
}

.hero.hero-art-showcase .hero-title-lead-group .lead {
  opacity: var(--hero-title-lead-opacity, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-art-showcase .hero-title-lead-group {
    translate: none !important;
    scale: 1 !important;
  }

  .hero.hero-art-showcase .hero-title-lead-group .lead {
    opacity: 1 !important;
  }
}


/* =========================================================
   SUBPAGE BREADCRUMB NAV — compact premium strip
   Hidden from homepages because markup is only injected
   into inner pages.
   ========================================================= */
.page-breadcrumb-wrap {
  position: relative;
  z-index: 20;
  border-top: 1px solid rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg, rgba(16,18,24,.78), rgba(10,12,17,.72));
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

.page-breadcrumb {
  width: min(1200px, calc(100% - 48px));
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  overflow: hidden;
}

.page-breadcrumb a,
.page-breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-breadcrumb a {
  color: rgba(255,255,255,.58);
  text-decoration: none;
  transition: color .22s ease, opacity .22s ease;
}

.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible {
  color: rgba(255,255,255,.92);
}

.page-breadcrumb-sep {
  color: rgba(255,255,255,.22);
  transform: translateY(-.5px);
}

.page-breadcrumb-current {
  color: rgba(255,255,255,.9);
  font-weight: 560;
}

@media (max-width: 700px) {
  .page-breadcrumb {
    width: min(100% - 28px, 1200px);
    min-height: 40px;
    gap: 8px;
    font-size: 12px;
  }
}


/* Breadcrumb placement fix — sits BELOW the fixed main header */
.page-breadcrumb-wrap {
  margin-top: 94px;
  z-index: 9;
}

@media (max-width: 700px) {
  .page-breadcrumb-wrap {
    margin-top: 78px;
  }
}


/* =========================================================
   INNER PAGE UX FIX
   1) Breadcrumb stays glued directly below the fixed header.
   2) Service animation previews show the full animation frame
      instead of cropping the character with object-fit: cover.
   ========================================================= */

/* Header stays above breadcrumb */
.site-header {
  z-index: 30;
}

/* Sticky/fixed breadcrumb directly under the main header */
.page-breadcrumb-wrap {
  position: fixed !important;
  top: 94px !important;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0 !important;
  z-index: 29 !important;
}

/* Give inner-page hero enough room under header + breadcrumb */
.service-detail-hero {
  padding-top: 176px;
}

/* Client-facing animation preview: show the complete video frame */
.service-detail-media {
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #000;
}

.service-detail-media video {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}

/* Keep the preview useful and fully visible on tablets/mobile too */
@media (max-width: 980px) {
  .page-breadcrumb-wrap {
    top: 94px !important;
  }

  .service-detail-hero {
    padding-top: 176px;
  }

  .service-detail-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .page-breadcrumb-wrap {
    top: 78px !important;
  }

  .service-detail-hero {
    padding-top: 142px;
  }

  .service-detail-media {
    aspect-ratio: 16 / 9;
    border-radius: 24px;
  }
}


/* =========================================================
   INNER PAGE FINAL LAYOUT FIX
   1) Breadcrumb remains visually glued to the header while scrolling.
   2) Preview frame follows the MP4 aspect ratio instead of forcing 16:9,
      removing dead side space around portrait animation videos.
   ========================================================= */

/* Fixed header + fixed breadcrumb behave as one stacked navigation unit */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 40 !important;
}

.page-breadcrumb-wrap {
  position: fixed !important;
  top: var(--aftermotion-header-height, 94px) !important;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 39 !important;
}

/* Inner content begins below both fixed bars */
.service-detail-hero {
  padding-top: calc(var(--aftermotion-header-height, 94px) + 74px) !important;
}

/* Let the media frame size itself around the actual video ratio */
.service-detail-media {
  min-height: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  background: #000;
}

.service-detail-media video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 720px) !important;
  max-height: 68vh !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Portrait MP4 preview used by character animation page */
.service-detail-media:has(video[src*="character-animation"]) {
  aspect-ratio: auto !important;
}

.service-detail-media:has(video[src*="character-animation"]) video {
  width: auto !important;
  height: min(68vh, 720px) !important;
  max-width: 100% !important;
}

/* Landscape previews still use their natural video width */
.service-detail-media:has(video[src*="background-animation"]) video,
.service-detail-media:has(video[src*="props-animation"]) video {
  width: min(100%, 900px) !important;
  height: auto !important;
}

@media (max-width: 700px) {
  :root {
    --aftermotion-header-height: 78px;
  }

  .service-detail-hero {
    padding-top: calc(var(--aftermotion-header-height, 78px) + 64px) !important;
  }

  .service-detail-media {
    width: 100% !important;
  }

  .service-detail-media video {
    max-width: 100% !important;
    max-height: 58vh !important;
  }

  .service-detail-media:has(video[src*="character-animation"]) video {
    width: auto !important;
    height: min(58vh, 620px) !important;
  }
}


/* =========================================================
   PREMIUM INNER-PAGE NAV + MEDIA EXPERIENCE
   - No visual gap between fixed header and breadcrumb
   - Larger portrait animation preview
   - Fullscreen click-to-zoom lightbox with blurred backdrop
   ========================================================= */

:root {
  --aftermotion-header-height: 94px;
  --aftermotion-crumb-height: 56px;
}

/* Make header + breadcrumb a single stacked fixed unit with no gap */
.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

.page-breadcrumb-wrap {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--aftermotion-header-height) - 1px) !important;
  min-height: var(--aftermotion-crumb-height) !important;
  margin: 0 !important;
  z-index: 999 !important;
  border-top: 0 !important;
}

/* Prevent the fixed stack from covering content */
.service-detail-hero {
  padding-top:
    calc(
      var(--aftermotion-header-height) +
      var(--aftermotion-crumb-height) +
      42px
    ) !important;
}

/* Bigger, premium portrait preview */
.service-detail-media {
  width: min(44vw, 640px) !important;
  max-width: 100% !important;
  aspect-ratio: 1122 / 1512 !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(91, 63, 154, .10), rgba(0,0,0,.96) 68%) !important;
  border: 1px solid rgba(255, 103, 68, .28) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.015) inset !important;
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    box-shadow .42s cubic-bezier(.16,1,.3,1),
    border-color .42s ease !important;
}

.service-detail-media:hover {
  transform: translateY(-4px) scale(1.012) !important;
  border-color: rgba(255, 103, 68, .52) !important;
  box-shadow:
    0 34px 86px rgba(0,0,0,.52),
    0 0 44px rgba(255, 103, 68, .07) !important;
}

.service-detail-media video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Character preview deserves a slightly higher visual focus */
.service-detail-media:has(video[src*="character-animation"]) video {
  object-position: center 42% !important;
}

/* Fullscreen media lightbox */
.aftermotion-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 48px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .34s ease,
    visibility 0s linear .34s;
}

.aftermotion-media-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .34s ease,
    visibility 0s linear 0s;
}

.aftermotion-media-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 12, .72);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
  opacity: 0;
  transition: opacity .42s ease;
}

.aftermotion-media-lightbox.is-open .aftermotion-media-lightbox__backdrop {
  opacity: 1;
}

.aftermotion-media-lightbox__stage {
  position: relative;
  z-index: 2;
  width: min(92vw, 980px);
  height: min(88vh, 980px);
  display: grid;
  place-items: center;
  transform: translateY(18px) scale(.965);
  opacity: 0;
  transition:
    transform .48s cubic-bezier(.16,1,.3,1),
    opacity .34s ease;
}

.aftermotion-media-lightbox.is-open .aftermotion-media-lightbox__stage {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.aftermotion-media-lightbox__video {
  width: auto;
  height: min(88vh, 980px);
  max-width: 92vw;
  object-fit: contain;
  display: block;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow:
    0 48px 130px rgba(0,0,0,.72),
    0 0 80px rgba(124, 88, 255, .09);
  background: #000;
}

.aftermotion-media-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10,12,17,.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.aftermotion-media-lightbox__close:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
}

body.aftermotion-lightbox-open {
  overflow: hidden !important;
}

@media (max-width: 980px) {
  .service-detail-media {
    width: min(68vw, 560px) !important;
  }
}

@media (max-width: 700px) {
  :root {
    --aftermotion-header-height: 78px;
    --aftermotion-crumb-height: 44px;
  }

  .service-detail-hero {
    padding-top:
      calc(
        var(--aftermotion-header-height) +
        var(--aftermotion-crumb-height) +
        28px
      ) !important;
  }

  .service-detail-media {
    width: min(88vw, 500px) !important;
  }

  .aftermotion-media-lightbox {
    padding: 12px;
  }

  .aftermotion-media-lightbox__stage {
    width: 96vw;
    height: 92vh;
  }

  .aftermotion-media-lightbox__video {
    max-width: 96vw;
    height: auto;
    max-height: 92vh;
  }

  .aftermotion-media-lightbox__close {
    top: 10px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-media,
  .aftermotion-media-lightbox,
  .aftermotion-media-lightbox__backdrop,
  .aftermotion-media-lightbox__stage {
    transition: none !important;
  }
}


/* =========================================================
   FLUID BREADCRUMB + LIGHTBOX POLISH
   - Breadcrumb shrinks with the header on scroll
   - Close button is pinned to viewport top-right
   - Scrollbar stays visible during zoom
   - Backdrop blur fades in/out smoothly
   ========================================================= */

:root {
  --aftermotion-crumb-scale: 1;
  --aftermotion-crumb-height-live: 56px;
  --aftermotion-crumb-pad-x: 0px;
}

/* Let the whole breadcrumb unit breathe/shrink with the header */
.page-breadcrumb-wrap {
  min-height: var(--aftermotion-crumb-height-live) !important;
  height: var(--aftermotion-crumb-height-live) !important;
  transition:
    height .28s cubic-bezier(.16,1,.3,1),
    background-color .28s ease,
    border-color .28s ease !important;
  overflow: hidden;
}

.page-breadcrumb {
  min-height: var(--aftermotion-crumb-height-live) !important;
  transform-origin: 0% 50%;
  transform: scale(var(--aftermotion-crumb-scale));
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    min-height .28s cubic-bezier(.16,1,.3,1) !important;
  will-change: transform;
}

/* The fixed content offset follows the live crumb height */
.service-detail-hero {
  padding-top:
    calc(
      var(--aftermotion-header-height) +
      var(--aftermotion-crumb-height-live) +
      42px
    ) !important;
}

/* Lightbox keeps page geometry intact: no scrollbar removal */
body.aftermotion-lightbox-open {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

/* Smooth blur: start from zero blur instead of snapping */
.aftermotion-media-lightbox__backdrop {
  background: rgba(5, 7, 12, 0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  opacity: 1;
  transition:
    background-color .52s cubic-bezier(.16,1,.3,1),
    -webkit-backdrop-filter .52s cubic-bezier(.16,1,.3,1),
    backdrop-filter .52s cubic-bezier(.16,1,.3,1) !important;
}

.aftermotion-media-lightbox.is-open .aftermotion-media-lightbox__backdrop {
  background: rgba(5, 7, 12, .72);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}

/* Close button always belongs to the viewport corner */
.aftermotion-media-lightbox__close {
  position: fixed !important;
  top: max(18px, env(safe-area-inset-top)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  z-index: 5003 !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  :root {
    --aftermotion-crumb-height-live: 44px;
  }

  .service-detail-hero {
    padding-top:
      calc(
        var(--aftermotion-header-height) +
        var(--aftermotion-crumb-height-live) +
        28px
      ) !important;
  }

  .aftermotion-media-lightbox__close {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
}


/* =========================================================
   PREMIUM POLISH v2
   - Breadcrumb follows the SAME .is-scrolled state as header
   - No separate transform/scale controller = no jump
   - Lightbox X sits on the media corner
   - Click anywhere outside the video closes
   - Scrollbar remains visible
   - Character title gets restrained scroll Y motion
   ========================================================= */

/* Breadcrumb: same state machine as the header */
.page-breadcrumb-wrap {
  --crumb-h: 56px;
  top: calc(var(--aftermotion-header-height) - 1px) !important;
  height: var(--crumb-h) !important;
  min-height: var(--crumb-h) !important;
  overflow: hidden !important;
  transition:
    height 320ms cubic-bezier(.2,.75,.25,1),
    background-color 320ms ease,
    border-color 320ms ease !important;
}

.page-breadcrumb {
  min-height: var(--crumb-h) !important;
  transform: none !important;
  scale: 1 !important;
  transition:
    min-height 320ms cubic-bezier(.2,.75,.25,1),
    font-size 320ms cubic-bezier(.2,.75,.25,1),
    gap 320ms cubic-bezier(.2,.75,.25,1),
    opacity 320ms ease !important;
}

/* This is the key: breadcrumb responds to the exact same header class */
.site-header.is-scrolled + .page-breadcrumb-wrap {
  --crumb-h: 46px;
  background:
    linear-gradient(180deg, rgba(10,12,17,.95), rgba(8,10,14,.92)) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

.site-header.is-scrolled + .page-breadcrumb-wrap .page-breadcrumb {
  font-size: 12px !important;
  gap: 8px !important;
  opacity: .96;
}

/* Content offset follows the breadcrumb's CSS state smoothly */
.service-detail-hero {
  padding-top:
    calc(
      var(--aftermotion-header-height) +
      56px +
      42px
    ) !important;
  transition: padding-top 320ms cubic-bezier(.2,.75,.25,1);
}

.site-header.is-scrolled ~ .service-detail-hero {
  padding-top:
    calc(
      var(--aftermotion-header-height) +
      46px +
      42px
    ) !important;
}

/* Character title: subtle clamped Y motion only */
.service-detail-copy h1 {
  --service-title-y: 0px;
  transform: translate3d(0, var(--service-title-y), 0);
  will-change: transform;
}

/* Lightbox stage wraps the portrait media instead of occupying empty space */
.aftermotion-media-lightbox__stage {
  width: max-content !important;
  height: max-content !important;
  max-width: 92vw !important;
  max-height: 88vh !important;
  display: inline-grid !important;
  place-items: center !important;
}

/* X pinned to top-right corner of the actual media */
.aftermotion-media-lightbox__close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 6 !important;
  margin: 0 !important;
}

/* Keep the layout width stable when lightbox opens */
body.aftermotion-lightbox-open {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
}

/* Backdrop enters smoothly from zero blur */
.aftermotion-media-lightbox__backdrop {
  background: rgba(5, 7, 12, 0) !important;
  -webkit-backdrop-filter: blur(0px) saturate(100%) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  transition:
    background-color 560ms cubic-bezier(.16,1,.3,1),
    -webkit-backdrop-filter 560ms cubic-bezier(.16,1,.3,1),
    backdrop-filter 560ms cubic-bezier(.16,1,.3,1) !important;
}

.aftermotion-media-lightbox.is-open .aftermotion-media-lightbox__backdrop {
  background: rgba(5, 7, 12, .72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
}

@media (max-width: 700px) {
  .page-breadcrumb-wrap {
    --crumb-h: 44px;
  }

  .site-header.is-scrolled + .page-breadcrumb-wrap {
    --crumb-h: 39px;
  }

  .service-detail-hero {
    padding-top:
      calc(
        var(--aftermotion-header-height) +
        44px +
        28px
      ) !important;
  }

  .site-header.is-scrolled ~ .service-detail-hero {
    padding-top:
      calc(
        var(--aftermotion-header-height) +
        39px +
        28px
      ) !important;
  }

  .aftermotion-media-lightbox__close {
    top: 8px !important;
    right: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-copy h1 {
    transform: none !important;
  }
}



/* =========================================================
   BREADCRUMB — LOCKED TO HEADER + LOGO ANCHOR
   No independent scale animation, no jumpy re-measure loop.
   ========================================================= */
:root {
  --am-header-bottom: 94px;
  --am-logo-left: 32px;
  --am-crumb-h: 52px;
}

/* Header remains the single source of truth */
.site-header {
  z-index: 1000 !important;
}

/* Bar sits exactly under the CURRENT visual header bottom */
.page-breadcrumb-wrap {
  position: fixed !important;
  top: var(--am-header-bottom) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--am-crumb-h) !important;
  min-height: var(--am-crumb-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999 !important;
  overflow: hidden !important;

  border-top: 0 !important;
  transition:
    top 180ms linear,
    height 260ms cubic-bezier(.16,1,.3,1),
    background-color 260ms ease,
    border-color 260ms ease !important;
}

/* Inner row is aligned to the REAL logo left edge */
.page-breadcrumb {
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding:
    0
    max(24px, env(safe-area-inset-right))
    0
    var(--am-logo-left) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  transform: none !important;
  scale: 1 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  transition:
    padding-left 180ms linear,
    font-size 260ms cubic-bezier(.16,1,.3,1),
    gap 260ms cubic-bezier(.16,1,.3,1) !important;
}

/* Compact only through the same header state; no separate scroll controller */
.site-header.is-scrolled + .page-breadcrumb-wrap {
  --am-crumb-h: 46px;
}

.site-header.is-scrolled + .page-breadcrumb-wrap .page-breadcrumb {
  font-size: 12px !important;
  gap: 8px !important;
}

/* Keep text truly centered inside the bar at all times */
.page-breadcrumb > * {
  flex: 0 0 auto;
  align-self: center;
}

/* Stable page offset: no content hop while header compacts */
.service-detail-hero,
.site-header.is-scrolled ~ .service-detail-hero {
  padding-top:
    calc(
      var(--am-header-bottom) +
      52px +
      36px
    ) !important;
}

@media (max-width: 700px) {
  :root {
    --am-header-bottom: 78px;
    --am-logo-left: 14px;
    --am-crumb-h: 44px;
  }

  .site-header.is-scrolled + .page-breadcrumb-wrap {
    --am-crumb-h: 40px;
  }

  .page-breadcrumb {
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .service-detail-hero,
  .site-header.is-scrolled ~ .service-detail-hero {
    padding-top:
      calc(
        var(--am-header-bottom) +
        44px +
        26px
      ) !important;
  }
}


/* =========================================================
   BREADCRUMB FINAL POLISH
   - Prevents fast-scroll gap with a small physical overlap
   - No delayed top transition
   - ~25% translucent / almost invisible strip
   ========================================================= */
.page-breadcrumb-wrap {
  /* overlap the header by 3px so a one-frame scroll/update lag can never show a seam */
  top: calc(var(--am-header-bottom) - 3px) !important;

  /* do NOT animate the top position; this was the source of the visible fast-scroll gap */
  transition:
    height 260ms cubic-bezier(.16,1,.3,1),
    background-color 260ms ease,
    border-color 260ms ease !important;

  /* roughly 25% visible tint, intentionally very subtle */
  background:
    linear-gradient(
      180deg,
      rgba(12, 14, 20, .25),
      rgba(8, 10, 15, .22)
    ) !important;

  border-bottom-color: rgba(255,255,255,.045) !important;

  -webkit-backdrop-filter: blur(8px) saturate(108%);
  backdrop-filter: blur(8px) saturate(108%);
}

/* Keep the compact state just as subtle instead of becoming opaque */
.site-header.is-scrolled + .page-breadcrumb-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 17, .27),
      rgba(8, 10, 14, .24)
    ) !important;

  border-bottom-color: rgba(255,255,255,.055) !important;
}

/* Slightly soften inactive breadcrumb text so the strip almost disappears */
.page-breadcrumb a {
  color: rgba(255,255,255,.50) !important;
}

.page-breadcrumb-current {
  color: rgba(255,255,255,.84) !important;
}


/* =========================================================
   BREADCRUMB — PHYSICALLY ATTACHED TO HEADER
   No scroll measuring. No top syncing. No jumping.
   The bar lives inside the fixed header and follows it 1:1.
   ========================================================= */

.site-header {
  overflow: visible !important;
}

/* Breadcrumb is a real child of the header and hangs directly below it */
.site-header > .page-breadcrumb-wrap {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999 !important;

  /* keep the subtle ~25% tint you liked */
  background:
    linear-gradient(
      180deg,
      rgba(12, 14, 20, .25),
      rgba(8, 10, 15, .22)
    ) !important;

  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;

  -webkit-backdrop-filter: blur(8px) saturate(108%);
  backdrop-filter: blur(8px) saturate(108%);

  /* only height/color can animate; position never does */
  transition:
    height 260ms cubic-bezier(.16,1,.3,1),
    background-color 260ms ease,
    border-color 260ms ease !important;

  overflow: hidden !important;
}

/* Compact state follows the same .is-scrolled class as the header */
.site-header.is-scrolled > .page-breadcrumb-wrap {
  height: 46px !important;
  min-height: 46px !important;
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 17, .27),
      rgba(8, 10, 14, .24)
    ) !important;
}

/* The breadcrumb row uses the SAME horizontal inset as the header/logo */
.site-header > .page-breadcrumb-wrap .page-breadcrumb {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;

  /* same left/right inset as the header */
  padding-left: var(--am-header-inline, 32px) !important;
  padding-right: var(--am-header-inline, 32px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  transform: none !important;
  scale: 1 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;

  transition:
    font-size 260ms cubic-bezier(.16,1,.3,1),
    gap 260ms cubic-bezier(.16,1,.3,1) !important;
}

.site-header.is-scrolled > .page-breadcrumb-wrap .page-breadcrumb {
  font-size: 12px !important;
  gap: 8px !important;
}

/* Stable content offset; bar movement cannot affect layout */
.service-detail-hero,
.site-header.is-scrolled ~ .service-detail-hero {
  padding-top: 184px !important;
}

@media (max-width: 700px) {
  :root {
    --am-header-inline: 14px;
  }

  .site-header > .page-breadcrumb-wrap {
    height: 44px !important;
    min-height: 44px !important;
  }

  .site-header.is-scrolled > .page-breadcrumb-wrap {
    height: 40px !important;
    min-height: 40px !important;
  }

  .service-detail-hero,
  .site-header.is-scrolled ~ .service-detail-hero {
    padding-top: 150px !important;
  }
}


/* =========================================================
   SERVICE DETAIL TITLE — RESPONSIVE TO ITS OWN COPY CONTAINER
   Prevents long titles such as "Animated Backgrounds"
   from running underneath the MP4 column.
   ========================================================= */
.service-detail-copy {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 720px !important;
  container-type: inline-size;
  container-name: service-copy;
}

.service-detail-copy h1 {
  max-width: 100% !important;
  width: fit-content;
  font-size: clamp(50px, 13.2cqw, 108px) !important;
  line-height: .90 !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

/* Fallback for browsers without container query units */
@supports not (font-size: 1cqw) {
  .service-detail-copy h1 {
    font-size: clamp(50px, 5vw, 92px) !important;
  }
}

@media (max-width: 980px) {
  .service-detail-copy {
    max-width: 780px !important;
  }

  .service-detail-copy h1 {
    font-size: clamp(48px, 12.6cqw, 92px) !important;
  }
}

@media (max-width: 640px) {
  .service-detail-copy h1 {
    font-size: clamp(42px, 13.5cqw, 68px) !important;
    line-height: .92 !important;
  }
}


/* =========================================================
   SERVICE DETAIL COPY — STICKY FOCUS PANEL
   The left copy follows the scroll while the MP4 remains in view,
   then stops naturally at the end of the service hero section.
   ========================================================= */

/* The section becomes the hard min/max boundary for the sticky copy */
.service-detail-hero {
  align-items: start !important;
}

/* Left panel follows scroll, but is bounded by .service-detail-hero */
.service-detail-copy {
  position: sticky !important;
  top:
    calc(
      var(--aftermotion-header-height, 94px) +
      52px +
      28px
    ) !important;

  align-self: start !important;
  z-index: 2;
  will-change: transform;
}

/* Keep enough bottom room so the sticky block never crashes into next section */
.service-detail-hero {
  padding-bottom: clamp(72px, 8vw, 132px) !important;
}

/* Slightly calmer behavior on tablet */
@media (max-width: 980px) {
  .service-detail-copy {
    top:
      calc(
        var(--aftermotion-header-height, 94px) +
        50px +
        22px
      ) !important;
  }
}

/* On mobile the layout is stacked, so sticky would feel awkward.
   Keep it natural there. */
@media (max-width: 700px) {
  .service-detail-copy {
    position: relative !important;
    top: auto !important;
  }

  .service-detail-hero {
    padding-bottom: 64px !important;
  }
}


/* =========================================================
   SERVICE COPY — REAL SCROLL FOLLOW
   Replaces the failed sticky behavior with explicit scroll-linked
   movement bounded by the hero section and media height.
   ========================================================= */
.service-detail-copy {
  position: relative !important;
  top: auto !important;
  transform:
    translate3d(0, var(--service-copy-follow-y, 0px), 0) !important;
  will-change: transform;
  transition: none !important;
}

@media (max-width: 700px) {
  .service-detail-copy {
    transform: none !important;
  }
}


/* =========================================================
   SERVICE COPY — SMOOTH LERP FOLLOW
   Starts fully visible at natural position, then follows scroll
   with eased drag and hard section/media bounds.
   ========================================================= */
.service-detail-copy {
  position: relative !important;
  top: auto !important;
  transform:
    translate3d(0, var(--service-copy-follow-y, 0px), 0) !important;
  will-change: transform;
  transition: none !important;
}

/* Keep initial composition fully readable */
.service-detail-hero {
  align-items: start !important;
}

@media (max-width: 700px) {
  .service-detail-copy {
    transform: none !important;
  }
}


/* =========================================================
   DESKTOP SERVICE DETAIL — LEFT PANEL COMPACT ONLY
   IMPORTANT: MP4/media sizing is intentionally untouched.
   Only the left copy + buttons are tightened so CTAs fit.
   ========================================================= */

@media (min-width: 981px) {
  .service-detail-copy {
    max-width: 650px !important;
  }

  .service-detail-copy h1 {
    font-size: clamp(58px, 5.8vw, 88px) !important;
    line-height: .89 !important;
    margin-bottom: 20px !important;
  }

  .service-detail-copy .eyebrow,
  .service-detail-copy .kicker {
    margin-bottom: 14px !important;
  }

  .service-detail-copy .lead,
  .service-detail-copy p {
    font-size: clamp(19px, 1.55vw, 25px) !important;
    line-height: 1.42 !important;
  }

  .service-detail-copy .hero-actions,
  .service-detail-copy .service-detail-actions,
  .service-detail-copy .actions {
    margin-top: 28px !important;
  }
}

/* Extra-tight left panel only for shorter desktop screens */
@media (min-width: 981px) and (max-height: 820px) {
  .service-detail-copy h1 {
    font-size: clamp(52px, 5.2vw, 78px) !important;
    margin-bottom: 16px !important;
  }

  .service-detail-copy .eyebrow,
  .service-detail-copy .kicker {
    margin-bottom: 12px !important;
  }

  .service-detail-copy .lead,
  .service-detail-copy p {
    font-size: clamp(18px, 1.35vw, 22px) !important;
    line-height: 1.38 !important;
  }

  .service-detail-copy .hero-actions,
  .service-detail-copy .service-detail-actions,
  .service-detail-copy .actions {
    margin-top: 22px !important;
  }
}


/* =========================================================
   SERVICE COPY FOLLOW — TRUE DESKTOP ONLY
   Tablet / narrow laptop layouts stay completely static.
   ========================================================= */
@media (max-width: 1279px) {
  .service-detail-copy {
    transform: none !important;
  }
}


/* =========================================================
   SERVICE DETAIL — ALIGN LEFT COPY TO MEDIA TOP
   The left panel starts on the same top line as the MP4 card.
   ========================================================= */
@media (min-width: 1280px) {
  .service-detail-copy,
  .service-detail-media {
    align-self: start !important;
  }

  .service-detail-copy {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .service-detail-copy .eyebrow,
  .service-detail-copy .kicker {
    margin-top: 0 !important;
  }
}


/* =========================================================
   TOP ALIGN — MOBILE CLEAN FIX
   Exact TOP ALIGN baseline preserved.
   Only:
   1) mobile header/breadcrumb layout
   2) reliable tap-to-zoom on preview
   Desktop untouched.
   ========================================================= */
@media (max-width: 700px) {
  /* Header remains the fixed parent; breadcrumb stays physically attached. */
  .site-header {
    overflow: visible !important;
  }

  .site-header > .page-breadcrumb-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;
    overflow: hidden !important;
  }

  .site-header.is-scrolled > .page-breadcrumb-wrap {
    height: 40px !important;
    min-height: 40px !important;
  }

  .site-header > .page-breadcrumb-wrap .page-breadcrumb {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    transform: none !important;
    scale: 1 !important;
  }

  .page-breadcrumb a {
    flex: 0 0 auto !important;
  }

  .page-breadcrumb-current {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Mobile menu must sit above the breadcrumb layer. */
  .menu-toggle {
    position: relative !important;
    z-index: 4 !important;
  }

  .site-nav,
  .site-nav.open {
    z-index: 3 !important;
  }

  /* Keep the content below header + breadcrumb without changing desktop. */
  .service-detail-hero,
  .site-header.is-scrolled ~ .service-detail-hero {
    padding-top: 150px !important;
  }

  /* Reliable tap target:
     the existing TOP ALIGN lightbox JS listens on the card.
     Let the tap reach the card instead of native <video>. */
  .service-detail-media {
    position: relative !important;
    pointer-events: auto !important;
    cursor: zoom-in !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .service-detail-media video {
    pointer-events: none !important;
  }

  .service-detail-media::before,
  .service-detail-media::after {
    pointer-events: none !important;
  }

  /* Keep lightbox above header/menu on phone. */
  .aftermotion-media-lightbox {
    z-index: 5000 !important;
  }

  .aftermotion-media-lightbox__stage {
    max-width: 96vw !important;
    max-height: 92vh !important;
  }

  .aftermotion-media-lightbox__video {
    width: auto !important;
    height: auto !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    pointer-events: auto !important;
  }
}


/* =========================================================
   MOBILE SERVICE TITLE FIT
   Prevent long headings from running outside the viewport.
   Desktop/tablet behavior stays untouched.
   ========================================================= */
@media (max-width: 700px) {
  .service-detail-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .service-detail-copy h1 {
    width: 100% !important;
    max-width: 100% !important;

    /* Fits long titles like ANIMATED BACKGROUNDS safely */
    font-size: clamp(44px, 13.2vw, 68px) !important;
    line-height: .90 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;

    box-sizing: border-box !important;
  }
}

/* Extra safety for narrow phones */
@media (max-width: 430px) {
  .service-detail-copy h1 {
    font-size: clamp(40px, 12.6vw, 58px) !important;
    line-height: .92 !important;
  }
}


/* =========================================================
   SERVICE TITLE FIT — ALL NARROW / STACKED SCREENS
   The previous 700px breakpoint missed narrow desktop/tablet
   widths. This keeps long titles inside the viewport up to 1100px.
   ========================================================= */

@media (max-width: 1100px) {
  .service-detail-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .service-detail-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    /* Sized against viewport width so BACKGROUNDS never exits screen */
    font-size: clamp(48px, 8.4vw, 78px) !important;
    line-height: .91 !important;

    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-wrap: balance !important;

    box-sizing: border-box !important;
  }
}

/* Phone */
@media (max-width: 700px) {
  .service-detail-copy h1 {
    font-size: clamp(40px, 11.6vw, 62px) !important;
    line-height: .92 !important;
  }
}

/* Very narrow phone */
@media (max-width: 430px) {
  .service-detail-copy h1 {
    font-size: clamp(36px, 10.8vw, 52px) !important;
  }
}


/* =========================================================
   SERVICE DETAIL — TIGHTER GAP TO NEXT SECTION
   Matches the tighter rhythm used across the rest of the site.
   ========================================================= */
.service-detail-hero {
  padding-bottom: 56px !important;
}

.service-detail-hero + section {
  padding-top: 56px !important;
}

@media (max-width: 980px) {
  .service-detail-hero {
    padding-bottom: 44px !important;
  }

  .service-detail-hero + section {
    padding-top: 44px !important;
  }
}

@media (max-width: 700px) {
  .service-detail-hero {
    padding-bottom: 34px !important;
  }

  .service-detail-hero + section {
    padding-top: 34px !important;
  }
}


/* =========================================================
   BREADCRUMB — SAME ORIGINAL LOOK, LESS TRANSPARENT
   No pill, no extra text backing, no new layout behavior.
   Only a slightly darker / more opaque bar for readability.
   ========================================================= */
.site-header > .page-breadcrumb-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(12, 14, 20, .42),
      rgba(8, 10, 15, .38)
    ) !important;

  border-bottom-color: rgba(255,255,255,.06) !important;

  -webkit-backdrop-filter: blur(8px) saturate(108%);
  backdrop-filter: blur(8px) saturate(108%);
}

.site-header.is-scrolled > .page-breadcrumb-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 17, .46),
      rgba(8, 10, 14, .42)
    ) !important;

  border-bottom-color: rgba(255,255,255,.07) !important;
}


/* =========================================================
   CHARACTER ROSTER SHOWCASE — editorial premium prototype
   ========================================================= */
.character-roster-showcase {
  position: relative;
  overflow: clip;
  padding-top: clamp(70px, 8vw, 118px) !important;
  padding-bottom: clamp(76px, 8vw, 124px) !important;
  background:
    radial-gradient(circle at 78% 14%, rgba(105, 72, 255, .10), transparent 30%),
    radial-gradient(circle at 10% 78%, rgba(255, 100, 68, .08), transparent 26%);
}

.character-roster-head {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto clamp(34px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: 28px 70px;
  align-items: end;
}

.character-roster-head .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.character-roster-head h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(54px, 7vw, 108px);
  line-height: .90;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.character-roster-head > p:last-child {
  margin: 0;
  max-width: 540px;
  color: rgba(255,255,255,.68);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
}

.character-roster-grid {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.28fr .92fr .92fr;
  grid-template-rows: minmax(250px, 38vw) minmax(230px, 31vw);
  gap: 18px;
}

.roster-card {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(12,14,20,.58);
  box-shadow: 0 24px 68px rgba(0,0,0,.24);
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    border-color .32s ease,
    box-shadow .42s ease;
}

.roster-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,120,80,.30);
  box-shadow: 0 34px 90px rgba(0,0,0,.36);
}

.roster-card--1 {
  grid-row: 1 / 3;
}

.roster-card--2 {
  grid-column: 2;
}

.roster-card--3 {
  grid-column: 3;
}

.roster-card--4 {
  grid-column: 2;
}

.roster-card--5 {
  grid-column: 3;
}

.roster-card__media {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(126, 96, 255, .16), transparent 42%),
    #05070b;
  cursor: zoom-in;
}

.roster-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4,6,10,.88));
}

.roster-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  transform: scale(1.015);
  transition: transform .65s cubic-bezier(.16,1,.3,1), filter .45s ease;
}

.roster-card:hover .roster-card__media video {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.03);
}

.roster-card__index,
.roster-card__open {
  position: absolute;
  z-index: 2;
  top: 16px;
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,9,14,.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.80);
}

.roster-card__index {
  left: 16px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.roster-card__open {
  right: 16px;
  width: 34px;
  border-radius: 50%;
  font-size: 17px;
}

.roster-card__copy {
  position: absolute;
  z-index: 3;
  inset: auto 22px 22px 22px;
  pointer-events: none;
}

.roster-card {
  position: relative;
}

.roster-card__copy h3 {
  margin: 0 0 7px;
  font-size: clamp(22px, 2vw, 34px);
  letter-spacing: -.03em;
}

.roster-card__copy p {
  margin: 0;
  max-width: 42ch;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.45;
}

.motion-system-strip {
  width: min(1180px, calc(100% - 64px));
  margin: clamp(38px, 5vw, 72px) auto 0;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr) auto;
  gap: 28px 46px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(8,10,15,.64);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.motion-system-copy .eyebrow {
  margin-top: 0;
}

.motion-system-copy h3 {
  margin: 8px 0 12px;
  font-size: clamp(30px, 3vw, 50px);
  line-height: .98;
  letter-spacing: -.045em;
}

.motion-system-copy > p:last-child {
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}

.motion-system-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.motion-system-chips span {
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.025);
  font-size: 13px;
  transition: transform .22s ease, border-color .22s ease, color .22s ease;
}

.motion-system-chips span:hover {
  transform: translateY(-2px);
  border-color: rgba(255,112,72,.32);
  color: #fff;
}

.motion-system-cta {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .character-roster-head {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr;
  }

  .character-roster-head .eyebrow {
    grid-column: auto;
  }

  .character-roster-grid {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 520px 330px 330px;
  }

  .roster-card--1 {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .roster-card--2,
  .roster-card--3,
  .roster-card--4,
  .roster-card--5 {
    grid-column: auto;
  }

  .motion-system-strip {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr;
  }

  .motion-system-cta {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .character-roster-showcase {
    padding-top: 58px !important;
    padding-bottom: 66px !important;
  }

  .character-roster-head {
    width: calc(100% - 28px);
    margin-bottom: 30px;
  }

  .character-roster-head h2 {
    font-size: clamp(44px, 13vw, 68px);
  }

  .character-roster-grid {
    width: calc(100% - 28px);
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .character-roster-grid::-webkit-scrollbar {
    display: none;
  }

  .roster-card {
    flex: 0 0 82vw;
    height: 520px;
    scroll-snap-align: start;
  }

  .roster-card__copy {
    inset: auto 18px 18px 18px;
  }

  .motion-system-strip {
    width: calc(100% - 28px);
    margin-top: 34px;
    padding: 24px;
  }
}


/* =========================================================
   CHARACTER ROSTER — centered composition + smaller tiles
   ========================================================= */
.character-roster-head {
  text-align: center !important;
  justify-items: center !important;
  grid-template-columns: 1fr !important;
  max-width: 980px !important;
}

.character-roster-head .eyebrow,
.character-roster-head h2,
.character-roster-head > p:last-child {
  grid-column: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.character-roster-head > p:last-child {
  max-width: 700px !important;
}

.character-roster-grid {
  width: min(1080px, calc(100% - 64px)) !important;
  grid-template-columns: 1.18fr .91fr .91fr !important;
  grid-template-rows: minmax(220px, 31vw) minmax(200px, 26vw) !important;
  gap: 16px !important;
}

.roster-card {
  border-radius: 24px !important;
}

.roster-card__copy {
  inset: auto 18px 18px 18px !important;
}

.roster-card__copy h3 {
  font-size: clamp(20px, 1.7vw, 29px) !important;
}

.roster-card__copy p {
  font-size: 13px !important;
}

.motion-system-strip {
  width: min(1080px, calc(100% - 64px)) !important;
}

@media (max-width: 980px) {
  .character-roster-head {
    width: min(100% - 36px, 920px) !important;
  }

  .character-roster-grid {
    width: min(100% - 36px, 980px) !important;
    grid-template-rows: 460px 300px 300px !important;
  }

  .motion-system-strip {
    width: min(100% - 36px, 980px) !important;
  }
}

@media (max-width: 700px) {
  .character-roster-head {
    width: calc(100% - 28px) !important;
    text-align: left !important;
    justify-items: start !important;
  }

  .character-roster-head .eyebrow,
  .character-roster-head h2,
  .character-roster-head > p:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .character-roster-grid {
    width: calc(100% - 28px) !important;
  }

  .roster-card {
    flex-basis: 76vw !important;
    height: 470px !important;
  }

  .motion-system-strip {
    width: calc(100% - 28px) !important;
  }
}


/* =========================================================
   CHARACTER ROSTER — UNIFIED SECTION ALIGNMENT
   Head, tile grid and motion-system panel share one centered
   container and one visual axis.
   ========================================================= */
.character-roster-showcase {
  --roster-container: 1080px;
  --roster-gutter: 32px;
}

/* Same container for heading */
.character-roster-head {
  width: min(
    var(--roster-container),
    calc(100% - (var(--roster-gutter) * 2))
  ) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

/* Keep heading copy visually centered over the grid */
.character-roster-head h2 {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.character-roster-head > p:last-child {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Same exact left/right edges as the heading container */
.character-roster-grid {
  width: min(
    var(--roster-container),
    calc(100% - (var(--roster-gutter) * 2))
  ) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  grid-template-columns: 1.16fr .92fr .92fr !important;
  grid-template-rows: 360px 300px !important;
  gap: 16px !important;
}

/* Same exact container again for the lower panel */
.motion-system-strip {
  width: min(
    var(--roster-container),
    calc(100% - (var(--roster-gutter) * 2))
  ) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(300px, .92fr)
    auto !important;

  gap: 28px 38px !important;
}

/* Slightly calmer tile proportions */
.roster-card--1 {
  grid-row: 1 / 3 !important;
}

.roster-card__copy {
  inset: auto 18px 18px 18px !important;
}

/* Tablet: still one shared axis */
@media (max-width: 980px) {
  .character-roster-showcase {
    --roster-gutter: 18px;
  }

  .character-roster-head,
  .character-roster-grid,
  .motion-system-strip {
    width: min(
      920px,
      calc(100% - (var(--roster-gutter) * 2))
    ) !important;
  }

  .character-roster-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 440px 290px 290px !important;
  }

  .motion-system-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: natural left alignment, same gutters */
@media (max-width: 700px) {
  .character-roster-showcase {
    --roster-gutter: 14px;
  }

  .character-roster-head {
    width: calc(100% - 28px) !important;
    justify-items: start !important;
    text-align: left !important;
  }

  .character-roster-head h2,
  .character-roster-head > p:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .character-roster-grid,
  .motion-system-strip {
    width: calc(100% - 28px) !important;
  }

  .roster-card {
    flex-basis: 74vw !important;
    height: 455px !important;
  }
}

/* v39 — props card framing: keep the potion centered in the visible right-side media area */
@media (min-width: 701px) {
  .service-art-props video {
    right: -3% !important;
    left: auto !important;
    width: 62% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
  }

  .service-showcase-card:hover .service-art-props video {
    transform: scale(1.01) !important;
    transform-origin: center right !important;
  }
}

/* v40b — restore v39 framing; only nudge the props video right and slightly down */
@media (min-width: 701px) {
  .service-card-3 .service-art-props video {
    top: 2.25% !important;
    right: -6% !important;
    bottom: auto !important;
    left: auto !important;
    width: 62% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    transform-origin: center right !important;
  }

  .service-showcase-card:hover .service-art-props video,
  .service-showcase-card:focus-within .service-art-props video {
    transform: scale(1.01) !important;
    transform-origin: center right !important;
  }
}

/* v41 — final props card fix: keep the original top alignment, remove the top gap, and only bias the bottle to the right */
@media (min-width: 701px) {
  .service-card-3 .service-art-props video {
    top: 0 !important;
    right: -6% !important;
    bottom: 0 !important;
    left: auto !important;
    width: 62% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    transform-origin: center right !important;
  }

  .service-showcase-card:hover .service-art-props video,
  .service-showcase-card:focus-within .service-art-props video {
    transform: scale(1.01) !important;
    transform-origin: center right !important;
  }
}

/* v42 — props bottle 15% further right + full-card click affordance */
@media (min-width: 701px) {
  .service-card-3 .service-art-props video {
    right: -21% !important;
  }
}

.service-showcase-card[data-card-link] {
  cursor: pointer;
}

.service-showcase-card[data-card-link]:focus-visible {
  outline: 2px solid #ff6a3d;
  outline-offset: 3px;
}

/* v43 — center props bottle: move 9% left from the v42 position, keep full-card click behavior */
@media (min-width: 701px) {
  .service-card-3 .service-art-props video {
    right: -12% !important;
  }
}

/* v42 — match props hover zoom to the character card */
@media (min-width: 701px) {
  .service-showcase-card:hover .service-art-props video,
  .service-showcase-card:focus-within .service-art-props video {
    transform: scale(1.035) !important;
    transform-origin: center right !important;
  }
}

/* v44 — mobile props framing: keep the bottle visible and centered in the right-side media area */
@media (max-width: 700px) {
  .service-card-3 .service-art-props video {
    top: 0 !important;
    right: -20% !important;
    bottom: 0 !important;
    left: auto !important;
    width: 82% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    transform-origin: center right !important;
  }

  .service-card-3:hover .service-art-props video,
  .service-card-3:focus-within .service-art-props video {
    transform: none !important;
  }
}

/* v45 — desktop only: nudge props bottle 1% left from v43 */
@media (min-width: 701px) {
  .service-card-3 .service-art-props video {
    right: -11% !important;
  }
}

/* v47 — narrow phones only (iPhone 14 class): preserve the old framing everywhere else.
   The issue was the 390px viewport hitting the mobile layout while the new 16:9 MP4
   gets cropped by object-fit: cover behind the copy panel. */
@media (max-width: 430px) {
  .service-card-3 .service-art-props video {
    top: 0 !important;
    right: -36% !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    transform-origin: center right !important;
  }

  .service-card-3:hover .service-art-props video,
  .service-card-3:focus-within .service-art-props video {
    transform: none !important;
  }
}

/* Castle framing only — keep the shared service-card gradient untouched. */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    top: 0 !important;
    right: -10% !important;
    bottom: 0 !important;
    left: auto !important;
    width: 67% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% 48% !important;
    transform: translate3d(0,0,0) scale(1) !important;
    transform-origin: 72% 48% !important;
    transition: transform 360ms cubic-bezier(.22,.61,.36,1) !important;
    filter: none !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(0,0,0) scale(1.09) !important;
    filter: none !important;
  }
}

/* v52 — castle card gradient decoupled from text length; use a fixed shared overlay like the other cards */
@media (min-width: 701px) {
  .service-card-2 {
    isolation: isolate !important;
  }

  /* Fixed gradient layer on the card itself so copy length never stretches/compresses the blend. */
  .service-card-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 62%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(4,5,8,1) 0%,
      rgba(4,5,8,1) 74%,
      rgba(4,5,8,.96) 84%,
      rgba(4,5,8,.82) 91%,
      rgba(4,5,8,.55) 96%,
      rgba(4,5,8,0) 100%
    );
  }

  /* Keep copy box dimensions aligned, but remove its own gradient so there is no stretched cheap look. */
  .service-card-2 .service-showcase-copy {
    width: 62% !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

/* =========================================================
   v53 — ANIMATED BACKGROUNDS / CASTLE PRESENTATION FIX
   The shared premium media rule above is portrait-first for character work.
   Keep the castle scene in its native cinematic landscape framing instead.
   ========================================================= */
.service-detail-media:has(video source[src*="background-animation.mp4"]) {
  width: min(54vw, 940px) !important;
  max-width: 100% !important;
  aspect-ratio: 1664 / 926 !important;
  justify-self: end !important;
  border-radius: 28px !important;
  background: #050608 !important;
  border-color: rgba(255, 103, 68, .34) !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.50),
    0 0 70px rgba(255,103,68,.055),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
}

.service-detail-media:has(video source[src*="background-animation.mp4"]) video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

@media (min-width: 981px) {
  .service-detail-hero:has(video source[src*="background-animation.mp4"]) {
    grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr) !important;
    gap: clamp(34px, 4vw, 72px) !important;
  }
}

@media (max-width: 980px) {
  .service-detail-media:has(video source[src*="background-animation.mp4"]) {
    width: 100% !important;
    justify-self: center !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 640px) {
  .service-detail-media:has(video source[src*="background-animation.mp4"]) {
    aspect-ratio: 1664 / 926 !important;
    border-radius: 18px !important;
    box-shadow:
      0 20px 48px rgba(0,0,0,.46),
      0 0 36px rgba(255,103,68,.045) !important;
  }
}

/* =========================================================
   v54 — PROPS ANIMATION / POTION PRESENTATION FIX
   The shared premium media rule is portrait-first. Keep the
   potion prop demo in its native wide 1660x940 presentation.
   ========================================================= */
.service-detail-media:has(video source[src*="props-animation.mp4"]) {
  width: min(54vw, 940px) !important;
  max-width: 100% !important;
  aspect-ratio: 1660 / 940 !important;
  justify-self: end !important;
  border-radius: 28px !important;
  background: #050608 !important;
  border-color: rgba(255, 103, 68, .34) !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.50),
    0 0 70px rgba(255,103,68,.055),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
}

.service-detail-media:has(video source[src*="props-animation.mp4"]) video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

@media (min-width: 981px) {
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) {
    grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr) !important;
    gap: clamp(34px, 4vw, 72px) !important;
  }
}

@media (max-width: 980px) {
  .service-detail-media:has(video source[src*="props-animation.mp4"]) {
    width: 100% !important;
    justify-self: center !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 640px) {
  .service-detail-media:has(video source[src*="props-animation.mp4"]) {
    aspect-ratio: 1660 / 940 !important;
    border-radius: 18px !important;
    box-shadow:
      0 20px 48px rgba(0,0,0,.46),
      0 0 36px rgba(255,103,68,.045) !important;
  }
}

/* =========================================================
   v56 — WIDE SERVICE HERO: HARD COPY / MEDIA SEPARATION
   Prevent long service titles from overflowing into castle/potion media.
   Scoped only to the two wide showcase pages.
   ========================================================= */
@media (min-width: 981px) {
  .service-detail-hero:has(video source[src*="background-animation.mp4"]),
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) {
    grid-template-columns: minmax(500px, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(40px, 4.5vw, 78px) !important;
    align-items: center !important;
  }

  .service-detail-hero:has(video source[src*="background-animation.mp4"]) .service-detail-copy,
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) .service-detail-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .service-detail-hero:has(video source[src*="background-animation.mp4"]) .service-detail-copy h1,
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) .service-detail-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    font-size: clamp(68px, 4.65vw, 92px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  .service-detail-hero:has(video source[src*="background-animation.mp4"]) .service-detail-media,
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) .service-detail-media {
    width: 100% !important;
    max-width: 940px !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Mid-size desktop: tighten title before the layout stacks at 980px. */
@media (min-width: 981px) and (max-width: 1280px) {
  .service-detail-hero:has(video source[src*="background-animation.mp4"]) .service-detail-copy h1,
  .service-detail-hero:has(video source[src*="props-animation.mp4"]) .service-detail-copy h1 {
    font-size: clamp(62px, 5.35vw, 76px) !important;
  }
}

/* =========================================================
   v58 — PROFESSIONAL FLOATING DISCORD CONTACT BUTTON
   ========================================================= */
.discord-chat-fab {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 900;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(126, 138, 255, .48);
  border-radius: 16px;
  color: #fff;
  background: #171922;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 22px rgba(88, 101, 242, .12);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  animation: discord-fab-breathe 5.5s ease-in-out infinite;
  transition:
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.discord-chat-fab::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .035));
  pointer-events: none;
}

.discord-chat-fab:hover {
  transform: translateY(-3px);
  border-color: rgba(136, 146, 255, .82);
  background: #1b1e29;
  box-shadow:
    0 19px 42px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 0 30px rgba(88, 101, 242, .22);
}

.discord-chat-fab:active {
  transform: translateY(-1px) scale(.97);
}

.discord-chat-fab:focus-visible {
  outline: 3px solid rgba(136, 146, 255, .95);
  outline-offset: 4px;
}

.discord-chat-fab__icon-wrap {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #5865f2;
  box-shadow: 0 6px 16px rgba(88, 101, 242, .28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.discord-chat-fab:hover .discord-chat-fab__icon-wrap {
  transform: scale(1.035);
  box-shadow: 0 8px 20px rgba(88, 101, 242, .38);
}

.discord-chat-fab__icon {
  width: 23px;
  height: 23px;
  display: block;
  fill: currentColor;
}

.discord-chat-fab__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  min-width: 154px;
  padding: 10px 12px 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: #fff;
  background: rgba(17, 19, 27, .94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.discord-chat-fab__label strong,
.discord-chat-fab__label small {
  display: block;
}

.discord-chat-fab__label strong {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1px;
  line-height: 1.2;
}

.discord-chat-fab__label small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.1;
}

.discord-chat-fab:hover .discord-chat-fab__label,
.discord-chat-fab:focus-visible .discord-chat-fab__label {
  opacity: 1;
  transform: translate(0, -50%);
}

@keyframes discord-fab-breathe {
  0%, 100% { box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .035) inset, 0 0 18px rgba(88, 101, 242, .08); }
  50% { box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .035) inset, 0 0 28px rgba(88, 101, 242, .18); }
}

@media (max-width: 640px) {
  .discord-chat-fab {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 15px;
  }

  .discord-chat-fab__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .discord-chat-fab__icon {
    width: 22px;
    height: 22px;
  }

  .discord-chat-fab__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .discord-chat-fab { animation: none; }
}


/* Aftermotion traffic resources */
.site-nav a.active, .site-nav a[aria-current="page"] { color: #ff8a68; }
.resource-hero { padding: 170px 48px 72px; max-width: 1100px; }
.resource-hero h1, .article-header h1 { max-width: 1040px; }
.resource-hero .lead { max-width: 760px; font-size: 16px; line-height: 1.75; }
.resource-grid { padding: 0 48px 110px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.resource-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 26px; background: #17171d; }
.resource-card-media { display: block; aspect-ratio: 16/8.5; overflow: hidden; background: #0b0b0f; }
.resource-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.resource-card:hover .resource-card-media img { transform: scale(1.035); }
.resource-card-copy { padding: 28px; }
.resource-card-copy h2 { margin: 8px 0 14px; font-size: clamp(23px,2.1vw,34px); line-height: 1.08; }
.resource-card-copy > p:not(.eyebrow) { color: #bdbdc7; line-height: 1.75; }
.resource-card-copy > span { display: block; margin-top: 18px; color: #777782; font-size: 12px; }
.resource-read-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 20px; font-weight: 800; color: #ff8a68; }
.resource-cta { margin: 0 48px 110px; padding: clamp(30px,5vw,70px); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: radial-gradient(circle at 85% 20%,rgba(255,106,61,.18),transparent 34%),#17171d; }
.resource-cta h2 { max-width: 780px; margin-top: 10px; }
.resource-cta > p:not(.eyebrow) { max-width: 680px; color: #bdbdc7; line-height: 1.75; }

.article-hero { margin: 0 0 72px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 28px; background: #f4f6fb; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.article-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16/8.5; object-fit: cover; }
.resource-card-media { background: #eef3fb; }
@media (max-width: 900px) { .article-hero { margin-bottom: 46px; border-radius: 20px; } }

.article-shell { padding: 135px 48px 110px; }
.resource-article { max-width: 1240px; margin: 0 auto; }
.article-header { max-width: 1050px; padding: 50px 0 66px; }
.article-header h1 { margin: 14px 0 22px; font-size: clamp(42px,6vw,82px); line-height: .98; }
.article-lead { max-width: 850px; color: #d0d0d8; font-size: 19px; line-height: 1.7; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #777782; font-size: 12px; }
.article-layout { display: grid; grid-template-columns: 250px minmax(0,760px); gap: clamp(40px,7vw,100px); align-items: start; }
.article-toc { position: sticky; top: 120px; padding: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: #15151a; }
.article-toc strong { font-size: 13px; }
.article-toc ol { margin: 16px 0 0; padding-left: 20px; color: #8f8f99; font-size: 12px; line-height: 1.55; }
.article-toc li + li { margin-top: 10px; }
.article-toc a:hover { color: #fff; }
.article-section { scroll-margin-top: 120px; padding: 0 0 52px; }
.article-section h2 { margin: 0 0 18px; font-size: clamp(27px,3vw,42px); line-height: 1.08; }
.article-section p { margin: 0; color: #c7c7d0; font-size: 17px; line-height: 1.9; }
.article-checklist { margin: 10px 0 58px; padding: 32px; border-radius: 24px; background: #f1f1f4; color: #101014; }
.article-checklist h2 { margin: 8px 0 20px; font-size: 30px; }
.article-checklist ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-checklist li { position: relative; padding-left: 28px; line-height: 1.55; }
.article-checklist li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; }
.article-content .resource-cta { margin: 0 0 42px; }
.article-disclaimer { color: #666670; font-size: 11px; line-height: 1.6; }
.home-resource-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.home-resource-links a { display: flex; justify-content: space-between; align-items: center; min-height: 86px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #17171d; font-weight: 800; }
.home-resource-links a:hover { border-color: rgba(255,138,104,.55); }
.home-resource-links span { color: #ff8a68; }
@media (max-width: 900px) {
  .resource-hero { padding: 135px 24px 52px; }
  .resource-grid { padding: 0 24px 80px; grid-template-columns: 1fr; }
  .resource-cta { margin: 0 24px 80px; }
  .article-shell { padding: 112px 24px 80px; }
  .article-header { padding: 34px 0 50px; }
  .article-header h1 { font-size: clamp(38px,12vw,58px); }
  .article-lead { font-size: 17px; }
  .article-layout { grid-template-columns: 1fr; gap: 36px; }
  .article-toc { position: static; }
  .article-section p { font-size: 16px; }
  .home-resource-links { grid-template-columns: 1fr; }
}

/* Resource index: readable editorial list layout */
.resource-grid {
  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: 0 0 110px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.resource-card {
  display: grid;
  grid-template-columns: minmax(300px, 40%) minmax(0, 1fr);
  min-height: 285px;
  overflow: hidden;
  border-radius: 24px;
}

.resource-card-media {
  width: 100%;
  height: 100%;
  min-height: 285px;
  aspect-ratio: auto;
}

.resource-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 46px);
}

.resource-card-copy h2 {
  max-width: 760px;
  margin: 8px 0 13px;
  font-size: clamp(24px, 2.25vw, 36px);
  line-height: 1.08;
}

.resource-card-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.resource-card-copy > span {
  margin-top: 16px;
}

.resource-read-link {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .resource-grid {
    width: min(100% - 48px, 720px);
    padding-bottom: 80px;
  }

  .resource-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .resource-card-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .resource-card-copy {
    padding: 28px;
  }
}

@media (max-width: 560px) {
  .resource-grid {
    width: calc(100% - 32px);
    gap: 18px;
  }

  .resource-card {
    border-radius: 20px;
  }

  .resource-card-copy {
    padding: 24px 22px 26px;
  }

  .resource-card-copy h2 {
    font-size: clamp(23px, 8vw, 30px);
  }
}

/* Resource list polish: full content width + homepage-style CTA */
.resource-grid {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 48px 110px;
}

.resource-card {
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
}

.resource-read-link {
  min-width: 148px;
  min-height: 42px;
  margin-top: 22px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #050608;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.16);
  transform: translate3d(0,0,0);
  transition:
    transform 480ms cubic-bezier(.22,1,.36,1),
    box-shadow 480ms cubic-bezier(.22,1,.36,1),
    background-color 320ms ease;
}

.resource-read-link:hover {
  color: #050608;
  transform: translate3d(0,-2px,0) scale(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.resource-read-link:active {
  transform: translate3d(0,0,0) scale(.985);
}

.resource-read-link:focus-visible {
  outline: 3px solid rgba(255,106,61,.6);
  outline-offset: 3px;
}

.resource-read-link b {
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 900px) {
  .resource-grid {
    width: auto;
    margin: 0;
    padding: 0 24px 80px;
  }

  .resource-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .resource-grid {
    width: auto;
    padding: 0 16px 70px;
  }

  .resource-read-link {
    min-width: 138px;
    min-height: 40px;
    margin-top: 18px;
  }
}

/* Resource index motion — lively, restrained and accessible */
.resource-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.resource-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  left: clamp(-260px, -15vw, -80px);
  top: -52%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 35%, rgba(91, 198, 255, .48), transparent 29%),
    radial-gradient(circle at 66% 36%, rgba(169, 103, 255, .40), transparent 31%),
    radial-gradient(circle at 53% 67%, rgba(255, 111, 71, .42), transparent 34%);
  filter: blur(58px) saturate(125%);
  opacity: .34;
  transform: translate3d(0, 0, 0) rotate(-7deg);
  animation: resourceHeroAura 13s ease-in-out infinite alternate;
  pointer-events: none;
}

.resource-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 48px;
  bottom: 28px;
  width: min(220px, 30vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a68, #8a7dff 52%, transparent);
  transform-origin: left center;
  opacity: .72;
  animation: resourceAccentPulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes resourceHeroAura {
  0% { transform: translate3d(-2%, -2%, 0) rotate(-8deg) scale(.94); }
  55% { transform: translate3d(8%, 5%, 0) rotate(5deg) scale(1.06); }
  100% { transform: translate3d(3%, 10%, 0) rotate(11deg) scale(1); }
}

@keyframes resourceAccentPulse {
  0%, 100% { transform: scaleX(.46); opacity: .42; }
  50% { transform: scaleX(1); opacity: .9; }
}

.resource-card {
  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .16);
  transition:
    transform 650ms cubic-bezier(.22, 1, .36, 1),
    border-color 420ms ease,
    box-shadow 650ms cubic-bezier(.22, 1, .36, 1);
}

.resource-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--resource-pointer-x, 18%) var(--resource-pointer-y, 30%),
    rgba(122, 173, 255, .12),
    rgba(255, 124, 89, .065) 35%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.resource-card > * {
  position: relative;
  z-index: 1;
}

.resource-card:hover {
  transform: translate3d(0, -7px, 0);
  border-color: rgba(255, 255, 255, .19);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.resource-card:hover::before { opacity: 1; }

.resource-card-media {
  position: relative;
  isolation: isolate;
}

.resource-card-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 6, 8, .14), transparent 42%, rgba(255, 255, 255, .04));
  pointer-events: none;
}

.resource-card-media::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -25%;
  bottom: -25%;
  left: -48%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  filter: blur(8px);
  transform: translate3d(-120%, 0, 0) rotate(12deg);
  transition: transform 950ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.resource-card:hover .resource-card-media::after {
  transform: translate3d(620%, 0, 0) rotate(12deg);
}

.resource-card-media img {
  transform: translate3d(var(--resource-image-x, 0px), var(--resource-image-y, 0px), 0) scale(1.01);
  transition: transform 850ms cubic-bezier(.16, 1, .3, 1), filter 500ms ease;
  will-change: transform;
}

.resource-card:hover .resource-card-media img {
  transform: translate3d(var(--resource-image-x, 0px), var(--resource-image-y, 0px), 0) scale(1.055);
  filter: saturate(1.06) contrast(1.02);
}

.resource-card-copy h2 a {
  background-image: linear-gradient(90deg, #fff, #fff 45%, #ffb199 72%, #9ecbff);
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 650ms cubic-bezier(.22, 1, .36, 1);
}

.resource-card:hover .resource-card-copy h2 a {
  background-position: 100% 0;
}

.resource-read-link b {
  transform: translate3d(0, 0, 0);
  transition: transform 430ms cubic-bezier(.22, 1, .36, 1);
}

.resource-read-link:hover b {
  transform: translate3d(4px, -2px, 0);
}

/* JS-enhanced entrance animations. Content stays visible when JS is unavailable. */
.resources-motion-ready .resource-hero .eyebrow,
.resources-motion-ready .resource-hero h1,
.resources-motion-ready .resource-hero .lead {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 900ms ease,
    filter 1000ms cubic-bezier(.16, 1, .3, 1),
    transform 1000ms cubic-bezier(.16, 1, .3, 1);
}

.resources-motion-ready .resource-hero.is-visible .eyebrow {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition-delay: 70ms;
}

.resources-motion-ready .resource-hero.is-visible h1 {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition-delay: 170ms;
}

.resources-motion-ready .resource-hero.is-visible .lead {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition-delay: 300ms;
}

.resources-motion-ready .resource-card {
  --resource-enter-x: -52px;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(var(--resource-enter-x), 46px, 0) scale(.975);
  transition:
    opacity 820ms ease var(--resource-delay, 0ms),
    filter 900ms cubic-bezier(.16, 1, .3, 1) var(--resource-delay, 0ms),
    transform 980ms cubic-bezier(.16, 1, .3, 1) var(--resource-delay, 0ms),
    border-color 420ms ease,
    box-shadow 650ms cubic-bezier(.22, 1, .36, 1);
}

.resources-motion-ready .resource-card:nth-child(even) {
  --resource-enter-x: 52px;
}

.resources-motion-ready .resource-card.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.resources-motion-ready .resource-card.is-visible:hover {
  transform: translate3d(0, -7px, 0) scale(1);
}

.resources-motion-ready .resource-cta {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 44px, 0) scale(.985);
  transition:
    opacity 850ms ease,
    filter 950ms cubic-bezier(.16, 1, .3, 1),
    transform 950ms cubic-bezier(.16, 1, .3, 1);
}

.resources-motion-ready .resource-cta.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 900px) {
  .resource-hero::after { left: 24px; }
  .resource-hero::before { width: 760px; left: -370px; top: -35%; opacity: .27; }

  .resources-motion-ready .resource-card,
  .resources-motion-ready .resource-card:nth-child(even) {
    --resource-enter-x: 0px;
    transform: translate3d(0, 34px, 0) scale(.985);
  }

  .resources-motion-ready .resource-card.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .resources-motion-ready .resource-card.is-visible:hover {
    transform: translate3d(0, -4px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-hero::before,
  .resource-hero::after { animation: none !important; }

  .resources-motion-ready .resource-hero .eyebrow,
  .resources-motion-ready .resource-hero h1,
  .resources-motion-ready .resource-hero .lead,
  .resources-motion-ready .resource-card,
  .resources-motion-ready .resource-cta {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  .resource-card-media::after { display: none; }
  .resource-card-media img { transform: none !important; transition: none !important; }
}

/* Resource cards: whole-card link + orange interactive contour */
.resource-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.resource-card:hover,
.resource-card:focus-visible {
  border-color: rgba(255, 106, 61, .92);
  box-shadow:
    0 0 0 1px rgba(255, 106, 61, .34),
    0 30px 80px rgba(0, 0, 0, .28),
    0 0 34px rgba(255, 106, 61, .13);
}

.resource-card:focus-visible {
  outline: 3px solid rgba(255, 138, 104, .38);
  outline-offset: 4px;
}

.resource-card:active {
  border-color: #ff6a3d;
  box-shadow:
    0 0 0 2px rgba(255, 106, 61, .30),
    0 18px 46px rgba(0, 0, 0, .24);
}

.resource-card-copy h2 > span {
  background-image: linear-gradient(90deg, #fff, #fff 45%, #ffb199 72%, #9ecbff);
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 650ms cubic-bezier(.22, 1, .36, 1);
}

.resource-card:hover .resource-card-copy h2 > span,
.resource-card:focus-visible .resource-card-copy h2 > span {
  background-position: 100% 0;
}

.resource-card:focus-visible .resource-card-media::after {
  transform: translate3d(620%, 0, 0) rotate(12deg);
}

.resource-card:focus-visible .resource-card-media img {
  transform: translate3d(var(--resource-image-x, 0px), var(--resource-image-y, 0px), 0) scale(1.055);
  filter: saturate(1.06) contrast(1.02);
}

.resource-card:focus-visible::before { opacity: 1; }

.resources-motion-ready .resource-card.is-visible:focus-visible {
  transform: translate3d(0, -7px, 0) scale(1);
}

@media (max-width: 900px) {
  .resources-motion-ready .resource-card.is-visible:focus-visible {
    transform: translate3d(0, -4px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-card:focus-visible,
  .resources-motion-ready .resource-card.is-visible:focus-visible {
    transform: none !important;
  }
}


/* Resource CTA button: responsive centering + calmer motion */
.resource-read-link {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  margin-top: 18px;
  padding: 9px 15px;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 14px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  column-gap: 8px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: .025em;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms ease,
    background-color 220ms ease;
}

.resource-read-link__label {
  display: block;
  min-width: 0;
  text-align: center;
}

.resource-read-link b {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  transform: none;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.resource-read-link:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 11px 24px rgba(0, 0, 0, .18);
}

.resource-read-link:hover b {
  transform: translate3d(2px, -1px, 0);
}

.resource-read-link:active {
  transform: translate3d(0, 0, 0) scale(.99);
}

/* Keep the page motion polished but less aggressive. */
.resource-hero::before {
  opacity: .24;
  animation-duration: 18s;
}

.resource-hero::after {
  opacity: .58;
  animation-duration: 6.5s;
}

.resource-card {
  transition:
    transform 430ms cubic-bezier(.22, 1, .36, 1),
    border-color 300ms ease,
    box-shadow 430ms cubic-bezier(.22, 1, .36, 1);
}

.resource-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 23px 62px rgba(0, 0, 0, .24);
}

.resource-card-media::after {
  opacity: .58;
  transition-duration: 1100ms;
}

.resource-card-media img {
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), filter 380ms ease;
}

.resource-card:hover .resource-card-media img,
.resource-card:focus-visible .resource-card-media img {
  transform: translate3d(var(--resource-image-x, 0px), var(--resource-image-y, 0px), 0) scale(1.025);
  filter: saturate(1.035) contrast(1.01);
}

.resources-motion-ready .resource-card {
  --resource-enter-x: -24px;
  filter: blur(6px);
  transform: translate3d(var(--resource-enter-x), 26px, 0) scale(.99);
  transition:
    opacity 650ms ease var(--resource-delay, 0ms),
    filter 700ms cubic-bezier(.16, 1, .3, 1) var(--resource-delay, 0ms),
    transform 740ms cubic-bezier(.16, 1, .3, 1) var(--resource-delay, 0ms),
    border-color 300ms ease,
    box-shadow 430ms cubic-bezier(.22, 1, .36, 1);
}

.resources-motion-ready .resource-card:nth-child(even) {
  --resource-enter-x: 24px;
}

.resources-motion-ready .resource-card.is-visible:hover,
.resources-motion-ready .resource-card.is-visible:focus-visible {
  transform: translate3d(0, -3px, 0) scale(1);
}

.resources-motion-ready .resource-hero .eyebrow,
.resources-motion-ready .resource-hero h1,
.resources-motion-ready .resource-hero .lead {
  filter: blur(6px);
  transform: translate3d(0, 18px, 0);
  transition-duration: 760ms;
}

@media (max-width: 900px) {
  .resource-read-link {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 10px;
  }

  .resources-motion-ready .resource-card,
  .resources-motion-ready .resource-card:nth-child(even) {
    --resource-enter-x: 0px;
    transform: translate3d(0, 20px, 0) scale(.992);
  }

  .resources-motion-ready .resource-card.is-visible:hover,
  .resources-motion-ready .resource-card.is-visible:focus-visible {
    transform: translate3d(0, -2px, 0) scale(1);
  }
}

@media (max-width: 420px) {
  .resource-read-link {
    width: auto;
    max-width: 100%;
    grid-template-columns: minmax(0, auto) 13px;
    padding-inline: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-read-link,
  .resource-read-link b {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================
   LCP OPTIMIZATION — homepage hero artwork
   - Uses a 93% smaller WebP asset.
   - Keeps the artwork visible from first paint instead of
     delaying LCP behind the intro opacity/filter animation.
   - Uses a smaller mobile asset below 700px.
   ========================================================= */
.hero.hero-art-showcase .hero-art {
  background-image: url('/images/showcase/hero-bright-fantasy.webp') !important;
  animation: none !important;
  opacity: 1 !important;
}

@media (max-width: 700px) {
  .hero.hero-art-showcase .hero-art {
    background-image: url('/images/showcase/hero-bright-fantasy-mobile.webp') !important;
  }
}


/* Resource index: remove decorative divider and reveal cards on page load */
.resource-hero::after {
  display: none !important;
  content: none !important;
}

/* Resource CTA: keep label and arrow on one line at every viewport width. */
.resource-read-link {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  padding-inline: 15px;
  white-space: nowrap;
}

.resource-read-link__label {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

.resource-read-link b {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

@media (max-width: 420px) {
  .resource-read-link {
    width: max-content;
    max-width: 100%;
    gap: 7px;
    padding-inline: 13px;
    font-size: 9.5px;
  }
}

/* =========================================================
   CONVERSION UPGRADE — 2026-07-11
   Clearer offer, visible work, qualified enquiries and sales pages.
   ========================================================= */

:root {
  --conversion-card: rgba(18, 23, 29, .84);
  --conversion-border: rgba(255, 255, 255, .10);
  --conversion-muted: #aeb5bd;
  --conversion-accent: #ff7449;
}

.site-nav { gap: clamp(14px, 1.8vw, 28px); }
.site-nav > a:not(.nav-contact-cta) { font-size: 12px; }
.nav-contact-cta { white-space: nowrap; }

.conversion-hero .hero-content { max-width: 760px; }
.conversion-hero h1 { max-width: 820px; }
.conversion-hero .lead { max-width: 680px; }
.conversion-hero .hero-actions { margin-top: 28px; }

.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin-top: 26px;
}
.hero-trust-strip span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(7,10,13,.48);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.wide-head { max-width: 950px; }
.work-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,116,73,.10), transparent 32%),
    linear-gradient(180deg, #080a0d 0%, #050608 100%);
}
.work-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.work-video-card {
  overflow: hidden;
  border: 1px solid var(--conversion-border);
  border-radius: 24px;
  background: var(--conversion-card);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}
.work-video-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #090c10;
}
.work-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.demo-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,8,11,.78);
  backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.inline-label { position: static; margin-bottom: 18px; }
.work-video-copy { padding: 22px; }
.work-video-copy h3 { margin: 0 0 10px; font-size: clamp(20px,2vw,27px); }
.work-video-copy p { min-height: 72px; margin: 0 0 18px; color: var(--conversion-muted); line-height: 1.65; }
.work-video-copy a { color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.work-video-copy a span { color: var(--conversion-accent); }

.demo-breakdowns {
  margin-top: clamp(44px, 6vw, 80px);
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.demo-breakdowns-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 20px;
}
.demo-breakdowns-head h3 { margin: 0; font-size: clamp(24px,3vw,38px); }
.demo-breakdowns-head p { max-width: 540px; margin: 0; color: var(--conversion-muted); line-height: 1.6; }
.demo-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.demo-breakdown-card {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 24px;
  align-items: center;
  gap: 18px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--conversion-border);
  border-radius: 18px;
  color: #fff;
  background: rgba(255,255,255,.025);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.demo-breakdown-card:hover { transform: translateY(-3px); border-color: rgba(255,116,73,.45); background: rgba(255,116,73,.055); }
.demo-breakdown-card img { width: 110px; height: 92px; object-fit: cover; border-radius: 12px; background: #151a20; }
.demo-breakdown-card span { display: grid; gap: 6px; }
.demo-breakdown-card strong { font-size: 17px; }
.demo-breakdown-card small { color: var(--conversion-muted); line-height: 1.45; }
.demo-breakdown-card b { color: var(--conversion-accent); font-size: 20px; }

.starter-offer { background: #07090c; }
.offer-panel {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  gap: clamp(34px, 7vw, 100px);
  padding: clamp(30px,5vw,68px);
  border: 1px solid rgba(255,116,73,.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,116,73,.14), transparent 35%),
    linear-gradient(135deg, rgba(25,30,37,.96), rgba(10,13,17,.96));
  box-shadow: 0 35px 100px rgba(0,0,0,.32);
}
.offer-copy h2 { margin: 8px 0 18px; font-size: clamp(38px,5vw,72px); line-height: 1.02; }
.offer-copy > p:not(.eyebrow) { max-width: 720px; color: #c5cbd2; font-size: 17px; line-height: 1.7; }
.offer-copy .btn { margin-top: 10px; }
.offer-copy small { display: block; max-width: 720px; margin-top: 18px; color: #858e98; line-height: 1.6; }
.offer-deliverables { align-self: center; padding: 26px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(3,5,7,.35); }
.offer-deliverables h3 { margin: 0 0 18px; font-size: 20px; }
.offer-deliverables ul, .check-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.offer-deliverables li, .check-list li { position: relative; padding-left: 25px; color: #c8ced5; line-height: 1.5; }
.offer-deliverables li::before, .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--conversion-accent); font-weight: 900; }

.deliverables-section { background: #050608; }
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.deliverable-card {
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--conversion-border);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
}
.deliverable-card h3 { margin: 0 0 12px; font-size: 20px; }
.deliverable-card p { margin: 0; color: var(--conversion-muted); line-height: 1.65; }

.process-section { background: #080a0d; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}
.process-grid.four-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
.process-step {
  position: relative;
  min-height: 250px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--conversion-border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}
.process-step > span { display: block; margin-bottom: 44px; color: var(--conversion-accent); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.process-step h3 { margin: 0 0 12px; font-size: 20px; }
.process-step p { margin: 0; color: var(--conversion-muted); line-height: 1.62; }

.conversion-contact {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
  background:
    radial-gradient(circle at 5% 20%, rgba(255,116,73,.12), transparent 30%),
    #07090c;
}
.contact-sales-copy { position: sticky; top: 140px; }
.contact-sales-copy h2 { margin: 9px 0 18px; font-size: clamp(38px,5vw,70px); line-height: 1.04; }
.contact-sales-copy > p:not(.eyebrow) { color: #c0c6cd; font-size: 17px; line-height: 1.7; }
.contact-expectations { display: grid; gap: 11px; margin-top: 28px; color: #aeb5bd; }

.contact-form.lead-form {
  width: 100%;
  max-width: none;
  padding: clamp(22px,3.5vw,38px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(17,22,28,.82);
  box-shadow: 0 28px 90px rgba(0,0,0,.3);
}
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span { color: #d9dde2; font-size: 10px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #fff;
  background: rgba(5,8,11,.76);
  font: inherit;
}
.lead-form input, .lead-form select { min-height: 48px; padding: 0 14px; }
.lead-form textarea { min-height: 150px; padding: 14px; resize: vertical; }
.lead-form select { appearance: auto; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: 2px solid rgba(255,116,73,.42); outline-offset: 1px; border-color: rgba(255,116,73,.65); }
.lead-form .btn { width: 100%; margin-top: 4px; }
.form-privacy-note { margin: 2px 0 0; color: #858e98; font-size: 11px; line-height: 1.5; text-align: center; }
.compact-lead-form { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.compact-lead-form textarea { min-height: 115px; }
.modal-intro { margin: -7px 0 20px; color: var(--conversion-muted); line-height: 1.55; }
.contact-modal-panel { width: min(760px, calc(100vw - 30px)); max-height: min(92vh, 900px); overflow-y: auto; }
.contact-modal-panel h2 { max-width: 650px; }

.sales-service-page { background: #050608; }
.sales-service-page .service-detail-hero { min-height: 76vh; }
.service-detail-media { position: relative; }
.service-fit { background: #07090c; }
.service-fit-copy { max-width: 980px; margin-bottom: 44px; }
.service-fit-copy h2 { margin: 8px 0 0; font-size: clamp(34px,4.4vw,64px); line-height: 1.08; }
.service-two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.service-two-column article { padding: clamp(24px,4vw,42px); border: 1px solid var(--conversion-border); border-radius: 24px; background: rgba(255,255,255,.025); }
.service-two-column h3 { margin: 0 0 24px; font-size: 25px; }

.faq-section { background: #050608; }
.faq-list { max-width: 980px; }
.faq-item { border-top: 1px solid rgba(255,255,255,.12); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item summary { padding: 22px 0; cursor: pointer; color: #fff; font-size: clamp(18px,2vw,23px); font-weight: 750; }
.faq-item p { max-width: 800px; margin: -4px 0 24px; color: var(--conversion-muted); line-height: 1.7; }

.project-case-page { background: #050608; }
.project-case-hero {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr);
  gap: clamp(38px,6vw,90px);
  align-items: center;
  min-height: 76vh;
  padding: clamp(90px,11vw,150px) 48px clamp(70px,9vw,120px);
}
.project-case-copy h1 { margin: 10px 0 20px; font-size: clamp(52px,7vw,105px); line-height: .98; }
.project-case-copy > p:not(.eyebrow) { max-width: 700px; color: #c1c8cf; font-size: 18px; line-height: 1.7; }
.project-case-video { overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--conversion-border); border-radius: 28px; background: #0a0d11; box-shadow: 0 30px 100px rgba(0,0,0,.34); }
.project-case-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-breakdown { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(40px,8vw,120px); align-items: start; background: #080a0d; }
.project-breakdown h2 { margin: 8px 0 18px; font-size: clamp(38px,5vw,72px); line-height: 1.05; }
.project-breakdown p:not(.eyebrow) { max-width: 800px; color: var(--conversion-muted); line-height: 1.7; }
.project-focus-list { padding: 30px; border: 1px solid var(--conversion-border); border-radius: 22px; background: rgba(255,255,255,.025); }
.project-gallery-section { background: #050608; }
.project-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
.project-gallery img { min-height: 360px; object-fit: cover; border: 1px solid var(--conversion-border); }

.conversion-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px 50px;
  align-items: start;
  border-top: 1px solid rgba(255,255,255,.09);
  background: #050608;
}
.conversion-footer .footer-brand p { max-width: 620px; margin: 12px 0 0; color: var(--conversion-muted); line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; }
.footer-links a { color: #dce0e4; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.footer-meta { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); }
.footer-meta .footer-copyright { margin: 0 0 10px; }
.footer-meta .footer-legal-note { max-width: 1100px; margin: 0; color: #747d87; font-size: 10px; line-height: 1.6; }

@media (max-width: 1100px) {
  .work-video-grid { grid-template-columns: 1fr; }
  .work-video-card { display: grid; grid-template-columns: minmax(280px,.9fr) 1.1fr; }
  .work-video-frame { aspect-ratio: 16/10; }
  .work-video-copy p { min-height: 0; }
  .deliverables-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .process-grid.four-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-case-hero { grid-template-columns: 1fr; }
  .project-case-video { max-width: 900px; }
}

@media (max-width: 900px) {
  .site-nav > a:not(.nav-contact-cta) { font-size: 13px; }
  .hero-trust-strip { max-width: 600px; }
  .demo-breakdowns-head { display: block; }
  .demo-breakdowns-head p { margin-top: 10px; }
  .demo-breakdown-grid { grid-template-columns: 1fr; }
  .offer-panel { grid-template-columns: 1fr; }
  .conversion-contact { grid-template-columns: 1fr; }
  .contact-sales-copy { position: static; }
  .service-two-column { grid-template-columns: 1fr; }
  .project-breakdown { grid-template-columns: 1fr; }
  .project-case-hero { padding-left: 24px; padding-right: 24px; }
  .conversion-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-meta { grid-column: 1; }
}

@media (max-width: 680px) {
  .hero-trust-strip span { font-size: 8.5px; }
  .work-video-card { display: block; }
  .demo-breakdown-card { grid-template-columns: 86px minmax(0,1fr) 18px; gap: 12px; }
  .demo-breakdown-card img { width: 86px; height: 78px; }
  .deliverables-grid { grid-template-columns: 1fr; }
  .process-grid, .process-grid.four-steps { grid-template-columns: 1fr; }
  .process-step { min-height: 210px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .contact-modal-panel { padding: 26px 18px 24px; }
  .project-case-copy h1 { font-size: clamp(48px,15vw,72px); }
  .project-case-video { border-radius: 20px; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery img { min-height: 240px; }
}


/* =========================================================
   v59 — hero heading clipping fix + centered Discord pulse
   ========================================================= */
.hero.hero-art-showcase,
.hero.hero-art-showcase .hero-content,
.hero.hero-art-showcase .hero-copy-scale-group,
.hero.hero-art-showcase .hero-title-lead-group,
.hero.hero-art-showcase h1 {
  overflow: visible;
}

.hero-art-showcase h1 {
  line-height: 1.02 !important;
  padding-top: 0.08em;
  padding-bottom: 0.04em;
}

.hero.hero-art-showcase .hero-title-lead-group {
  align-items: flex-start;
}

@media (max-width: 700px) {
  .hero-art-showcase h1 {
    line-height: 1.04 !important;
    padding-top: 0.06em;
    padding-bottom: 0.03em;
  }
}

.discord-chat-fab__icon-wrap {
  animation: discord-icon-centered-pulse 3.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.discord-chat-fab__icon {
  width: 28px;
  height: 28px;
}

.discord-chat-fab:hover .discord-chat-fab__icon-wrap,
.discord-chat-fab:focus-visible .discord-chat-fab__icon-wrap {
  animation-play-state: paused;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(88, 101, 242, .38);
}

@keyframes discord-icon-centered-pulse {
  0%, 100% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.02);
  }
  38% {
    transform: scale(1.10);
  }
  52% {
    transform: scale(1.03);
  }
  70% {
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .discord-chat-fab__icon {
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-chat-fab__icon-wrap {
    animation: none !important;
  }
}


/* =========================================================
   v60 — independent freelance positioning
   ========================================================= */
.independent-practice {
  background: #0b0e12;
}

.independent-practice-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: start;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 106, 61, .09), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.independent-practice-panel h2 {
  max-width: 680px;
  font-size: clamp(36px, 4.5vw, 68px);
}

.independent-practice-copy {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}

.independent-practice-copy p {
  margin: 0;
  color: #d2d5db;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.65;
}

.independent-practice-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.independent-practice-points span {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}

@media (max-width: 820px) {
  .independent-practice-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px;
  }

  .independent-practice-copy {
    padding-top: 0;
  }
}

/* v22 — animated-background card: keep the castle as the focal point */
.service-art-background video {
  right: 0 !important;
  width: 70% !important;
  object-fit: cover !important;
  object-position: 78% 46% !important;
  transform-origin: 78% 46% !important;
}

@media (max-width: 1000px) {
  .service-art-background video {
    width: 72% !important;
    object-position: 80% 46% !important;
  }
}

@media (max-width: 700px) {
  .service-art-background video {
    width: 76% !important;
    object-position: 82% 46% !important;
  }
}

/* v54 — animated background card: MP4 only, keep castle fully visible. */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 74% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 100% 50% !important;
    transform: translate3d(0,0,0) scale(1) !important;
    transform-origin: 100% 50% !important;
    filter: none !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(0,0,0) scale(1.025) !important;
  }

  .service-card-2::before {
    width: 58% !important;
    background: linear-gradient(
      90deg,
      rgba(4,5,8,1) 0%,
      rgba(4,5,8,1) 70%,
      rgba(4,5,8,.95) 80%,
      rgba(4,5,8,.76) 89%,
      rgba(4,5,8,.38) 96%,
      rgba(4,5,8,0) 100%
    ) !important;
  }

  .service-card-2 .service-showcase-copy {
    width: 58% !important;
  }
}

/* v55 — homepage animated-background MP4: stronger castle focal scale. */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    width: 78% !important;
    object-position: 94% 48% !important;
    transform: translate3d(0,0,0) scale(1.16) !important;
    transform-origin: 92% 48% !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(0,0,0) scale(1.19) !important;
  }
}

/* v56 — homepage animated-background MP4: larger castle presence. */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    width: 82% !important;
    object-position: 90% 46% !important;
    transform: translate3d(0,0,0) scale(1.29) !important;
    transform-origin: 88% 46% !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(0,0,0) scale(1.33) !important;
  }
}


/* v57 — homepage animated-background MP4: +15% zoom, 5% left, faster response */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    width: 82% !important;
    object-position: 85% 46% !important;
    transform: translate3d(0,0,0) scale(1.48) !important;
    transform-origin: 83% 46% !important;
    transition: transform 220ms cubic-bezier(.22,.61,.36,1) !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(0,0,0) scale(1.52) !important;
  }
}

/* v58 — homepage castle framing: slightly left and lower so the top flag stays visible */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    object-position: 82% 43% !important;
    transform: translate3d(-3.5%, 3%, 0) scale(1.48) !important;
    transform-origin: 80% 43% !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(-3.5%, 3%, 0) scale(1.52) !important;
  }
}

/* v59 — castle card: 10% farther left + aggressive hover zoom like the character card */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    object-position: 82% 43% !important;
    transform: translate3d(-13.5%, 3%, 0) scale(1.48) !important;
    transform-origin: 76% 43% !important;
    transition: transform 220ms cubic-bezier(.22,.61,.36,1) !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(-13.5%, 3%, 0) scale(1.62) !important;
  }
}

/* v60 — final castle framing: 2% right so the black edge is hidden */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    transform: translate3d(-11.5%, 3%, 0) scale(1.48) !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(-11.5%, 3%, 0) scale(1.62) !important;
  }
}

/* v61 — castle MP4 final responsive framing */
@media (min-width: 701px) {
  /* Keep the horizontal crop; move the desktop MP4 10% lower. */
  .service-card-2 .service-art-background video {
    transform: translate3d(-11.5%, 13%, 0) scale(1.48) !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(-11.5%, 13%, 0) scale(1.62) !important;
  }
}

@media (max-width: 700px) {
  /* Mobile: keep the castle large and prominent instead of shrinking into the distance. */
  .service-card-2 .service-art-background video {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 82% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 80% 42% !important;
    transform: translate3d(-6%, 5%, 0) scale(1.24) !important;
    transform-origin: 78% 42% !important;
  }
}

/* v62 — revert the extra desktop zoom and prevent page-level horizontal overflow */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}

main,
.site-header,
.site-footer,
.animation-services,
.service-showcase-grid,
.service-showcase-card,
.service-art {
  max-width: 100%;
}

.service-showcase-card,
.service-art {
  overflow: hidden !important;
}

/* Desktop remains at the framing from the step before the extra +10% zoom. */
@media (min-width: 701px) {
  .service-card-2 .service-art-background video {
    transform: translate3d(-11.5%, 13%, 0) scale(1.48) !important;
  }

  .service-card-2:hover .service-art-background video,
  .service-card-2:focus-within .service-art-background video {
    transform: translate3d(-11.5%, 13%, 0) scale(1.62) !important;
  }
}

/* Slot marketplace */
.slot-sale-section{position:relative;padding-top:5rem;padding-bottom:5rem}.slot-sale-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}.slot-sale-head .section-head{margin:0}.sale-label{display:inline-flex;align-items:center;border-radius:999px;background:#d52222;color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.14em;padding:.55rem .85rem;box-shadow:0 8px 30px rgba(213,34,34,.35)}.slot-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.slot-sale-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(16,18,28,.82);box-shadow:0 24px 60px rgba(0,0,0,.25);transition:.25s transform,.25s border-color}.slot-sale-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3)}.slot-sale-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.slot-sale-card .sale-label{position:absolute;top:14px;left:14px}.slot-card-copy{padding:1.25rem}.slot-card-copy h3{font-size:1.45rem;margin:0 0 .4rem}.slot-card-copy p{margin:.25rem 0 1.1rem;color:var(--muted,#aeb2c2)}.slot-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.1rem}.slot-meta span{border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:.35rem .65rem;font-size:.78rem}.slot-coming{min-height:100%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(93,42,125,.35),rgba(12,15,24,.9));padding:2rem}.slot-coming:nth-child(3){background:linear-gradient(145deg,rgba(116,28,34,.4),rgba(12,15,24,.9))}.slot-coming .theme-icon{font-size:3rem;margin-bottom:1rem}.slot-detail-hero{padding:9rem 0 3rem}.slot-detail-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:2rem;align-items:start}.slot-detail-image{width:100%;border-radius:26px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 90px rgba(0,0,0,.4)}.slot-detail-summary{position:sticky;top:100px;border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:1.6rem;background:rgba(16,18,28,.88)}.slot-detail-summary h1{font-size:clamp(2.2rem,4vw,4.2rem);margin:.5rem 0}.slot-detail-summary .btn{width:100%;text-align:center}.slot-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.slot-info-card{border:1px solid rgba(255,255,255,.11);border-radius:22px;padding:1.5rem;background:rgba(18,20,31,.68)}.slot-info-card h2,.slot-info-card h3{margin-top:0}.slot-checklist{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}.slot-checklist li:before{content:'✓';margin-right:.65rem;color:#7ce4a1;font-weight:900}.slot-inquiry{margin-top:2rem}.slot-note{font-size:.9rem;color:var(--muted,#aeb2c2)}
@media(max-width:900px){.slot-card-grid,.slot-info-grid,.slot-detail-layout{grid-template-columns:1fr}.slot-sale-head{align-items:start;flex-direction:column}.slot-detail-summary{position:static}.slot-detail-hero{padding-top:7rem}}

/* v63 — stronger animated FOR SALE badges and fully interactive slot cards */
.sale-label{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,154,82,.72);
  background:linear-gradient(135deg,#9e1010 0%,#e33224 48%,#ff6a28 100%);
  box-shadow:0 0 0 1px rgba(255,93,35,.16),0 10px 34px rgba(226,47,32,.42),inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  animation:saleLabelPulse 2.4s ease-in-out infinite;
}
.sale-label::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-80%;
  bottom:-80%;
  left:-55%;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-22deg);
  animation:saleLabelSweep 2.8s ease-in-out infinite;
}
@keyframes saleLabelPulse{
  0%,100%{transform:translateY(0) scale(1);filter:saturate(1)}
  50%{transform:translateY(-2px) scale(1.035);filter:saturate(1.18)}
}
@keyframes saleLabelSweep{
  0%,25%{left:-55%;opacity:0}
  38%{opacity:1}
  62%,100%{left:125%;opacity:0}
}
.slot-sale-card[data-card-link]{cursor:pointer;outline:none}
.slot-sale-card[data-card-link]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 0 rgba(255,119,31,0);
  transition:box-shadow .22s ease;
}
.slot-sale-card[data-card-link]:hover,
.slot-sale-card[data-card-link]:focus,
.slot-sale-card[data-card-link]:focus-visible,
.slot-sale-card[data-card-link].is-selected{
  border-color:#ff7a22 !important;
  box-shadow:0 26px 70px rgba(0,0,0,.34),0 0 0 2px rgba(255,122,34,.25),0 0 32px rgba(255,105,28,.2);
  transform:translateY(-6px);
}
.slot-sale-card[data-card-link]:hover::after,
.slot-sale-card[data-card-link]:focus-visible::after,
.slot-sale-card[data-card-link].is-selected::after{
  box-shadow:inset 0 0 0 2px #ff7a22;
}
.slot-sale-card[data-card-link] img{transition:transform .35s cubic-bezier(.22,.61,.36,1),filter .35s ease}
.slot-sale-card[data-card-link]:hover img,
.slot-sale-card[data-card-link]:focus-visible img{
  transform:scale(1.025);
  filter:saturate(1.08) contrast(1.03);
}
@media(prefers-reduced-motion:reduce){
  .sale-label,.sale-label::after{animation:none!important}
  .slot-sale-card[data-card-link],.slot-sale-card[data-card-link] img{transition:none!important}
}

/* v64 — refined sale badge and lighter selected-card outline */
.sale-label{
  font-size:.68rem;
  letter-spacing:.12em;
  padding:.38rem .62rem;
  border-color:rgba(255,136,72,.48);
  background:linear-gradient(135deg,#a81717 0%,#d92b20 58%,#ed5528 100%);
  box-shadow:0 6px 18px rgba(213,34,34,.24),inset 0 1px 0 rgba(255,255,255,.2);
  animation:saleLabelPulseSoft 3.6s ease-in-out infinite;
}
.sale-label::after{
  width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  animation:saleLabelSweepSoft 4.4s ease-in-out infinite;
}
@keyframes saleLabelPulseSoft{
  0%,100%{transform:translateY(0);filter:saturate(1)}
  50%{transform:translateY(-1px);filter:saturate(1.06)}
}
@keyframes saleLabelSweepSoft{
  0%,40%{left:-50%;opacity:0}
  50%{opacity:.65}
  68%,100%{left:125%;opacity:0}
}
.slot-sale-card[data-card-link]:hover,
.slot-sale-card[data-card-link]:focus,
.slot-sale-card[data-card-link]:focus-visible,
.slot-sale-card[data-card-link].is-selected{
  border-color:rgba(255,122,34,.9)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.3),0 0 0 1px rgba(255,122,34,.18),0 0 20px rgba(255,105,28,.12);
  transform:translateY(-5px);
}
.slot-sale-card[data-card-link]:hover::after,
.slot-sale-card[data-card-link]:focus-visible::after,
.slot-sale-card[data-card-link].is-selected::after{
  box-shadow:inset 0 0 0 1px rgba(255,122,34,.72);
}

/* Pirate slot detail v4 — keeps the current site visual language */
.slot-detail-hero,.slot-symbols-section,.slot-preview-section,.slot-inquiry{overflow:hidden}
.slot-detail-layout,.slot-info-grid,.slot-content-wrap,.slot-inquiry{width:min(1480px,100%);margin-inline:auto}
.slot-detail-hero{padding:9rem 48px 3rem}
.slot-detail-layout{min-width:0}
.slot-detail-layout>*{min-width:0}
.slot-detail-image{display:block;max-width:100%;height:auto}
.slot-detail-summary{min-width:0}
.slot-info-grid{min-width:0}
.slot-info-card{min-width:0;overflow-wrap:anywhere}
.slot-section-head{max-width:820px;margin-bottom:32px}
.slot-section-head h2{margin-bottom:14px}
.slot-symbols-section{background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,0))}
.symbol-group{margin-top:38px}
.symbol-group-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:14px}
.symbol-group-head h3{margin:0;font-size:clamp(1.35rem,2vw,1.8rem)}
.symbol-group-head p{max-width:680px;margin:0;color:#aeb2c2;line-height:1.6}
.symbol-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.low-symbols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}
.special-symbols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}
.symbol-card,.symbol-placeholder{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(18,20,31,.68)}
.symbol-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s ease}
.symbol-card:hover img{transform:scale(1.04)}
.symbol-card figcaption{padding:11px 13px;color:#ddd;font-size:.83rem;border-top:1px solid rgba(255,255,255,.08)}
.symbol-placeholder{display:grid;place-content:center;min-height:160px;text-align:center;background:linear-gradient(145deg,rgba(255,106,61,.08),rgba(18,20,31,.75));border-style:dashed}
.symbol-placeholder span{font-weight:900;letter-spacing:.12em;color:#ff8059}
.symbol-placeholder small{margin-top:7px;color:#8f95a3}
.slot-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.preview-card{min-width:0;border:1px solid rgba(255,255,255,.11);border-radius:22px;padding:18px;background:rgba(18,20,31,.68)}
.preview-stage{min-height:260px;display:grid;place-items:center;align-content:center;gap:9px;text-align:center;border-radius:16px;border:1px dashed rgba(255,255,255,.18);background:radial-gradient(circle at 50% 40%,rgba(255,106,61,.14),transparent 48%),#0c0d12}
.preview-play{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ff6a3d;font-size:1.25rem;box-shadow:0 12px 34px rgba(255,106,61,.22)}
.preview-stage strong{font-size:1.05rem}.preview-stage small{color:#9ca2af}
.preview-card h3{margin:18px 0 8px}.preview-card p{margin:0;color:#aeb2c2;line-height:1.65}
@media(max-width:1100px){.symbol-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.low-symbols,.special-symbols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.slot-detail-hero{padding:7rem 24px 2.5rem}.slot-preview-grid{grid-template-columns:1fr}.symbol-group-head{align-items:start;flex-direction:column;gap:8px}}
@media(max-width:640px){.slot-detail-hero,.slot-symbols-section,.slot-preview-section,.slot-inquiry{padding-left:18px;padding-right:18px}.symbol-grid,.low-symbols,.special-symbols{grid-template-columns:repeat(2,minmax(0,1fr))}.symbol-placeholder{min-height:135px}.preview-stage{min-height:210px}}

/* Pirate slot inquiry — same alignment and centering as the homepage contact section */
.slot-inquiry {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .slot-inquiry {
    grid-template-columns: 1fr;
  }
}

/* v8 — slot inquiry uses the same full-width alignment as the homepage contact section */
.slot-inquiry {
  width: 100%;
  max-width: none;
  margin: 2rem 0 0;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

.slot-inquiry .contact-sales-copy,
.slot-inquiry .contact-form {
  min-width: 0;
}

@media (max-width: 900px) {
  .slot-inquiry {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 640px) {
  .slot-inquiry {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Slot symbols v9 */
.symbol-group-head > div{min-width:0}
.symbol-count{flex:0 0 auto;padding:7px 11px;border:1px solid rgba(255,106,61,.32);border-radius:999px;color:#ff8059;background:rgba(255,106,61,.07);font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.symbol-addon-card{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:20px;border:1px dashed rgba(255,128,89,.38);border-radius:18px;background:linear-gradient(145deg,rgba(255,106,61,.07),rgba(18,20,31,.55))}
.symbol-addon-plus{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:50%;background:rgba(255,106,61,.12);color:#ff8059;font-weight:900;font-size:1.05rem}
.symbol-addon-card h4{margin:0 0 8px;font-size:1rem}
.symbol-addon-card p{margin:0;color:#aeb2c2;font-size:.86rem;line-height:1.55}
.symbol-preview-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;min-height:300px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:radial-gradient(circle at 50% 20%,rgba(255,106,61,.08),transparent 48%),#0c0e15}
.symbol-preview-board img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.symbol-preview-board img:hover{transform:translateY(-3px) scale(1.03);border-color:rgba(255,128,89,.55);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.preview-card-symbols{grid-column:span 1}
@media(max-width:900px){.symbol-count{align-self:flex-start}.symbol-preview-board{grid-template-columns:repeat(4,minmax(0,1fr));min-height:auto}}
@media(max-width:560px){.symbol-preview-board{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:7px}.symbol-addon-card{min-height:145px}}

/* v10 — slot hero uses equal left/right page alignment */
.slot-detail-hero {
  padding-left: 48px;
  padding-right: 48px;
}
.slot-detail-layout {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.slot-detail-layout > div,
.slot-detail-summary {
  min-width: 0;
}
@media (max-width: 900px) {
  .slot-detail-hero {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 640px) {
  .slot-detail-hero {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* v11 — aligned slot hero + exclusive sale and orientation previews */
.slot-detail-summary{
  position:static;
  top:auto;
  align-self:start;
  margin-top:0;
}
.slot-exclusive-note{
  margin:1rem 0 0;
  padding:1rem 1.05rem;
  border:1px solid rgba(255,128,89,.28);
  border-radius:16px;
  background:rgba(255,106,61,.065);
  color:#d8dbe4;
  line-height:1.55;
}
.slot-exclusive-note strong{color:#ff8059}
.orientation-preview-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,.75fr);gap:20px;margin-top:20px}
.orientation-preview-card{margin:0;border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:14px;background:rgba(18,20,31,.68);overflow:hidden}
.orientation-preview-frame{display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#090b11}
.orientation-preview-frame.landscape{aspect-ratio:16/9}
.orientation-preview-frame.portrait{aspect-ratio:9/16;max-height:540px;margin-inline:auto}
.orientation-preview-frame img{display:block;width:100%;height:100%;object-fit:cover}
.orientation-preview-frame.portrait img{object-position:center}
.orientation-preview-card figcaption{padding:13px 3px 2px}
.orientation-preview-card h3{margin:0 0 5px;font-size:1.05rem}
.orientation-preview-card p{margin:0;color:#aeb2c2;font-size:.88rem;line-height:1.5}
@media(max-width:900px){.orientation-preview-grid{grid-template-columns:1fr}.orientation-preview-frame.portrait{width:min(100%,360px)}}

/* v12 — match the right summary frame to the full height of the slot image */
.slot-detail-layout{
  align-items:stretch;
}
.slot-detail-summary{
  align-self:stretch;
  height:100%;
  display:flex;
  flex-direction:column;
}
@media (max-width:900px){
  .slot-detail-summary{
    height:auto;
  }
}

/* v13 — correct equal bottom alignment without oversizing the summary card */
.slot-detail-summary{
  height:auto;
  box-sizing:border-box;
}

/* v15 — exact hero-card alignment and compact CTA controls */
.slot-detail-summary .sale-label{
  align-self:flex-start;
  width:auto;
  max-width:max-content;
  flex:0 0 auto;
}
.slot-detail-summary .btn{
  width:auto;
  align-self:flex-start;
  display:inline-flex;
  justify-content:center;
}
@media (min-width:901px){
  .slot-detail-summary{
    min-height:0;
    max-height:none;
  }
}


/* v16 — extra breathing room in the exclusive-sale card */
@media (min-width:901px){
  .slot-detail-summary{padding-bottom:2.25rem;}
  .slot-exclusive-note{margin-bottom:.75rem;}
}

/* v130 — make the private-pricing note a visible outlined callout */
.slot-detail-summary .slot-note{
  margin:.75rem 0 0;
  padding:.78rem .9rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#eef0f6;
  line-height:1.45;
}

/* v131 — cinematic resource loader for the Pirate Slot prototype */
html[data-local-preview]{
  --pirate-loader-art:url('/images/slots/pirate/pirate-loading-art.png');
}
.slot-demo-loader{
  position:absolute;
  z-index:25;
  left:50%;
  top:50%;
  width:min(100vw,calc(100dvh * 1.775862));
  height:auto;
  aspect-ratio:1648 / 928;
  display:grid;
  place-items:end center;
  box-sizing:border-box;
  padding:0 0 4.75%;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(2,5,9,.04) 20%,rgba(2,5,9,.2) 58%,rgba(2,5,9,.72) 100%),
    var(--pirate-loader-art,url('/images/slots/pirate/pirate-loading-art.png')) center 38%/cover no-repeat,
    radial-gradient(circle at 50% 35%,#4c2a19,#070a10 70%);
  border-radius:clamp(10px,1.15vw,22px);
  box-shadow:0 28px 80px rgba(0,0,0,.58);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .36s ease,visibility 0s linear .36s;
}
.slot-demo-modal.is-loading .slot-demo-loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s ease;
}
.slot-demo-modal.is-loading .slot-demo-game{visibility:hidden}
.slot-demo-loader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(255,207,119,.08) 48%,transparent 68%);
  animation:pirateLoaderLight 2.6s ease-in-out infinite;
}
.slot-demo-loader__content{
  position:relative;
  z-index:1;
  width:min(34%,520px);
  min-width:240px;
  padding:0;
  text-align:center;
}
.slot-demo-loader__kicker{
  display:block;
  margin-bottom:clamp(6px,.85vh,9px);
  color:rgba(255,238,197,.86);
  font-size:clamp(.52rem,.68vw,.68rem);
  font-weight:800;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
.slot-demo-loader__track{
  position:relative;
  height:6px;
  overflow:visible;
  border:1px solid rgba(255,228,174,.24);
  border-radius:999px;
  background:rgba(7,8,10,.58);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.76);
}
.slot-demo-loader__fill{
  position:absolute;
  inset:0;
  overflow:hidden;
  transform:scaleX(var(--demo-load-progress,0));
  transform-origin:left center;
  border-radius:inherit;
  background:linear-gradient(90deg,#b65f32 0%,#d8944d 58%,#e8c982 100%);
  box-shadow:inset 0 1px 0 rgba(255,247,219,.2);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.slot-demo-loader__fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.2) 49%,transparent 64%);
  animation:pirateLoaderShine 1.8s linear infinite;
}
.slot-demo-loader__percent{
  position:absolute;
  z-index:2;
  inset:calc(100% + 7px) auto auto 50%;
  transform:translateX(-50%);
  color:rgba(255,242,211,.78);
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.slot-demo-loader__status{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@keyframes pirateLoaderLight{0%,100%{transform:translateX(-9%);opacity:.45}50%{transform:translateX(9%);opacity:1}}
@keyframes pirateLoaderShine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@media(max-width:760px){
  .slot-demo-loader{padding-bottom:5.5%;background-position:52% center}
  .slot-demo-loader__content{width:42%;min-width:210px}
}
@media(prefers-reduced-motion:reduce){
  .slot-demo-loader::after,.slot-demo-loader__fill::after{animation:none}
  .slot-demo-loader__fill{transition:none}
}

/* v18 — keep the complete desktop summary inside the image-aligned frame */
@media (min-width:901px){
  .slot-detail-summary{
    padding:clamp(1.15rem,1.35vw,1.6rem);
    overflow:hidden;
  }
  .slot-detail-summary h1{
    font-size:clamp(2.15rem,3.1vw,3.55rem);
    line-height:1.02;
    margin:.35rem 0 .65rem;
  }
  .slot-detail-summary > p:not(.eyebrow):not(.slot-note):not(.slot-exclusive-note){
    margin:.35rem 0 .8rem;
    font-size:clamp(.88rem,.82vw,.98rem);
    line-height:1.48;
  }
  .slot-detail-summary .eyebrow{
    margin:.8rem 0 .2rem;
  }
  .slot-detail-summary .slot-meta{
    margin:.55rem 0 .8rem;
    gap:.4rem;
  }
  .slot-detail-summary .slot-meta span{
    padding:.28rem .55rem;
    font-size:.72rem;
  }
  .slot-detail-summary .btn{
    padding:.75rem 1.05rem;
  }
  .slot-detail-summary .slot-note{
    margin:.65rem 0 0;
    font-size:.8rem;
    line-height:1.4;
  }
  .slot-detail-summary .slot-exclusive-note{
    margin:auto 0 0;
    padding:.78rem .9rem;
    font-size:clamp(.78rem,.76vw,.9rem);
    line-height:1.45;
    border-radius:14px;
  }
}

/* v19 — homepage sale badge cleanup */
.slot-sale-card > .sale-label{z-index:4;pointer-events:none;}
.slot-sale-card[data-card-link].is-selected > .sale-label,.slot-sale-card[data-card-link]:hover > .sale-label,.slot-sale-card[data-card-link]:focus-visible > .sale-label{opacity:1;visibility:visible;display:inline-flex;}


/* Footer: keep only the legal/copyright row on every page */
.site-footer.footer-bottom-only {
  display: block;
  padding-top: 30px;
  padding-bottom: 34px;
}
.site-footer.footer-bottom-only .footer-meta {
  grid-column: auto;
  padding-top: 0;
  border-top: 0;
}
.site-footer.footer-bottom-only .footer-copyright {
  margin-top: 0;
}

/* v22 — service-card selection matches the slot-card orange outline */
.service-showcase-card:hover,
.service-showcase-card:focus-within,
.service-showcase-card:active,
.service-showcase-card.is-selected {
  border-color: rgba(255,122,34,.9) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,122,34,.18),
    inset 0 0 0 1px rgba(255,122,34,.72),
    0 0 20px rgba(255,105,28,.12);
}

/* v23 — COMING SOON labels for unfinished slots and previews */
.coming-soon-label{position:absolute;top:14px;left:14px;z-index:8;display:inline-flex;align-items:center;width:max-content;max-width:calc(100% - 28px);padding:.48rem .78rem;border:1px solid rgba(255,166,56,.72);border-radius:999px;background:linear-gradient(180deg,#f4a43a,#c86a12);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase;box-shadow:0 8px 24px rgba(217,112,20,.28);white-space:nowrap}
.slot-coming{position:relative;padding-top:4.2rem}
.service-showcase-card{position:relative}
.service-showcase-card .coming-soon-label{top:18px;left:18px}
.slot-sale-card:hover .coming-soon-label,.slot-sale-card:focus-within .coming-soon-label,.slot-sale-card.is-selected .coming-soon-label,.service-showcase-card:hover .coming-soon-label,.service-showcase-card:focus-within .coming-soon-label{opacity:1;visibility:visible;transform:none}
@media(max-width:700px){.coming-soon-label{font-size:.66rem;padding:.43rem .68rem}.slot-coming{padding-top:3.8rem}}

.service-page-coming{position:fixed;top:96px;right:24px;left:auto;z-index:60}
@media(max-width:700px){.service-page-coming{top:82px;right:14px}}


/* Coming-soon slot cards: intentionally unavailable */
.slot-sale-card.slot-coming{
  cursor:default!important;
  pointer-events:none;
  user-select:none;
  border-color:rgba(255,255,255,.08)!important;
  filter:saturate(.55) brightness(.72);
}
.slot-sale-card.slot-coming::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:rgba(4,6,12,.34);
  pointer-events:none;
}
.slot-sale-card.slot-coming > :not(.coming-soon-label){
  filter:blur(1.6px);
  opacity:.72;
}
.slot-sale-card.slot-coming .coming-soon-label{
  z-index:10;
  filter:none;
  opacity:1;
}
.slot-sale-card.slot-coming:hover,
.slot-sale-card.slot-coming:focus,
.slot-sale-card.slot-coming:focus-visible{
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.25)!important;
}
@media (max-width:700px){
  .slot-sale-card.slot-coming > :not(.coming-soon-label){filter:blur(1.1px)}
}

/* v25 — clean placeholders and muted Animated Backgrounds preview */
.theme-icon img{
  display:block;
  width:1px;
  height:1px;
  opacity:0;
}

/* The Animated Backgrounds page remains available, while its outdated
   homepage preview is clearly marked as not yet updated. */
.service-showcase-card.service-card-2{
  overflow:hidden;
  background:rgba(9,12,20,.94);
}
.service-showcase-card.service-card-2::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:rgba(3,5,10,.40);
}
.service-showcase-card.service-card-2 > :not(.coming-soon-label){
  filter:blur(1.7px) saturate(.55) brightness(.62);
  opacity:.76;
}
.service-showcase-card.service-card-2 .coming-soon-label{
  z-index:10;
  filter:none;
  opacity:1;
}
.service-showcase-card.service-card-2:hover > :not(.coming-soon-label),
.service-showcase-card.service-card-2:focus-within > :not(.coming-soon-label){
  filter:blur(1.35px) saturate(.6) brightness(.68);
}
@media (max-width:700px){
  .service-showcase-card.service-card-2 > :not(.coming-soon-label){
    filter:blur(1.15px) saturate(.55) brightness(.62);
  }
}

/* v26 — subtler Coming Soon badges */
.coming-soon-label,
.service-showcase-card .coming-soon-label {
  left: auto;
  right: 14px;
  background: rgba(10, 12, 18, .46);
  border-color: rgba(255, 174, 72, .58);
  color: rgba(255, 230, 198, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.service-showcase-card .coming-soon-label {
  left: auto;
  right: 18px;
}

/* v27 — Pirate Slot package configurator */
.slot-package-section{position:relative;overflow:hidden;padding-top:84px;padding-bottom:92px;background:radial-gradient(circle at 12% 10%,rgba(239,145,48,.10),transparent 35%),radial-gradient(circle at 88% 88%,rgba(43,123,156,.09),transparent 34%)}
.slot-package-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent)}
.slot-package-section .slot-content-wrap{position:relative;z-index:1}
.package-section-head{max-width:850px;margin-bottom:30px}
.package-tabs{border:1px solid rgba(255,255,255,.10);border-radius:26px;background:rgba(8,11,18,.76);box-shadow:0 30px 90px rgba(0,0,0,.30);overflow:hidden;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.package-tablist{display:grid;grid-template-columns:repeat(4,1fr);padding:10px;gap:8px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.018)}
.package-tab{position:relative;min-width:0;text-align:left;padding:17px 18px 16px;border:1px solid transparent;border-radius:17px;color:rgba(255,255,255,.68);background:transparent;cursor:pointer;transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;font:inherit}
.package-tab::after{content:"";position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:999px;background:linear-gradient(90deg,#f4a44b,#ffd087);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.package-tab:hover{color:#fff;background:rgba(255,255,255,.04);transform:translateY(-1px)}
.package-tab:focus-visible{outline:2px solid #f4a44b;outline-offset:2px}
.package-tab.is-active{color:#fff;border-color:rgba(244,164,75,.28);background:linear-gradient(135deg,rgba(244,164,75,.13),rgba(255,255,255,.035))}
.package-tab.is-active::after{transform:scaleX(1)}
.package-tab-kicker{display:block;margin-bottom:7px;color:#eeb271;font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.package-tab strong{display:block;font-size:1rem;line-height:1.18;margin-bottom:5px}
.package-tab small{display:block;font-size:.76rem;line-height:1.38;color:rgba(255,255,255,.48)}
.package-panel{padding:34px;animation:packageFade .28s ease both}
.package-panel[hidden]{display:none!important}
@keyframes packageFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.package-panel-intro{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:28px}
.package-panel-intro>div:first-child{max-width:760px}
.package-panel-intro h3{margin:8px 0 9px;font-size:clamp(1.65rem,3vw,2.5rem);letter-spacing:-.025em}
.package-panel-intro p{margin:0;color:rgba(255,255,255,.66);line-height:1.72}
.package-panel-number{font-size:clamp(3.2rem,8vw,6rem);line-height:.8;font-weight:900;color:rgba(255,255,255,.045);letter-spacing:-.08em;user-select:none}
.package-status{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;font-size:.7rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.package-status::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:0 0 14px currentColor;background:currentColor}
.package-status.ready{color:#75e1ad;background:rgba(54,198,133,.10);border:1px solid rgba(84,221,159,.22)}
.package-status.optional{color:#f2b36d;background:rgba(239,145,48,.09);border:1px solid rgba(239,145,48,.22)}
.package-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.package-feature-grid article{position:relative;min-height:205px;padding:22px;border-radius:19px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.044),rgba(255,255,255,.016));overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.package-feature-grid article::after{content:"";position:absolute;width:100px;height:100px;right:-48px;top:-48px;border-radius:50%;background:rgba(239,145,48,.09);filter:blur(4px)}
.package-feature-grid article:hover{transform:translateY(-3px);border-color:rgba(244,164,75,.22);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.022))}
.feature-icon{display:inline-grid;place-items:center;min-width:46px;height:38px;padding:0 10px;margin-bottom:28px;border-radius:11px;color:#ffc37e;background:rgba(239,145,48,.10);border:1px solid rgba(239,145,48,.20);font-size:.75rem;font-weight:900;letter-spacing:.04em}
.package-feature-grid h4{margin:0 0 8px;font-size:1.02rem}
.package-feature-grid p{margin:0;color:rgba(255,255,255,.58);font-size:.88rem;line-height:1.62}
.package-delivery{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid rgba(85,219,160,.15);background:rgba(54,198,133,.045)}
.package-delivery strong{margin-right:8px;color:#dffbef;font-size:.82rem}
.package-delivery span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.72);font-size:.75rem}
.animation-matrix{margin-top:18px;border:1px solid rgba(255,255,255,.08);border-radius:17px;overflow:hidden}
.animation-row{display:grid;grid-template-columns:1.45fr repeat(4,1fr);align-items:center;min-height:49px;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-size:.8rem}
.animation-row:first-child{border-top:0}
.animation-row>*{padding:10px 15px;text-align:center}
.animation-row>*:first-child{text-align:left}
.animation-head{background:rgba(255,255,255,.035);color:rgba(255,255,255,.72);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.animation-row .yes{color:#6fe0a9;text-shadow:0 0 12px rgba(81,222,160,.45)}
.package-disclaimer{margin:18px 0 0;padding:16px 18px;border-radius:15px;border-left:3px solid #ed9e4a;background:rgba(239,145,48,.055);color:rgba(255,255,255,.65);font-size:.86rem;line-height:1.65}
.package-disclaimer strong{color:#fff}
.package-cta{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:18px;padding:20px 22px;border-radius:18px;background:linear-gradient(110deg,rgba(239,145,48,.11),rgba(255,255,255,.025));border:1px solid rgba(239,145,48,.18)}
.package-cta>div{display:flex;flex-direction:column;gap:4px}
.package-cta strong{font-size:1rem}
.package-cta span{color:rgba(255,255,255,.58);font-size:.84rem;line-height:1.5}
.package-cta .btn{white-space:nowrap;margin:0}
@media(max-width:1000px){.package-tablist{grid-template-columns:repeat(2,1fr)}.package-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.slot-package-section{padding-top:60px;padding-bottom:66px}.package-tabs{border-radius:20px}.package-tablist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px}.package-tab{flex:0 0 78%;scroll-snap-align:start}.package-panel{padding:24px 17px}.package-panel-intro{gap:12px}.package-panel-number{display:none}.package-feature-grid{grid-template-columns:1fr}.package-feature-grid article{min-height:0}.animation-matrix{overflow-x:auto}.animation-row{min-width:620px}.package-delivery{align-items:flex-start}.package-delivery strong{width:100%;margin-bottom:2px}.package-cta{align-items:flex-start;flex-direction:column}.package-cta .btn{width:100%;text-align:center}}


/* v28 — Available package: green premium state, checklist and previews */
.package-tab:first-child{border-color:rgba(72,230,151,.20);background:linear-gradient(135deg,rgba(39,180,111,.075),rgba(255,255,255,.02))}
.package-tab:first-child .package-tab-kicker{color:#7bf0b5}
.package-tab:first-child.is-active{border-color:rgba(94,241,170,.52);background:linear-gradient(135deg,rgba(39,190,116,.22),rgba(19,83,58,.10));box-shadow:inset 0 0 0 1px rgba(113,255,187,.08),0 0 28px rgba(45,220,132,.16)}
.package-tab:first-child.is-active::after{background:linear-gradient(90deg,#4ce092,#a7ffd0);box-shadow:0 0 16px rgba(75,225,148,.65)}
.package-panel-ready{position:relative;background:radial-gradient(circle at 5% 0%,rgba(39,194,117,.11),transparent 32%),radial-gradient(circle at 95% 100%,rgba(57,223,142,.06),transparent 34%)}
.package-panel-ready::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:0 0 24px 24px;box-shadow:inset 0 0 70px rgba(37,196,118,.025)}
.available-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.available-summary>div{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid rgba(92,234,165,.18);border-radius:16px;background:linear-gradient(145deg,rgba(50,200,126,.085),rgba(255,255,255,.018))}
.available-summary strong{color:#eafff3;font-size:.92rem}.available-summary span{color:rgba(218,255,235,.62);font-size:.77rem;line-height:1.45}
.package-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.package-checklist article{display:flex;align-items:flex-start;gap:13px;min-height:108px;padding:17px 18px;border-radius:15px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012));transition:transform .2s ease,border-color .2s ease,background .2s ease}
.package-checklist article:hover{transform:translateY(-2px);border-color:rgba(91,232,161,.25);background:linear-gradient(145deg,rgba(56,202,128,.07),rgba(255,255,255,.018))}
.package-checklist .check{flex:0 0 28px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(52,210,129,.14);border:1px solid rgba(98,242,173,.36);color:#78f1b3;font-weight:900;box-shadow:0 0 18px rgba(50,221,133,.17)}
.package-checklist h4{margin:1px 0 6px;color:#f5fff9;font-size:.94rem}.package-checklist p{margin:0;color:rgba(255,255,255,.58);font-size:.81rem;line-height:1.55}.package-checklist p strong{color:#bff7d7}
.included-previews{margin-top:24px;padding-top:23px;border-top:1px solid rgba(104,236,170,.13)}
.included-previews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:15px}.included-previews-head h4{margin:8px 0 0;font-size:1.35rem}.included-previews-head p{max-width:520px;margin:0;color:rgba(255,255,255,.52);font-size:.82rem;line-height:1.55;text-align:right}
.included-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.included-preview-card{position:relative;min-height:230px;margin:0;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}.included-preview-card.preview-wide{grid-column:span 2}.included-preview-card img{width:100%;height:175px;object-fit:contain;display:block;padding:10px;background:radial-gradient(circle,rgba(62,172,120,.10),rgba(0,0,0,.08))}.included-preview-card.preview-wide img{object-fit:cover;padding:0}.included-preview-card figcaption,.preview-caption{display:flex;flex-direction:column;gap:4px;padding:13px 14px}.included-preview-card strong{font-size:.84rem;color:#f5fff9}.included-preview-card span{font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.4}
.logo-preview,.ui-preview{display:flex;flex-direction:column;justify-content:space-between}.logo-concepts{display:grid;gap:8px;padding:16px}.logo-concepts>span{display:block;padding:11px 8px;border:1px solid rgba(255,210,130,.18);border-radius:11px;background:linear-gradient(145deg,rgba(163,91,24,.17),rgba(255,255,255,.02));color:#ffd692;text-align:center;font-size:.7rem;letter-spacing:.12em;line-height:1.2}.logo-concepts b{font-size:1rem;color:#fff1c8}.mini-ui{display:flex;align-items:center;justify-content:center;gap:7px;min-height:170px;padding:18px;background:radial-gradient(circle,rgba(41,167,105,.14),transparent 65%)}.mini-ui button,.mini-ui span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#eafff3;border-radius:10px;padding:9px 11px;font:inherit;font-size:.72rem}.mini-ui .spin{width:48px;height:48px;border-radius:50%;font-size:1.3rem;color:#8af3bc;border-color:rgba(89,234,164,.35);box-shadow:0 0 22px rgba(55,213,132,.17)}
.transparency-note{display:flex;gap:18px;align-items:flex-start;margin-top:17px;padding:18px 20px;border-radius:16px;border:1px solid rgba(87,224,158,.20);background:linear-gradient(110deg,rgba(41,183,112,.09),rgba(255,255,255,.018))}.transparency-note strong{white-space:nowrap;color:#9bf5c5}.transparency-note p{margin:0;color:rgba(255,255,255,.62);font-size:.84rem;line-height:1.6}
@media(max-width:1000px){.available-summary{grid-template-columns:1fr}.included-preview-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.package-checklist{grid-template-columns:1fr}.included-previews-head{align-items:flex-start;flex-direction:column}.included-previews-head p{text-align:left}.included-preview-grid{grid-template-columns:1fr}.included-preview-card.preview-wide{grid-column:auto}.transparency-note{flex-direction:column;gap:6px}.available-summary>div{padding:15px}}


/* v29 — hero browser prototype launcher + visual 5x3 demo */
.slot-hero-preview{position:relative;min-width:0;overflow:hidden;border-radius:28px}.slot-hero-preview .slot-detail-image{display:block;width:100%;height:100%;object-fit:cover}.slot-hero-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(4,6,10,.72) 100%)}
.slot-prototype-launch{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);width:min(92%,540px)}.prototype-play-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:14px;padding:15px 20px;border:1px solid rgba(255,255,255,.28);border-radius:18px;color:#fff;background:linear-gradient(135deg,rgba(255,104,64,.96),rgba(225,63,35,.96));box-shadow:0 18px 48px rgba(0,0,0,.38),0 0 30px rgba(255,91,52,.22);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.prototype-play-btn:hover{transform:translateY(-3px);box-shadow:0 23px 56px rgba(0,0,0,.45),0 0 38px rgba(255,91,52,.34)}.prototype-play-btn span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}.prototype-play-btn strong{font-size:.96rem;letter-spacing:.01em}.prototype-play-btn small{font-size:.7rem;color:rgba(255,255,255,.78)}.prototype-play-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#f05a3a;box-shadow:0 7px 20px rgba(0,0,0,.22)}
.slot-demo-modal{position:fixed;z-index:10000;inset:0;display:none;place-items:center;padding:24px}.slot-demo-modal.is-open{display:grid}.slot-demo-backdrop{position:absolute;inset:0;background:rgba(2,3,6,.88);backdrop-filter:blur(13px)}.slot-demo-dialog{position:relative;z-index:1;width:min(1180px,96vw);max-height:94vh;overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:26px;background:radial-gradient(circle at 15% 0%,rgba(255,91,52,.12),transparent 30%),#0b0d13;box-shadow:0 40px 110px rgba(0,0,0,.7)}.slot-demo-close{position:absolute;z-index:5;right:16px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(8,10,15,.82);color:#fff;font-size:1.8rem;cursor:pointer}.slot-demo-intro{padding:clamp(34px,6vw,78px);text-align:center}.slot-demo-badge{display:inline-flex;padding:8px 12px;border-radius:999px;color:#ffad97;background:rgba(255,91,52,.1);border:1px solid rgba(255,91,52,.25);font-size:.7rem;font-weight:900;letter-spacing:.15em}.slot-demo-intro h2{margin:20px 0 12px;font-size:clamp(2rem,5vw,4.4rem);line-height:1}.slot-demo-intro>p{max-width:730px;margin:0 auto;color:rgba(255,255,255,.65);line-height:1.7}.slot-demo-warning{display:flex;flex-direction:column;gap:5px;max-width:760px;margin:26px auto;padding:17px 20px;border-radius:16px;border:1px solid rgba(255,184,85,.22);background:rgba(255,156,47,.07);color:rgba(255,255,255,.68)}.slot-demo-warning strong{color:#ffd29e}.slot-demo-warning span{font-size:.83rem;line-height:1.55}.slot-demo-start{border:0;cursor:pointer}.slot-demo-game{padding:58px 28px 24px}.demo-game-top{display:flex;justify-content:space-between;align-items:center;margin:0 auto 14px;max-width:940px;color:rgba(255,255,255,.72);font-size:.78rem;letter-spacing:.08em}.demo-live-dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#53e49f;box-shadow:0 0 14px #53e49f}.demo-fullscreen{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;border-radius:10px;padding:8px 11px;cursor:pointer}.demo-cabinet{max-width:940px;margin:0 auto;padding:20px;border:1px solid rgba(255,202,113,.25);border-radius:26px;background:linear-gradient(145deg,#4d2b16,#160d09 32%,#30180d 70%,#090708);box-shadow:inset 0 0 0 4px rgba(255,193,85,.06),0 25px 70px rgba(0,0,0,.55)}.demo-game-logo{text-align:center;margin:0 0 14px;color:#ffd27a;font-size:clamp(1.4rem,3vw,2.7rem);font-weight:900;letter-spacing:.1em;text-shadow:0 3px 0 #6c2c12,0 0 20px rgba(255,174,66,.3)}.demo-game-logo b{color:#fff0ba}.demo-reels{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,minmax(90px,1fr));gap:7px;padding:10px;min-height:390px;border:5px solid #b26c2c;border-radius:18px;background:#130e0b;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,.85)}.demo-symbol{display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:radial-gradient(circle,#4b301c,#1a110c 72%)}.demo-symbol img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(0,0,0,.5));transition:filter .2s ease}.demo-reels.is-spinning .demo-symbol img{animation:demoSymbolSpin .18s linear infinite;filter:blur(2px) brightness(.85)}@keyframes demoSymbolSpin{0%{transform:translateY(-34%) scale(.94)}100%{transform:translateY(34%) scale(.94)}}.demo-payline{position:absolute;z-index:2;left:4%;right:4%;top:50%;height:5px;border-radius:999px;background:#5cffab;box-shadow:0 0 16px #5cffab,0 0 30px rgba(92,255,171,.75);opacity:0;transform:scaleX(.2);transition:.25s}.demo-reels.show-win .demo-payline{opacity:1;transform:scaleX(1)}.demo-win-flash{position:absolute;z-index:3;inset:0;display:grid;place-items:center;color:#fff2a6;font-size:clamp(2.3rem,7vw,6rem);font-weight:950;letter-spacing:.06em;text-shadow:0 4px 0 #a83915,0 0 30px #ffb42e;opacity:0;transform:scale(.6);pointer-events:none}.demo-reels.show-win .demo-win-flash{animation:demoWin .9s ease both}@keyframes demoWin{20%{opacity:1;transform:scale(1.12)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}.demo-controls{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;margin-top:16px}.demo-credit{display:flex;flex-direction:column}.demo-credit small{color:rgba(255,255,255,.46);font-size:.65rem;letter-spacing:.12em}.demo-credit strong{font-size:1.2rem;color:#fff}.demo-secondary,.demo-spin{border:1px solid rgba(255,255,255,.14);color:#fff;background:rgba(255,255,255,.06);border-radius:14px;padding:13px 16px;font-weight:850;cursor:pointer}.demo-spin{width:84px;height:84px;border-radius:50%;border-color:#ff9d73;background:linear-gradient(145deg,#ff714c,#d53c25);box-shadow:0 0 30px rgba(255,83,48,.35)}.demo-spin:disabled{opacity:.6;cursor:wait}.demo-legal{text-align:center;margin:15px 0 0;color:rgba(255,255,255,.38);font-size:.72rem}.slot-demo-modal.is-fullscreen .slot-demo-dialog{width:100vw;height:100vh;max-height:none;border-radius:0}.slot-demo-modal.is-fullscreen .slot-demo-game{min-height:100vh;display:flex!important;flex-direction:column;justify-content:center}.slot-demo-modal.is-fullscreen .demo-cabinet{width:min(1100px,92vw)}body.slot-demo-open{overflow:hidden}
@media(max-width:760px){.slot-prototype-launch{bottom:14px}.prototype-play-btn{padding:11px 13px}.prototype-play-btn small{display:none}.slot-demo-modal{padding:0}.slot-demo-dialog{width:100vw;max-height:100vh;border-radius:0}.slot-demo-game{padding:62px 10px 18px}.demo-cabinet{padding:10px;border-radius:18px}.demo-reels{min-height:310px;gap:4px;padding:6px;grid-template-rows:repeat(3,minmax(70px,1fr))}.demo-controls{grid-template-columns:1fr 1fr 1fr}.demo-credit{grid-column:1/-1;align-items:center}.demo-spin{width:auto;height:auto;border-radius:14px}.demo-secondary,.demo-spin{padding:12px 7px;font-size:.72rem}}


/* v30 — centered launcher + full reel-strip presentation demo */
.slot-prototype-launch{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(88%,500px)}
.slot-hero-preview::after{background:linear-gradient(180deg,rgba(4,6,10,.12),rgba(4,6,10,.34))}
.demo-cabinet{position:relative;max-width:1100px;padding:0;border:0;border-radius:22px;aspect-ratio:1648/928;background:url('/images/slots/pirate/demo-layout.png?v=20260714-clean-v2') center/100% 100% no-repeat;overflow:hidden;box-shadow:0 28px 75px rgba(0,0,0,.6)}
.demo-game-logo{display:none}
.demo-reels{position:absolute;left:18.35%;top:26.8%;width:63.35%;height:64.95%;min-height:0;padding:0;gap:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr;border:0;border-radius:0;background:transparent;overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,.28)}
.demo-reel{position:relative;overflow:hidden;border-left:1px solid rgba(255,215,160,.34);border-right:1px solid rgba(35,15,5,.55);background:rgba(23,12,6,.22)}
.demo-reel-track{position:absolute;inset:0 0 auto;height:166.6667%;display:grid;grid-template-rows:repeat(5,20%);transform:translateY(-33.3333%);will-change:transform}
.demo-symbol{border:0;border-radius:0;background:radial-gradient(circle at 50% 45%,rgba(82,48,22,.16),rgba(10,5,2,.04) 72%);overflow:visible}
.demo-symbol img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55));transition:none}
.demo-reels.is-spinning .demo-symbol img{animation:none;filter:blur(1.8px) brightness(.8) drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.demo-reel.has-landed{animation:reelLand .42s cubic-bezier(.2,.85,.22,1.35)}
.demo-reel.has-landed .demo-symbol:nth-child(n+2):nth-child(-n+4) img{animation:symbolLand .38s cubic-bezier(.15,.85,.2,1.35) var(--land-delay,0ms) both;filter:brightness(1.15) drop-shadow(0 0 14px rgba(255,190,90,.35))}
@keyframes reelLand{0%{transform:translateY(-1.2%)}45%{transform:translateY(2.4%)}72%{transform:translateY(-.7%)}100%{transform:none}}
@keyframes symbolLand{0%{transform:translateY(-10%) scale(.92)}55%{transform:translateY(5%) scale(1.06)}100%{transform:none}}
.demo-payline{left:2%;right:2%;top:50%;height:4px}
.demo-win-flash{font-size:clamp(1.8rem,5vw,5rem)}
@media(max-width:760px){.slot-prototype-launch{top:50%;bottom:auto;width:min(88%,390px)}.demo-cabinet{padding:0;border-radius:12px}.demo-reels{min-height:0;gap:0;padding:0;grid-template-rows:1fr}.prototype-play-btn{padding:12px 14px}}

/* v66 — direct edge-to-edge browser prototype */
.slot-demo-modal,
.slot-demo-modal.is-open{padding:0;display:none;place-items:stretch;background:#05070b}
.slot-demo-modal.is-open{display:block}
.slot-demo-backdrop{display:none}
.slot-demo-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-height:none;overflow:hidden;border:0;border-radius:0;background:#05070b;box-shadow:none}
.slot-demo-game{display:flex!important;width:100%;height:100%;min-height:100dvh;padding:0;align-items:center;justify-content:center;overflow:hidden}
.demo-cabinet{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;aspect-ratio:auto;background-size:cover;background-position:center;box-shadow:none}
.demo-reels{left:18.35%;top:26.8%;width:63.35%;height:64.95%}
.demo-controls{position:absolute;z-index:8;left:50%;bottom:clamp(10px,2.2vh,28px);transform:translateX(-50%);width:min(820px,92vw);margin:0;padding:10px 14px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(5,7,11,.68);backdrop-filter:blur(12px)}
.demo-legal{position:absolute;z-index:8;left:50%;bottom:2px;transform:translateX(-50%);margin:0;white-space:nowrap;font-size:.62rem;text-shadow:0 1px 3px #000}
body.slot-demo-open{overflow:hidden}
@media(max-width:760px){
 .slot-demo-dialog,.slot-demo-game,.demo-cabinet{height:100dvh;min-height:100dvh}
 .demo-cabinet{width:100vw;border-radius:0;background-size:cover}
 .demo-controls{bottom:10px;width:94vw;padding:8px}
 .demo-legal{display:none}
}


/* v67 — controls below the cabinet, visible close control and credit behavior */
.slot-demo-game{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:0;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  padding:0;
  background:#05070b;
  overflow:hidden;
}
.demo-cabinet{
  flex:0 1 auto;
  width:min(100vw,calc((100dvh - 108px) * 1.775862));
  height:auto;
  max-height:calc(100dvh - 108px);
  aspect-ratio:1648/928;
  background-size:100% 100%;
  background-position:center;
}
.demo-controls{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  flex:0 0 92px;
  width:100%;
  max-width:none;
  min-height:92px;
  margin:0;
  padding:10px clamp(18px,4vw,70px);
  border:0;
  border-top:1px solid rgba(255,255,255,.12);
  border-radius:0;
  background:linear-gradient(180deg,#17120f,#090909);
  backdrop-filter:none;
  box-sizing:border-box;
}
.demo-legal{display:none}
.slot-demo-exit{
  position:fixed;
  z-index:30;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(5,7,11,.74);
  color:#fff;
  font:300 2rem/1 system-ui,sans-serif;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
}
.slot-demo-exit:hover{background:#ef6546;border-color:#ffad97;transform:scale(1.05)}
.demo-credit strong{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .demo-cabinet{width:min(100vw,calc((100dvh - 84px) * 1.775862));max-height:calc(100dvh - 84px)}
  .demo-controls{flex-basis:84px;min-height:84px;padding:8px 10px;grid-template-columns:1fr auto auto auto}
  .demo-credit{grid-column:auto;align-items:flex-start}
  .demo-spin{width:62px;height:62px;border-radius:50%}
  .demo-secondary{padding:10px 8px;font-size:.64rem}
  .slot-demo-exit{top:10px;right:10px;width:42px;height:42px;font-size:1.7rem}
}

/* v68 — preserve the original slot canvas without stretching or cropping */
.demo-cabinet{
  flex:0 0 auto;
  width:min(100vw,calc((100dvh - 92px) * 1.775862));
  height:min(calc(100dvh - 92px),calc(100vw / 1.775862));
  max-width:100vw;
  max-height:calc(100dvh - 92px);
  aspect-ratio:1648/928;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#05070b;
}
@media(max-width:760px){
  .demo-cabinet{
    width:min(100vw,calc((100dvh - 84px) * 1.775862));
    height:min(calc(100dvh - 84px),calc(100vw / 1.775862));
    max-height:calc(100dvh - 84px);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
  }
}

/* v69 — overlay UI, clean reels and soft reel landing */
.slot-demo-game{
  position:relative;
  display:grid!important;
  place-items:center;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  background:#05070b;
}
.demo-cabinet{
  flex:none;
  width:min(100vw,calc(100dvh * 1.775862));
  height:min(100dvh,calc(100vw / 1.775862));
  max-width:100vw;
  max-height:100dvh;
  aspect-ratio:1648/928;
  margin:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.demo-controls{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:clamp(10px,1.8vh,22px);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto auto auto;
  align-items:center;
  gap:12px;
  width:min(1040px,calc(100vw - 32px));
  min-height:0;
  margin:0;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(10,8,7,.78);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
}
.demo-reel{
  border-left:0;
  border-right:0;
  background:transparent;
}
.demo-symbol{
  border:0!important;
  box-shadow:none!important;
  background:transparent;
}
.demo-reel.has-landed,
.demo-reel.has-landed .demo-symbol img{
  animation:none!important;
}
.demo-reel-track{will-change:transform}
@media(max-width:760px){
  .demo-cabinet{
    width:min(100vw,calc(100dvh * 1.775862));
    height:min(100dvh,calc(100vw / 1.775862));
    max-height:100dvh;
  }
  .demo-controls{
    bottom:8px;
    width:calc(100vw - 16px);
    padding:8px;
    gap:7px;
    grid-template-columns:minmax(88px,1fr) auto auto auto;
    border-radius:14px;
  }
}

/* v70 — no glass panel, transparent controls, custom-result editor and symbol 01 win state */
.demo-controls{
  grid-template-columns:minmax(140px,1fr) repeat(4,auto);
  width:min(1180px,calc(100vw - 32px));
  padding:8px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.demo-secondary,.demo-spin{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:none;
  backdrop-filter:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.demo-secondary:hover,.demo-spin:hover{background:rgba(255,255,255,.12);border-color:#fff}
.demo-spin{background:rgba(240,90,58,.34);border-color:rgba(255,173,151,.9)}
.demo-credit{text-shadow:0 2px 8px #000}
.slot-demo-exit{background:rgba(0,0,0,.16);backdrop-filter:none;box-shadow:none}
.demo-custom-panel{
  position:absolute;z-index:40;left:50%;bottom:94px;transform:translate(-50%,18px);
  width:min(720px,calc(100vw - 28px));padding:16px;border:1px solid rgba(255,255,255,.26);
  border-radius:18px;background:#090b10;box-shadow:0 22px 70px rgba(0,0,0,.66);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.demo-custom-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.demo-custom-head,.demo-custom-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-custom-head{margin-bottom:12px}.demo-custom-head strong{font-size:1rem;letter-spacing:.04em}
.demo-custom-head button{width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;color:#fff;font-size:1.35rem;cursor:pointer}
.demo-custom-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.demo-custom-grid select{min-width:0;width:100%;padding:9px 7px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#141821;color:#fff;font:700 .72rem/1 system-ui,sans-serif}
.demo-custom-actions{justify-content:flex-end;margin-top:12px}.demo-custom-play{width:auto;height:auto;border-radius:12px;padding:11px 22px}
.demo-symbol img.symbol-01-static{width:92%;height:92%;object-fit:contain}
.demo-symbol.is-win-01 img.symbol-01-static{animation:symbol01Win 1.5s linear both;transform-origin:50% 50%;filter:brightness(1.12) drop-shadow(0 0 18px rgba(130,255,80,.48))}
@keyframes symbol01Win{
  0%{transform:scale(1)}
  11.11%{transform:scale(.9)}
  22.22%{transform:scale(1.1)}
  66.67%{transform:scale(.917)}
  100%{transform:scale(1)}
}
@media(max-width:760px){
  .demo-controls{grid-template-columns:1fr repeat(4,auto);width:calc(100vw - 10px);padding:5px;gap:5px}
  .demo-custom-toggle{font-size:0}.demo-custom-toggle::after{content:'SET';font-size:.62rem}
  .demo-custom-panel{bottom:78px;padding:10px}.demo-custom-grid{gap:4px}.demo-custom-grid select{padding:7px 3px;font-size:.58rem}
}

/* v71 — crisp reels, precise paylines, polished in-canvas controls and deeper soft landing */
.demo-reels.is-spinning .demo-symbol img{
  animation:none!important;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important;
}
.demo-symbol img{
  width:76%!important;
  height:76%!important;
  max-width:76%!important;
  max-height:76%!important;
  object-fit:contain;
  object-position:50% 50%;
  transform-origin:50% 50%;
}
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-00-static{width:78%!important;height:78%!important;max-width:78%!important;max-height:78%!important}
.demo-symbol.is-win-01 img.symbol-01-static{
  animation:symbol01Win 1.5s linear both;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important;
}
.demo-symbol.is-winning img{filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important}
.demo-win-flash{display:none!important}
.demo-paylines{position:absolute;z-index:9;inset:0;pointer-events:none}
.demo-payline{
  position:absolute;left:1.2%;right:1.2%;top:var(--payline-y);height:0;
  display:flex;align-items:center;opacity:0;transform:translateY(-50%) scaleX(.82);
  transition:opacity .16s ease,transform .22s ease;
  background:none;box-shadow:none;
}
.demo-payline span{height:3px;flex:1;border-radius:99px;background:linear-gradient(90deg,#ffd76b,#fff5b8,#ffd76b);box-shadow:0 0 5px rgba(255,215,107,.5)}
.demo-payline i{display:block;width:9px;height:9px;border:2px solid #fff5b8;border-radius:50%;background:#b87316;box-shadow:0 0 4px rgba(255,215,107,.5)}
.demo-payline.is-active{opacity:1;transform:translateY(-50%) scaleX(1);animation:paylinePulse .55s ease 2 alternate}
@keyframes paylinePulse{to{opacity:.72}}
.demo-controls{
  position:absolute!important;z-index:24!important;left:50%!important;bottom:1.6%!important;
  transform:translateX(-50%)!important;width:72%!important;max-width:none!important;
  display:grid!important;grid-template-columns:minmax(120px,1fr) repeat(4,auto)!important;
  align-items:center!important;gap:clamp(6px,.7vw,12px)!important;margin:0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;
}
.demo-credit{padding:6px 10px;border-left:2px solid rgba(239,182,72,.8)}
.demo-credit small{color:rgba(255,236,195,.72);font-size:clamp(.52rem,.65vw,.7rem);letter-spacing:.16em}
.demo-credit strong{font-size:clamp(.92rem,1.25vw,1.28rem);color:#fff4d4;text-shadow:0 2px 5px #000}
.demo-secondary,.demo-spin{
  min-width:clamp(82px,8.3vw,132px);height:clamp(38px,4vw,56px);padding:0 clamp(10px,1.2vw,18px)!important;
  border:1px solid rgba(244,195,100,.76)!important;border-radius:12px!important;
  background:linear-gradient(180deg,rgba(28,18,10,.18),rgba(8,5,3,.32))!important;
  color:#fff5d4!important;font-size:clamp(.62rem,.78vw,.86rem)!important;font-weight:850!important;
  letter-spacing:.035em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 4px 10px rgba(0,0,0,.25)!important;
  text-shadow:0 2px 4px #000!important;backdrop-filter:none!important;
}
.demo-secondary:hover,.demo-spin:hover{border-color:#ffe3a2!important;background:rgba(88,51,20,.34)!important;transform:translateY(-1px)}
.demo-spin{min-width:clamp(68px,6vw,94px)!important;border-color:#ff986e!important;color:#fff!important;background:linear-gradient(180deg,rgba(239,92,57,.72),rgba(132,45,26,.72))!important}
.demo-spin:disabled{opacity:.56;transform:none}
.demo-custom-panel{
  left:50%;bottom:8.5%;width:min(680px,64%);border-color:rgba(244,195,100,.5);
  background:#0d0b09;box-shadow:0 18px 45px rgba(0,0,0,.62)
}
.slot-demo-exit{top:2.2%;right:2.2%;width:clamp(38px,3.2vw,50px);height:clamp(38px,3.2vw,50px);border-color:rgba(244,195,100,.7);color:#fff4d4;background:rgba(8,5,3,.46)}
@media(max-width:760px){
  .demo-symbol img{width:72%!important;height:72%!important;max-width:72%!important;max-height:72%!important}
  .demo-controls{width:92%!important;bottom:1%!important;grid-template-columns:minmax(70px,1fr) repeat(4,auto)!important;gap:4px!important}
  .demo-credit{padding:3px 5px}.demo-credit small{display:none}.demo-credit strong{font-size:.72rem}
  .demo-secondary,.demo-spin{min-width:0!important;height:34px!important;padding:0 7px!important;border-radius:8px!important;font-size:.54rem!important}
  .demo-custom-panel{bottom:8%;width:90%}
}

/* v72 — exact reel stops, softer landing, corrected control hierarchy */
.demo-controls{
  left:4%!important;
  right:4%!important;
  width:auto!important;
  grid-template-columns:minmax(150px,1fr) auto auto auto auto!important;
}
.demo-credit{justify-self:start;margin-left:0!important;padding-left:0!important;border-left:0!important}
.demo-credit strong{font-size:clamp(1rem,1.55vw,1.55rem)!important}
.demo-controls [data-demo-auto]{order:1}
.demo-controls [data-demo-win]{order:2}
.demo-controls [data-demo-custom]{order:3}
.demo-controls [data-demo-spin]{order:4;justify-self:end}
.demo-credit{order:0}
.demo-spin{min-width:clamp(82px,7.2vw,112px)!important}
.demo-reel-track{transition:none!important}
.demo-symbol img{transform:none}
@media(max-width:760px){
  .demo-controls{left:2%!important;right:2%!important;grid-template-columns:minmax(64px,1fr) repeat(4,auto)!important}
}

/* v73 — design-scale symbols, contained two-level UI and Spine static/win states for 00/01 */
.demo-symbol img{
  width:96%!important;
  height:96%!important;
  max-width:96%!important;
  max-height:96%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}
.demo-symbol.is-win-01 img.symbol-01-static{
  animation:symbolSpineWin 1.5s linear both!important;
  transform-origin:50% 50%;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important;
}
@keyframes symbolSpineWin{
  0%{transform:scale(1)}
  11.11%{transform:scale(.9)}
  22.22%{transform:scale(1.1)}
  66.67%{transform:scale(.917)}
  100%{transform:scale(1)}
}

/* Keep the controls fully inside the illustrated cabinet. */
.demo-controls{
  left:5.7%!important;
  right:5.7%!important;
  bottom:2.3%!important;
  width:auto!important;
  display:grid!important;
  grid-template-columns:minmax(145px,1fr) auto auto auto!important;
  grid-template-rows:auto auto!important;
  grid-template-areas:
    "credit auto win custom"
    "credit . . spin"!important;
  align-items:end!important;
  justify-items:end!important;
  row-gap:7px!important;
  column-gap:8px!important;
  pointer-events:none;
}
.demo-controls>*{pointer-events:auto}
.demo-credit{
  grid-area:credit!important;
  justify-self:start!important;
  align-self:end!important;
  padding:0!important;
  margin:0!important;
}
.demo-controls [data-demo-auto]{grid-area:auto!important;order:initial!important}
.demo-controls [data-demo-win]{grid-area:win!important;order:initial!important}
.demo-controls [data-demo-custom]{grid-area:custom!important;order:initial!important}
.demo-controls [data-demo-spin]{
  grid-area:spin!important;
  order:initial!important;
  justify-self:end!important;
  min-width:clamp(104px,8vw,136px)!important;
}
.demo-secondary,.demo-spin{
  height:clamp(34px,3.2vw,46px)!important;
  min-width:clamp(96px,8.4vw,142px)!important;
  padding:0 clamp(10px,1.05vw,16px)!important;
  border-radius:10px!important;
  font-size:clamp(.58rem,.72vw,.82rem)!important;
}
.demo-spin{
  height:clamp(40px,3.8vw,54px)!important;
  background:linear-gradient(180deg,rgba(239,92,57,.84),rgba(121,35,20,.88))!important;
}
.demo-custom-panel{bottom:12%!important}

/* Win line sits on the exact visual row center and does not glow over symbols. */
.demo-payline span{height:2px!important;box-shadow:none!important}
.demo-payline i{box-shadow:none!important}
.demo-symbol.is-winning img{filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important}

@media(max-width:760px){
  .demo-symbol img{width:92%!important;height:92%!important;max-width:92%!important;max-height:92%!important}
  .demo-symbol img.symbol-00-static,.demo-symbol img.symbol-01-static{width:98%!important;height:98%!important;max-width:98%!important;max-height:98%!important}
  .demo-controls{
    left:3%!important;right:3%!important;bottom:1.5%!important;
    grid-template-columns:minmax(58px,1fr) auto auto auto!important;
    row-gap:4px!important;column-gap:4px!important;
  }
  .demo-secondary,.demo-spin{min-width:0!important;height:30px!important;padding:0 6px!important;font-size:.48rem!important}
  .demo-spin{height:34px!important;min-width:70px!important}
  .demo-custom-panel{bottom:10%!important}
}

/* v74 — compact vertical controls and deterministic reel landing */
.demo-controls{
  left:auto!important;
  right:4.8%!important;
  bottom:3.2%!important;
  width:auto!important;
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:repeat(4,auto)!important;
  grid-template-areas:
    "credit auto"
    "credit win"
    "credit custom"
    "credit spin"!important;
  align-items:end!important;
  justify-items:stretch!important;
  gap:6px 12px!important;
}
.demo-credit{grid-area:credit!important;align-self:end!important;min-width:150px!important}
.demo-controls [data-demo-auto]{grid-area:auto!important}
.demo-controls [data-demo-win]{grid-area:win!important}
.demo-controls [data-demo-custom]{grid-area:custom!important}
.demo-controls [data-demo-spin]{grid-area:spin!important}
.demo-secondary,.demo-spin{
  width:clamp(108px,8.5vw,138px)!important;
  min-width:clamp(108px,8.5vw,138px)!important;
  height:clamp(38px,3.35vw,50px)!important;
  border-radius:11px!important;
  padding:0 12px!important;
  font-size:clamp(.58rem,.72vw,.82rem)!important;
}
.demo-spin{height:clamp(38px,3.35vw,50px)!important}
.demo-reel-track{transition:none!important}
.demo-reels.is-spinning .demo-symbol img{filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))!important}
@media(max-width:760px){
  .demo-controls{right:2.5%!important;bottom:2%!important;gap:3px 6px!important}
  .demo-credit{min-width:82px!important}
  .demo-secondary,.demo-spin{width:74px!important;min-width:74px!important;height:28px!important;font-size:.46rem!important;padding:0 4px!important}
}

/* v75 — keep demo credit at the original left position; stack actions at right. */
.demo-controls{
  left:5.7%!important;
  right:5.7%!important;
  bottom:3.2%!important;
  width:auto!important;
  min-height:calc(4 * clamp(38px,3.35vw,50px) + 18px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:6px!important;
}
.demo-credit{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  min-width:0!important;
  align-self:auto!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-spin]{
  grid-area:auto!important;
  order:initial!important;
  flex:0 0 auto!important;
}
@media(max-width:760px){
  .demo-controls{left:3%!important;right:3%!important;bottom:2%!important;gap:3px!important;min-height:121px!important}
  .demo-credit{left:0!important;bottom:0!important}
}

/* v78 — resolution-anchored reel mask, integrated landing, clearer controls. */
.demo-reels{
  position:absolute!important;
  margin:0!important;
}
.demo-credit small,
.demo-credit strong,
.demo-secondary,
.demo-spin{
  text-shadow:0 2px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.72)!important;
}
.demo-secondary:disabled,
.demo-spin:disabled,
.demo-custom-grid select:disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}

/* v79 — continuous prebuilt reel strips; no symbol swapping during stop/land. */
.demo-reel-track{
  display:grid!important;
  inset:0 0 auto!important;
  transition:none!important;
  will-change:transform!important;
}
.demo-reels.is-spinning .demo-symbol img{
  animation:none!important;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))!important;
}
\n\n/* v80 — responsive cabinet anchoring; preserves v79 reel motion exactly. */
.demo-cabinet{
  position:relative!important;
  width:min(100vw,calc(100dvh * 1.775862))!important;
  height:min(100dvh,calc(100vw / 1.775862))!important;
  max-width:100vw!important;
  max-height:100dvh!important;
  aspect-ratio:1648/928!important;
  background-size:100% 100%!important;
  background-position:center!important;
  overflow:hidden!important;
}
.demo-reels{
  left:18.35%!important;
  top:26.8%!important;
  width:63.35%!important;
  height:64.95%!important;
}
.demo-controls{
  position:absolute!important;
  left:5.7%!important;
  right:5.7%!important;
  bottom:2.2%!important;
  max-height:43%!important;
  box-sizing:border-box!important;
}
.demo-credit{left:0!important;bottom:0!important}
.demo-secondary[data-demo-auto]{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;line-height:1.05!important}
.demo-secondary[data-demo-auto] small{display:block;font-size:.56em;letter-spacing:.12em;margin-top:3px;color:rgba(255,239,198,.82);text-shadow:0 2px 3px rgba(0,0,0,.95)}
.demo-secondary[data-demo-auto].is-active{border-color:#69e4a8!important;background:rgba(24,105,72,.42)!important;color:#effff7!important}
@media(max-aspect-ratio:4/5){
  .demo-controls{left:4%!important;right:4%!important;bottom:2%!important;gap:3px!important}
  .demo-credit small{font-size:clamp(.42rem,1.6vw,.6rem)!important}
  .demo-credit strong{font-size:clamp(.78rem,3.2vw,1.2rem)!important}
  .demo-secondary,.demo-spin{width:clamp(70px,18vw,112px)!important;min-width:clamp(70px,18vw,112px)!important;height:clamp(28px,7vw,42px)!important;font-size:clamp(.44rem,1.55vw,.68rem)!important}
}

/* v81 — one responsive 1648×928 coordinate space for cabinet, reels and UI.
   Reel spin/landing keyframes and timing are intentionally untouched. */
.slot-demo-game{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#05070b!important;
}
.demo-cabinet{
  position:relative!important;
  flex:none!important;
  margin:0!important;
  width:min(100vw,calc(100dvh * 1.775862))!important;
  height:auto!important;
  aspect-ratio:1648 / 928!important;
  max-width:100vw!important;
  max-height:100dvh!important;
  background-size:100% 100%!important;
  background-position:50% 50%!important;
  background-repeat:no-repeat!important;
  overflow:hidden!important;
}
.demo-reels{
  position:absolute!important;
  left:18.35%!important;
  top:26.8%!important;
  width:63.35%!important;
  height:64.95%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  overflow:hidden!important;
}
.demo-reel{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.demo-reel-track{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  margin:0!important;
}
.demo-symbol{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
}
.demo-controls{
  position:absolute!important;
  z-index:12!important;
  left:5.7%!important;
  right:5.7%!important;
  bottom:2.2%!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  pointer-events:none!important;
}
.demo-controls>*{pointer-events:auto!important}
.demo-credit{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
}
.slot-demo-exit{
  position:absolute!important;
  z-index:30!important;
  top:max(12px,env(safe-area-inset-top))!important;
  right:max(12px,env(safe-area-inset-right))!important;
}
@media (orientation:portrait){
  .demo-cabinet{
    width:100vw!important;
    height:auto!important;
    max-height:none!important;
  }
  .demo-controls{
    left:3.8%!important;
    right:3.8%!important;
    bottom:1.8%!important;
    min-height:clamp(82px,25vw,150px)!important;
    gap:clamp(2px,.7vw,5px)!important;
  }
  .demo-credit small{font-size:clamp(.38rem,1.35vw,.58rem)!important}
  .demo-credit strong{font-size:clamp(.72rem,3vw,1.2rem)!important}
  .demo-secondary,.demo-spin{
    width:clamp(64px,16.5vw,108px)!important;
    min-width:clamp(64px,16.5vw,108px)!important;
    height:clamp(25px,6.6vw,42px)!important;
    min-height:0!important;
    padding:0 clamp(3px,1vw,8px)!important;
    font-size:clamp(.4rem,1.42vw,.67rem)!important;
  }
}
@media (orientation:landscape) and (max-height:620px){
  .demo-controls{
    left:4.8%!important;
    right:4.8%!important;
    bottom:1.5%!important;
    gap:3px!important;
  }
  .demo-secondary,.demo-spin{
    width:clamp(68px,7.8vw,105px)!important;
    min-width:clamp(68px,7.8vw,105px)!important;
    height:clamp(25px,4.8vh,39px)!important;
    font-size:clamp(.42rem,1.05vw,.66rem)!important;
  }
}

/* v82 — compact right-side controls and clearer spin action. Reel motion is untouched. */
.demo-controls{
  left:3.2%!important;
  right:3.2%!important;
  bottom:2.1%!important;
  min-height:calc(4 * clamp(38px,3.35vw,50px) + 18px)!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:5px!important;
}
.demo-credit{
  left:0!important;
  bottom:0!important;
  margin:0!important;
  padding:4px 0!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-spin]{
  width:clamp(108px,10.7vw,158px)!important;
  min-width:clamp(108px,10.7vw,158px)!important;
  height:clamp(38px,3.35vw,50px)!important;
  min-height:clamp(38px,3.35vw,50px)!important;
  padding:0 10px!important;
  border-radius:15px!important;
  box-sizing:border-box!important;
  flex:none!important;
}
.demo-spin{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42em!important;
  border-radius:15px!important;
}
.demo-spin::before,
.demo-spin::after{
  display:inline-block;
  color:#fff5d2;
  font-size:1.08em;
  line-height:1;
  text-shadow:0 2px 3px rgba(0,0,0,.95),0 0 8px rgba(255,190,72,.42);
  opacity:.95;
}
.demo-spin::before{content:"↻";animation:demoSpinArrowA 1.65s ease-in-out infinite}
.demo-spin::after{content:"↺";animation:demoSpinArrowB 1.65s ease-in-out infinite}
@keyframes demoSpinArrowA{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(28deg) translateY(-1px)}}
@keyframes demoSpinArrowB{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(-28deg) translateY(1px)}}
.demo-spin:disabled::before,.demo-spin:disabled::after{animation-play-state:paused;opacity:.45}
.slot-demo-exit{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  font-family:Arial,sans-serif!important;
  font-size:0!important;
}
.slot-demo-exit::before{
  content:"×";
  display:block;
  width:100%;
  line-height:1;
  font-size:clamp(2rem,2.6vw,2.9rem);
  font-weight:300;
  transform:translateY(-2%);
}
@media (orientation:portrait){
  .demo-controls{left:2.4%!important;right:2.4%!important;bottom:1.8%!important;gap:3px!important}
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-spin]{
    width:clamp(66px,17.5vw,108px)!important;
    min-width:clamp(66px,17.5vw,108px)!important;
    height:clamp(26px,6.7vw,42px)!important;
    min-height:clamp(26px,6.7vw,42px)!important;
    border-radius:10px!important;
    padding:0 4px!important;
  }
  .demo-spin{gap:.2em!important}
  .demo-spin::before,.demo-spin::after{font-size:.9em}
}


/* v83 — add Spine symbols 02/03; restore compact controls; remove spin arrows; light close icon. */
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;
}
.demo-symbol.is-win-01 img.symbol-01-static,
.demo-symbol.is-win-02 img.symbol-02-static,
.demo-symbol.is-win-03 img.symbol-03-static{
  animation:symbolSpineWin 1.5s linear both!important;
  transform-origin:50% 50%;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-spin]{
  width:clamp(82px,8.3vw,132px)!important;
  min-width:clamp(82px,8.3vw,132px)!important;
  height:clamp(38px,4vw,56px)!important;
  min-height:clamp(38px,4vw,56px)!important;
  padding:0 clamp(10px,1.2vw,18px)!important;
  border-radius:12px!important;
}
.demo-spin::before,.demo-spin::after{content:none!important;display:none!important;animation:none!important}
.demo-spin{gap:0!important}
.slot-demo-exit{
  display:grid!important;place-items:center!important;
  font-size:clamp(1.35rem,1.8vw,1.8rem)!important;
  font-weight:400!important;
  line-height:1!important;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
.slot-demo-exit::before{content:none!important;display:none!important}
@media (orientation:portrait){
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-spin]{
    width:clamp(64px,15vw,96px)!important;
    min-width:clamp(64px,15vw,96px)!important;
    height:clamp(25px,6vw,38px)!important;
    min-height:clamp(25px,6vw,38px)!important;
    border-radius:9px!important;
    padding:0 5px!important;
  }
}

/* v85 — normalize 02/03 atlas artwork and prevent accidental browser selection/dragging in the demo. */
.slot-demo-modal,
.slot-demo-dialog,
.slot-demo-game,
.demo-cabinet,
.demo-reels,
.demo-reel,
.demo-reel-track,
.demo-symbol,
.demo-controls,
.demo-credit,
.demo-legal{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
.demo-symbol img,
.demo-cabinet img{
  -webkit-user-drag:none!important;
  user-drag:none!important;
  pointer-events:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* v88 — normalized 240×230 symbol cells, clean spin, busy cursor and unclipped low-pay artwork. */
.demo-reels{
  --demo-cell-ratio:240 / 230;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
.demo-reel{min-width:0!important;overflow:hidden!important}
.demo-symbol{
  min-width:0!important;
  overflow:visible!important;
}
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
}
/* No blur during normal or turbo spin. */
.demo-reels.is-spinning .demo-symbol img{
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))!important;
}
.slot-demo-modal.is-busy,
.slot-demo-modal.is-busy .demo-cabinet,
.slot-demo-modal.is-busy .demo-reels,
.slot-demo-modal.is-busy .demo-symbol,
.slot-demo-modal.is-busy button,
body.slot-demo-spinning{
  cursor:progress!important;
}
.slot-demo-modal.is-busy button:disabled{cursor:progress!important}

/* v89 — hero launch reveal, true wait cursor, debug grid, no spin blur. */
.slot-hero-preview::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(2,5,9,.26);opacity:0;transition:opacity .65s ease;
}
.slot-hero-preview.is-prototype-ready::after{opacity:1}
.slot-prototype-launch{z-index:4!important;opacity:0;transform:translate(-50%,-42%) scale(.92)!important;filter:blur(8px)}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  animation:prototypeLaunchReveal .85s cubic-bezier(.18,.82,.22,1) .18s both;
}
@keyframes prototypeLaunchReveal{
  0%{opacity:0;transform:translate(-50%,-38%) scale(.88);filter:blur(10px)}
  65%{opacity:1;transform:translate(-50%,-53%) scale(1.025);filter:blur(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
.slot-demo-modal.is-busy,
.slot-demo-modal.is-busy *,
body.slot-demo-spinning,
body.slot-demo-spinning *{cursor:wait!important}
.demo-reels.is-spinning .demo-symbol img{filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))!important}
.demo-grid-debug.is-active{border-color:#73ff9b!important;color:#baffc9!important;box-shadow:inset 0 0 18px rgba(60,255,120,.12)!important}
.demo-reels::after{
  content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(to right, transparent calc(20% - 1px), rgba(0,255,255,.9) calc(20% - 1px), rgba(0,255,255,.9) 20%, transparent 20%),
    linear-gradient(to bottom, transparent calc(33.3333% - 1px), rgba(255,64,220,.9) calc(33.3333% - 1px), rgba(255,64,220,.9) 33.3333%, transparent 33.3333%);
  background-size:20% 100%,100% 33.3333%;
  box-shadow:inset 0 0 0 2px rgba(255,235,70,.95);
  transition:opacity .2s ease;
}
.slot-demo-modal.show-debug-grid .demo-reels::after{opacity:1}
.slot-demo-modal.show-debug-grid .demo-symbol::after{
  content:attr(data-symbol);position:absolute;left:4px;top:3px;z-index:10;
  font:600 9px/1 monospace;color:#fff;background:rgba(0,0,0,.62);padding:2px 3px;border-radius:3px;pointer-events:none;
}
@media(max-width:760px){.demo-grid-debug{font-size:.58rem!important}}


/* v90 — keep the proven reel mask/motion; restore win transforms; useful Spine placement debug; clean hero pop. */
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  transform-origin:50% 50%!important;
}
.demo-symbol.is-win-01 img.symbol-01-static,
.demo-symbol.is-win-02 img.symbol-02-static,
.demo-symbol.is-win-03 img.symbol-03-static{
  animation:symbolSpineWin 1.5s linear both!important;
}
/* Debug mode shows the actual 240x230 nesting cells and the renderer box,
   not a decorative full-reel grid. */
.demo-reels::after{display:none!important}
.slot-demo-modal.show-debug-grid .demo-symbol{
  outline:2px solid rgba(54,220,255,.95)!important;
  outline-offset:-2px;
  background:
    linear-gradient(rgba(255,68,210,.78),rgba(255,68,210,.78)) 50% 0/1px 100% no-repeat,
    linear-gradient(90deg,rgba(255,68,210,.78),rgba(255,68,210,.78)) 0 50%/100% 1px no-repeat!important;
}
.slot-demo-modal.show-debug-grid .demo-symbol img{
  outline:1px dashed rgba(255,225,75,.95)!important;
  outline-offset:-1px;
}
.slot-demo-modal.show-debug-grid .demo-symbol::after{
  content:attr(data-debug)!important;
  left:5px!important;top:5px!important;
  max-width:calc(100% - 10px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:700 10px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  color:#071017!important;background:rgba(172,247,255,.92)!important;
  border:1px solid rgba(255,255,255,.8);padding:3px 5px!important;border-radius:4px!important;
}
.slot-prototype-launch{
  filter:none!important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.78)!important;
}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  animation:prototypeLaunchPop .62s cubic-bezier(.16,1.18,.28,1) .12s both!important;
}
@keyframes prototypeLaunchPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  68%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* v91 — preserve the verified reel grid; remove idle symbol transforms and restore compact in-cabinet UI. */
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none;
  margin:0!important;
  padding:0!important;
}
.demo-symbol.is-win-01 img.symbol-01-static,
.demo-symbol.is-win-02 img.symbol-02-static,
.demo-symbol.is-win-03 img.symbol-03-static{
  animation:symbolSpineWin 1.5s linear both!important;
  transform-origin:50% 50%!important;
}

.demo-controls{
  left:3.2%!important;
  right:3.2%!important;
  bottom:2.1%!important;
  width:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:repeat(5,clamp(38px,4vw,56px))!important;
  column-gap:clamp(10px,1.2vw,18px)!important;
  row-gap:5px!important;
  align-items:center!important;
  justify-items:stretch!important;
  pointer-events:none!important;
}
.demo-controls>*{pointer-events:auto!important}
.demo-credit{
  position:static!important;
  grid-column:1!important;
  grid-row:1 / -1!important;
  align-self:end!important;
  justify-self:start!important;
  margin:0!important;
  padding:0 0 2px 0!important;
  transform:none!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  grid-column:2!important;
  justify-self:end!important;
  width:clamp(82px,8.3vw,132px)!important;
  min-width:clamp(82px,8.3vw,132px)!important;
  height:clamp(38px,4vw,56px)!important;
  min-height:clamp(38px,4vw,56px)!important;
  margin:0!important;
  transform:none!important;
}
.demo-controls [data-demo-auto]{grid-row:1!important}
.demo-controls [data-demo-spin]{grid-row:2!important}
.demo-controls [data-demo-win]{grid-row:3!important}
.demo-controls [data-demo-custom]{grid-row:4!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{grid-row:5!important}

@media (orientation:portrait){
  .demo-controls{
    left:2.4%!important;
    right:2.4%!important;
    bottom:1.8%!important;
    grid-template-rows:repeat(5,clamp(25px,6vw,38px))!important;
    row-gap:3px!important;
  }
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
    width:clamp(64px,15vw,96px)!important;
    min-width:clamp(64px,15vw,96px)!important;
    height:clamp(25px,6vw,38px)!important;
    min-height:clamp(25px,6vw,38px)!important;
  }
}

/* v84 — final HUD alignment: balance left, action stack right, centered close glyph. */
.slot-demo-exit{
  position:absolute!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
}
.slot-demo-exit::before{
  content:"×"!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:auto!important;
  height:auto!important;
  color:#fff4d4!important;
  font:400 clamp(1.45rem,1.8vw,1.9rem)/1 Arial,sans-serif!important;
  transform:translate(-50%,-53%)!important;
  margin:0!important;
  padding:0!important;
}
.demo-controls{
  left:5.7%!important;
  right:5.7%!important;
  bottom:3.2%!important;
  width:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:repeat(5,clamp(38px,4vw,56px))!important;
  column-gap:clamp(16px,2vw,30px)!important;
  row-gap:5px!important;
  align-items:center!important;
  pointer-events:none!important;
}
.demo-controls>*{pointer-events:auto!important}
.demo-credit{
  position:static!important;
  grid-column:1!important;
  grid-row:1 / -1!important;
  justify-self:start!important;
  align-self:end!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  grid-column:2!important;
  justify-self:end!important;
  margin:0!important;
}
.demo-controls [data-demo-auto]{grid-row:1!important}
.demo-controls [data-demo-spin]{grid-row:2!important}
.demo-controls [data-demo-win]{grid-row:3!important}
.demo-controls [data-demo-custom]{grid-row:4!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{grid-row:5!important}
@media (orientation:portrait){
  .slot-demo-exit::before{font-size:1.45rem!important}
  .demo-controls{left:3%!important;right:3%!important;bottom:2%!important;grid-template-rows:repeat(5,clamp(25px,6vw,38px))!important;row-gap:3px!important}
}

/* v92 — viewport HUD: balance stays in the left gutter, action buttons stay in the right gutter. */
.slot-demo-exit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
}
.slot-demo-exit::before{
  content:"×"!important;
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0 0 .08em!important;
  color:#fff4d4!important;
  font:400 28px/1 Arial,sans-serif!important;
  transform:none!important;
}

.demo-controls{
  position:fixed!important;
  z-index:25!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  pointer-events:none!important;
}
.demo-credit{
  position:absolute!important;
  left:clamp(18px,2.2vw,44px)!important;
  bottom:clamp(18px,3vh,36px)!important;
  right:auto!important;
  top:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  margin:0!important;
  padding:10px 14px!important;
  transform:none!important;
  pointer-events:auto!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  position:absolute!important;
  right:clamp(18px,2.2vw,44px)!important;
  left:auto!important;
  width:clamp(116px,8.2vw,158px)!important;
  min-width:clamp(116px,8.2vw,158px)!important;
  height:clamp(42px,4.1vw,58px)!important;
  min-height:clamp(42px,4.1vw,58px)!important;
  margin:0!important;
  transform:none!important;
  pointer-events:auto!important;
}
.demo-controls [data-demo-auto]{bottom:calc(clamp(18px,3vh,36px) + 4 * (clamp(42px,4.1vw,58px) + 7px))!important}
.demo-controls [data-demo-spin]{bottom:calc(clamp(18px,3vh,36px) + 3 * (clamp(42px,4.1vw,58px) + 7px))!important}
.demo-controls [data-demo-win]{bottom:calc(clamp(18px,3vh,36px) + 2 * (clamp(42px,4.1vw,58px) + 7px))!important}
.demo-controls [data-demo-custom]{bottom:calc(clamp(18px,3vh,36px) + 1 * (clamp(42px,4.1vw,58px) + 7px))!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{bottom:clamp(18px,3vh,36px)!important}

/* When there are no side gutters, keep the HUD at the screen edges without covering the reel centre. */
@media (max-aspect-ratio: 16/9){
  .demo-credit{left:12px!important;bottom:12px!important;padding:7px 9px!important}
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
    right:12px!important;
    width:clamp(82px,15vw,116px)!important;
    min-width:clamp(82px,15vw,116px)!important;
    height:clamp(30px,6vw,42px)!important;
    min-height:clamp(30px,6vw,42px)!important;
  }
  .demo-controls [data-demo-auto]{bottom:calc(12px + 4 * (clamp(30px,6vw,42px) + 4px))!important}
  .demo-controls [data-demo-spin]{bottom:calc(12px + 3 * (clamp(30px,6vw,42px) + 4px))!important}
  .demo-controls [data-demo-win]{bottom:calc(12px + 2 * (clamp(30px,6vw,42px) + 4px))!important}
  .demo-controls [data-demo-custom]{bottom:calc(12px + 1 * (clamp(30px,6vw,42px) + 4px))!important}
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{bottom:12px!important}
}


/* v93 — HUD belongs to the 1648×928 slot canvas, never to the browser viewport. */
.demo-controls{
  position:absolute!important;
  z-index:25!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  pointer-events:none!important;
}
.demo-credit{
  position:absolute!important;
  left:3.8%!important;
  top:31%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  pointer-events:auto!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  position:absolute!important;
  right:2.8%!important;
  left:auto!important;
  width:12.8%!important;
  min-width:0!important;
  height:8.2%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 .6em!important;
  transform:none!important;
  pointer-events:auto!important;
}
.demo-controls [data-demo-auto]{top:25%!important;bottom:auto!important}
.demo-controls [data-demo-spin]{top:34.3%!important;bottom:auto!important}
.demo-controls [data-demo-win]{top:43.6%!important;bottom:auto!important}
.demo-controls [data-demo-custom]{top:52.9%!important;bottom:auto!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:62.2%!important;bottom:auto!important}
.slot-demo-exit{
  top:max(10px,calc((100dvh - min(100dvh,56.3063vw))/2 + 10px))!important;
  right:max(10px,calc((100vw - min(100vw,177.5862dvh))/2 + 10px))!important;
}
@media (orientation:portrait){
  .demo-credit{left:3%!important;top:28%!important}
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{right:2.3%!important;width:15%!important;height:7.2%!important;font-size:clamp(.4rem,1.4vw,.62rem)!important}
  .demo-controls [data-demo-auto]{top:27%!important}
  .demo-controls [data-demo-spin]{top:35%!important}
  .demo-controls [data-demo-win]{top:43%!important}
  .demo-controls [data-demo-custom]{top:51%!important}
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:59%!important}
}

/* v94 — pull the HUD toward the cabinet centre, sell the launcher, and expose the real reel mask in debug. */
.demo-credit{
  left:6.2%!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  right:5.6%!important;
}

/* The exported Spine preview PNGs now use exactly the same nested renderer box as every other symbol. */
.demo-symbol img.symbol-00-static,
.demo-symbol img.symbol-01-static,
.demo-symbol img.symbol-02-static,
.demo-symbol img.symbol-03-static{
  width:88%!important;
  height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:0!important;
  padding:0!important;
  transform:none;
}

/* Debug: show both each 240×230 symbol cell and the clipping/mask rectangle used by the reels. */
.demo-reels::before{
  content:"REEL MASK / CLIP";
  position:absolute;
  z-index:12;
  inset:0;
  display:none;
  box-sizing:border-box;
  padding:5px 7px;
  pointer-events:none;
  border:3px solid rgba(255,235,65,.98);
  background:rgba(255,225,40,.045);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 28px rgba(255,220,35,.12);
  color:#161000;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  font:900 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.slot-demo-modal.show-debug-grid .demo-reels::before{display:block}
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-00-static,
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-01-static,
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-02-static,
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-03-static{
  outline-color:rgba(120,255,105,.98)!important;
}

/* A deliberate 0.85 → 1.10 → 1.00 entrance, followed by a restrained living pulse. */
.slot-hero-preview.is-prototype-ready .prototype-play-btn{
  transform-origin:50% 50%;
  animation:
    prototypeButtonSell .82s cubic-bezier(.18,.88,.2,1.18) .34s both,
    prototypeButtonBreathe 3.2s ease-in-out 1.28s infinite;
  will-change:transform,box-shadow,filter;
}
@keyframes prototypeButtonSell{
  0%{transform:scale(.85);filter:brightness(.9);box-shadow:0 12px 32px rgba(0,0,0,.34),0 0 0 rgba(255,91,52,0)}
  68%{transform:scale(1.10);filter:brightness(1.12);box-shadow:0 26px 66px rgba(0,0,0,.48),0 0 46px rgba(255,91,52,.5)}
  100%{transform:scale(1);filter:brightness(1);box-shadow:0 18px 48px rgba(0,0,0,.38),0 0 30px rgba(255,91,52,.22)}
}
@keyframes prototypeButtonBreathe{
  0%,72%,100%{transform:scale(1);filter:brightness(1)}
  82%{transform:scale(1.025);filter:brightness(1.08)}
  91%{transform:scale(.995);filter:brightness(1.02)}
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:hover{
  animation-play-state:paused;
  transform:translateY(-3px) scale(1.025);
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:active{
  animation-play-state:paused;
  transform:translateY(0) scale(.97);
}
@media (prefers-reduced-motion:reduce){
  .slot-hero-preview.is-prototype-ready .prototype-play-btn{animation:none!important}
}

@media (orientation:portrait){
  .demo-credit{left:5.2%!important}
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{right:4.8%!important}
}


/* v95 — cleaner prototype CTA reveal; no blur, no endless bounce. */
.slot-prototype-launch{
  filter:none!important;
  opacity:0;
  transform:translate(-50%,-46%)!important;
}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  animation:prototypeLaunchClean .48s cubic-bezier(.2,.8,.2,1) .08s both!important;
}
@keyframes prototypeLaunchClean{
  from{opacity:0;transform:translate(-50%,-46%)}
  to{opacity:1;transform:translate(-50%,-50%)}
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn{
  position:relative;
  overflow:hidden;
  animation:prototypeButtonClean .52s cubic-bezier(.2,.9,.25,1) .16s both!important;
  will-change:transform,box-shadow;
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -35%;
  width:22%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);
  animation:prototypeButtonSweep .72s ease-out .48s both;
}
@keyframes prototypeButtonClean{
  0%{transform:translateY(8px) scale(.97);opacity:0;box-shadow:0 10px 28px rgba(0,0,0,.3)}
  100%{transform:translateY(0) scale(1);opacity:1;box-shadow:0 18px 48px rgba(0,0,0,.38),0 0 30px rgba(255,91,52,.22)}
}
@keyframes prototypeButtonSweep{
  from{left:-35%}
  to{left:125%}
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:hover{
  animation:none!important;
  transform:translateY(-2px) scale(1.01)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.44),0 0 34px rgba(255,91,52,.3)!important;
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:active{
  animation:none!important;
  transform:translateY(0) scale(.985)!important;
}
@media (prefers-reduced-motion:reduce){
  .slot-hero-preview.is-prototype-ready .slot-prototype-launch,
  .slot-hero-preview.is-prototype-ready .prototype-play-btn,
  .slot-hero-preview.is-prototype-ready .prototype-play-btn::after{animation:none!important;opacity:1}
}

/* v96 — one-shot prototype CTA entrance. No shine, blur, or hover reset. */
.slot-prototype-launch{
  filter:none!important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.94)!important;
}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  animation:prototypeLaunchV96 .56s cubic-bezier(.2,.85,.25,1) .1s both!important;
}
@keyframes prototypeLaunchV96{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1.025)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn{
  animation:none!important;
  opacity:1!important;
  position:relative;
  overflow:hidden;
  transform:translateY(0) scale(1)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
  will-change:auto;
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn::after{content:none!important;display:none!important;animation:none!important}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:hover{
  animation:none!important;
  transform:translateY(-2px) scale(1.012)!important;
  border-color:rgba(255,255,255,.48)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.44),0 0 30px rgba(255,91,52,.26)!important;
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:active{
  transform:translateY(0) scale(.988)!important;
  transition-duration:.08s!important;
}
.slot-hero-preview.is-prototype-ready .prototype-play-icon{
  transition:transform .2s ease!important;
}
.slot-hero-preview.is-prototype-ready .prototype-play-btn:hover .prototype-play-icon{
  transform:translateX(2px) scale(1.04);
}
@media (prefers-reduced-motion:reduce){
  .slot-hero-preview.is-prototype-ready .slot-prototype-launch{animation:none!important;opacity:1;transform:translate(-50%,-50%) scale(1)!important}
}


/* v97 — Spine symbol 08 and synchronized 90/45-frame win timing. */
.demo-symbol{position:relative!important}
.demo-symbol img.symbol-08-static,
.demo-symbol img.symbol-08-glow{
  position:absolute!important;
  inset:6%!important;
  width:88%!important;
  height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:0!important;
  transform-origin:50% 50%!important;
}
.demo-symbol img.symbol-08-glow{
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none!important;
}
.demo-symbol.is-win-high{z-index:2}
.demo-symbol.is-win-low{z-index:2}
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-08-static,
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-08-glow{
  outline:1px dashed rgba(255,225,75,.95)!important;
}


/* v98 — Spine symbols fill the complete reel cell; exported motion only. */
.demo-symbol img.symbol-08-static,
.demo-symbol img.symbol-08-glow{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none!important;
}
.demo-symbol.is-win-high img.symbol-08-static{
  animation:none!important;
  transform:none!important;
}

/* v99 — updated symbol 08 export; custom result persists in localStorage. */

/* v102 — HUD placement matched to the supplied 1648×928 reference. X stays untouched. */
.demo-credit{
  left:2.1%!important;
  top:3.3%!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  right:.55%!important;
  width:14%!important;
  height:4.25%!important;
}
.demo-controls [data-demo-auto]{top:41.9%!important}
.demo-controls [data-demo-spin]{top:46.35%!important}
.demo-controls [data-demo-win]{top:50.8%!important}
.demo-controls [data-demo-custom]{top:55.25%!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:59.7%!important}

@media (orientation:portrait){
  .demo-credit{left:2.1%!important;top:3.3%!important}
}

/* v103 — HUD moved into the exact white target zones from the supplied reference. X untouched. */
.demo-credit{
  left:5.05%!important;
  top:12.4%!important;
  right:auto!important;
  bottom:auto!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  right:4.3%!important;
  width:14%!important;
  height:4.15%!important;
  min-width:0!important;
  min-height:0!important;
}
.demo-controls [data-demo-auto]{top:10.0%!important}
.demo-controls [data-demo-spin]{top:14.55%!important}
.demo-controls [data-demo-win]{top:19.10%!important}
.demo-controls [data-demo-custom]{top:23.65%!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:28.20%!important}
@media (orientation:portrait){
  .demo-credit{left:5.05%!important;top:12.4%!important}
}

/* v104 — symbol 09 Spine replacement + final HUD placement. X untouched. */
.demo-symbol img.symbol-09-static,
.demo-symbol img.symbol-09-glow{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:0!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}
.demo-symbol img.symbol-09-glow{
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none!important;
}
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-09-static,
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-09-glow{
  outline:1px dashed rgba(255,225,75,.95)!important;
}
.demo-symbol.is-win-high img.symbol-09-static{
  animation:none!important;
  transform:none!important;
}
.demo-credit{
  left:2.1%!important;
  top:2.2%!important;
  right:auto!important;
  bottom:auto!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  right:1.25%!important;
  width:14.5%!important;
  height:6.4%!important;
  min-width:150px!important;
  min-height:44px!important;
  font-size:clamp(.72rem,1.15vw,1.05rem)!important;
}
.demo-controls [data-demo-auto]{top:33.0%!important}
.demo-controls [data-demo-spin]{top:40.2%!important}
.demo-controls [data-demo-win]{top:47.4%!important}
.demo-controls [data-demo-custom]{top:54.6%!important}
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:61.8%!important}
@media (orientation:portrait){
  .demo-credit{left:2.1%!important;top:2.2%!important}
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{min-width:0!important;min-height:36px!important}
}

/* v105 — desktop HUD pinned to viewport: credit aligned with close button, controls centered and touch-friendly. */
@media (min-width: 900px) and (orientation: landscape){
  .demo-credit{
    position:fixed!important;
    z-index:40!important;
    left:24px!important;
    top:20px!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    min-width:0!important;
    pointer-events:auto!important;
  }
  .demo-credit small{
    font-size:clamp(.9rem,1.15vw,1.2rem)!important;
    line-height:1.1!important;
    letter-spacing:.14em!important;
  }
  .demo-credit strong{
    font-size:clamp(2rem,2.55vw,2.7rem)!important;
    line-height:1.05!important;
  }
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
    position:fixed!important;
    z-index:40!important;
    right:20px!important;
    left:auto!important;
    width:260px!important;
    min-width:260px!important;
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:0 18px!important;
    transform:none!important;
    border-radius:15px!important;
    font-size:20px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    pointer-events:auto!important;
  }
  .demo-controls [data-demo-auto]{top:calc(50vh - 158px)!important;bottom:auto!important}
  .demo-controls [data-demo-spin]{top:calc(50vh - 94px)!important;bottom:auto!important}
  .demo-controls [data-demo-win]{top:calc(50vh - 30px)!important;bottom:auto!important}
  .demo-controls [data-demo-custom]{top:calc(50vh + 34px)!important;bottom:auto!important}
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:calc(50vh + 98px)!important;bottom:auto!important}
}

/* v106 — HUD is anchored to the illustrated slot canvas, not the viewport.
   Both high-pay Spine exports use one identical full-cell renderer surface. */
@media (min-width:900px) and (orientation:landscape){
  .demo-controls{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:25!important;
    pointer-events:none!important;
  }
  .demo-credit{
    position:absolute!important;
    left:1.55%!important;
    top:2.15%!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  .demo-credit small{
    font-size:clamp(.72rem,1.15vw,1.12rem)!important;
    line-height:1.08!important;
    letter-spacing:.14em!important;
  }
  .demo-credit strong{
    font-size:clamp(1.65rem,2.55vw,2.65rem)!important;
    line-height:1.02!important;
  }
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
    position:absolute!important;
    right:1.35%!important;
    left:auto!important;
    width:16.5%!important;
    min-width:0!important;
    max-width:none!important;
    height:7.2%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 .7em!important;
    transform:none!important;
    border-radius:14px!important;
    font-size:clamp(.72rem,1.35vw,1.12rem)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    pointer-events:auto!important;
  }
  .demo-controls [data-demo-auto]{top:30.4%!important;bottom:auto!important}
  .demo-controls [data-demo-spin]{top:38.3%!important;bottom:auto!important}
  .demo-controls [data-demo-win]{top:46.2%!important;bottom:auto!important}
  .demo-controls [data-demo-custom]{top:54.1%!important;bottom:auto!important}
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:62.0%!important;bottom:auto!important}
}
.demo-symbol img.symbol-08-static,
.demo-symbol img.symbol-08-glow,
.demo-symbol img.symbol-09-static,
.demo-symbol img.symbol-09-glow{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:fill!important;
  object-position:50% 50%!important;
  transform:none!important;
}


/* v107 — dim non-winning symbols during win presentation. */
.demo-symbol{transition:opacity .2s ease,filter .2s ease}
.demo-symbol.is-win-dimmed{opacity:.58;filter:brightness(.72) saturate(.78)}
.demo-symbol.is-winning{opacity:1;filter:none}

/* v107 — punchier prototype launcher hover */
.prototype-play-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease,border-color .28s ease,filter .28s ease;
}
.prototype-play-btn::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-35% -20%;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.36) 47%,rgba(255,255,255,.08) 55%,transparent 70%);
  transform:translateX(-115%) skewX(-12deg);
  transition:transform .62s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}
.prototype-play-btn::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 120%,rgba(255,215,120,.42),transparent 48%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.prototype-play-btn:hover{
  transform:translateY(-5px) scale(1.025);
  border-color:rgba(255,236,200,.72);
  filter:saturate(1.18) brightness(1.08);
  box-shadow:0 28px 62px rgba(0,0,0,.5),0 0 0 1px rgba(255,190,125,.28),0 0 48px rgba(255,91,52,.54);
}
.prototype-play-btn:hover::before{transform:translateX(115%) skewX(-12deg)}
.prototype-play-btn:hover::after{opacity:1}
.prototype-play-btn:hover .prototype-play-icon{
  transform:scale(1.13) rotate(-4deg);
  color:#df3d22;
  box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 7px rgba(255,255,255,.14),0 0 24px rgba(255,244,210,.5);
}
.prototype-play-btn:active{
  transform:translateY(-1px) scale(.985);
  transition-duration:.08s;
}
.prototype-play-icon{
  flex:0 0 auto;
  transition:transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .3s ease,color .3s ease;
}
@media (prefers-reduced-motion:reduce){
  .prototype-play-btn,.prototype-play-btn::before,.prototype-play-btn::after,.prototype-play-icon{transition:none}
}

/* v108 — calmer prototype launcher hover: no sweep, no flash, subtle lift only. */
.prototype-play-btn::before,
.prototype-play-btn::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  transition:none!important;
  animation:none!important;
}
.prototype-play-btn{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease!important;
}
.prototype-play-btn:hover{
  transform:translateY(-2px) scale(1.006)!important;
  border-color:rgba(255,255,255,.48)!important;
  filter:brightness(1.025)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.4),0 0 18px rgba(255,91,52,.18)!important;
}
.prototype-play-btn:hover .prototype-play-icon{
  transform:translateX(1px) scale(1.025)!important;
  color:inherit!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22)!important;
}
.prototype-play-btn:active{
  transform:translateY(0) scale(.992)!important;
}

/* v109 — keep the play triangle visible on hover. */
.prototype-play-btn:hover .prototype-play-icon,
.prototype-play-btn:focus-visible .prototype-play-icon{
  color:#f05a3a!important;
}

/* v110 — Spine symbol 04 (rum bottle). */
.demo-symbol img.symbol-04-static{
  width:88%!important;
  height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:0!important;
  padding:0!important;
  transform:none;
}
.demo-symbol.is-win-04 img.symbol-04-static{
  animation:symbolSpineWin 1.5s linear both!important;
  transform-origin:50% 50%;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.48))!important;
}
.slot-demo-modal.show-debug-grid .demo-symbol img.symbol-04-static{
  outline-color:rgba(120,255,105,.98)!important;
}

/* v111 — symbol 04 artwork is alpha-bounds centered in its 1024×1024 source canvas.
   CSS remains centered at 50%/50%; positioning no longer depends on transparent padding. */


/* v112 — every Spine-backed symbol owns the complete 240×230 renderer cell.
   The green debug contour represents the renderer viewport, not the visible alpha pixels. */
.demo-symbol.is-spine-symbol{
  position:relative!important;
}
.slot-demo-modal.show-debug-grid .demo-symbol.is-spine-symbol img{
  outline:none!important;
}
.slot-demo-modal.show-debug-grid .demo-symbol.is-spine-symbol::before{
  content:"";
  position:absolute;
  z-index:9;
  inset:0;
  box-sizing:border-box;
  border:2px dashed rgba(120,255,105,.98);
  pointer-events:none;
}

/* v113 — debug labels: reel-mask caption above the frame; compact, fully readable cell metadata. */
.slot-demo-modal.show-debug-grid .demo-reels::before{
  display:none!important;
}
.slot-demo-modal.show-debug-grid .demo-reels{
  outline:3px solid rgba(255,235,65,.98)!important;
  outline-offset:-3px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 0 28px rgba(255,220,35,.12)!important;
}
.demo-cabinet::before{
  content:"";
  display:none;
}
.slot-demo-modal.show-debug-grid .demo-cabinet::before{
  content:"REEL MASK / CLIP";
  display:block;
  position:absolute;
  z-index:30;
  left:18.35%;
  top:calc(26.8% - 16px);
  width:max-content;
  max-width:63.35%;
  pointer-events:none;
  color:#ffeb41;
  background:rgba(8,7,2,.88);
  border:1px solid rgba(255,235,65,.82);
  border-radius:3px 3px 0 0;
  padding:2px 5px 3px;
  font:900 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.02em;
  text-shadow:0 1px 2px #000,0 0 5px rgba(255,235,65,.45);
  box-sizing:border-box;
}
.slot-demo-modal.show-debug-grid .demo-symbol::after{
  left:3px!important;
  top:3px!important;
  right:3px!important;
  width:auto!important;
  max-width:none!important;
  max-height:30px!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font:700 7px/1.05 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:-.02em!important;
  padding:2px 3px!important;
}

/* v114 — compact HUD typography with taller action buttons. */
.demo-credit small{
  font-size:clamp(.58rem,.82vw,.82rem)!important;
  line-height:1.05!important;
  letter-spacing:.10em!important;
}
.demo-credit strong{
  font-size:clamp(1.15rem,1.72vw,1.8rem)!important;
  line-height:1!important;
}
.demo-controls [data-demo-auto],
.demo-controls [data-demo-spin],
.demo-controls [data-demo-win],
.demo-controls [data-demo-custom],
.demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
  height:8.1%!important;
  font-size:clamp(.62rem,.92vw,.88rem)!important;
  line-height:1!important;
  padding-inline:.65em!important;
}
@media (min-width:900px) and (orientation:landscape){
  .demo-credit small{
    font-size:clamp(.58rem,.82vw,.82rem)!important;
  }
  .demo-credit strong{
    font-size:clamp(1.15rem,1.72vw,1.8rem)!important;
  }
  .demo-controls [data-demo-auto],
  .demo-controls [data-demo-spin],
  .demo-controls [data-demo-win],
  .demo-controls [data-demo-custom],
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{
    height:8.1%!important;
    font-size:clamp(.62rem,.92vw,.88rem)!important;
    border-radius:15px!important;
  }
  .demo-controls [data-demo-auto]{top:27.8%!important}
  .demo-controls [data-demo-spin]{top:36.8%!important}
  .demo-controls [data-demo-win]{top:45.8%!important}
  .demo-controls [data-demo-custom]{top:54.8%!important}
  .demo-controls [data-demo-grid-debug],
.demo-controls [data-demo-runtime-metrics]{top:63.8%!important}
}


/* v115 — landscape controls use a true vertical stack, centered on the right. */
@media (min-width:900px) and (orientation:landscape){
  .demo-action-stack{
    position:absolute!important;
    z-index:40!important;
    right:1.35%!important;
    top:50%!important;
    width:16.5%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:clamp(8px,1.25vh,16px)!important;
    transform:translateY(-50%)!important;
    pointer-events:none!important;
  }
  .demo-action-stack [data-demo-auto],
  .demo-action-stack [data-demo-spin],
  .demo-action-stack [data-demo-win],
  .demo-action-stack [data-demo-custom],
  .demo-action-stack [data-demo-grid-debug],
.demo-action-stack [data-demo-runtime-metrics]{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    min-width:0!important;
    height:clamp(48px,7.2vh,72px)!important;
    min-height:48px!important;
    margin:0!important;
    flex:0 0 auto!important;
    transform:none!important;
    pointer-events:auto!important;
  }
}

/* v116 — controls start from the lower-right corner; grid performance HUD. */
.demo-action-stack{
  position:absolute!important;
  z-index:40!important;
  right:1.7%!important;
  bottom:3.2%!important;
  top:auto!important;
  left:auto!important;
  width:17.5%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:clamp(7px,1.05vh,13px)!important;
  transform:none!important;
  pointer-events:none!important;
}
.demo-action-stack [data-demo-auto],
.demo-action-stack [data-demo-spin],
.demo-action-stack [data-demo-win],
.demo-action-stack [data-demo-custom],
.demo-action-stack [data-demo-grid-debug],
.demo-action-stack [data-demo-runtime-metrics]{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  height:clamp(44px,6.6vh,64px)!important;
  min-height:44px!important;
  margin:0!important;
  flex:0 0 auto!important;
  transform:none!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}
.demo-debug-stats{
  display:none;
  position:absolute;
  z-index:55;
  right:1.7%;
  bottom:calc(3.2% + min(36vh, 350px) + 12px);
  min-width:132px;
  padding:6px 8px;
  border:1px solid rgba(255,235,65,.9);
  border-radius:5px;
  background:rgba(4,7,10,.88);
  color:#ffeb41;
  font:800 clamp(8px,.68vw,11px)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.02em;
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.slot-demo-modal.show-runtime-metrics .demo-debug-stats{display:flex;flex-direction:column;gap:2px}
.demo-debug-stats span{display:flex;justify-content:space-between;gap:14px}
.demo-debug-stats b{color:#9dff83;font:inherit}

@media (min-width:900px) and (orientation:landscape){
  .demo-action-stack{
    right:1.7%!important;
    bottom:3.2%!important;
    top:auto!important;
    width:17.5%!important;
    justify-content:flex-end!important;
    transform:none!important;
  }
}
@media (max-height:620px) and (orientation:landscape){
  .demo-action-stack{gap:5px!important;bottom:2.2%!important;width:16.8%!important}
  .demo-action-stack [data-demo-auto],
  .demo-action-stack [data-demo-spin],
  .demo-action-stack [data-demo-win],
  .demo-action-stack [data-demo-custom],
  .demo-action-stack [data-demo-grid-debug],
.demo-action-stack [data-demo-runtime-metrics]{height:clamp(36px,6.2vh,44px)!important;min-height:36px!important}
  .demo-debug-stats{bottom:auto;top:2.5%;right:20%}
}

/* v117 — narrower right-side action stack (20% reduction). */
.demo-action-stack{
  width:14%!important;
}
@media (min-width:900px) and (orientation:landscape){
  .demo-action-stack{width:14%!important;}
}
@media (max-height:620px) and (orientation:landscape){
  .demo-action-stack{width:13.44%!important;}
}


/* v118 — result menu toggles from its button; controls centered on the right. */
.demo-action-stack{
  top:50%!important;
  bottom:auto!important;
  right:1.7%!important;
  transform:translateY(-50%)!important;
  justify-content:center!important;
}
@media (min-width:900px) and (orientation:landscape){
  .demo-action-stack{
    top:50%!important;
    bottom:auto!important;
    right:1.7%!important;
    transform:translateY(-50%)!important;
    justify-content:center!important;
  }
}
@media (max-height:620px) and (orientation:landscape){
  .demo-action-stack{
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
  }
}


/* v119 — professional live diagnostics shown with GRID debug. */
.demo-debug-stats{
  right:1.25%!important;
  top:2.2%!important;
  bottom:auto!important;
  width:min(310px,23vw)!important;
  min-width:240px!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,225,64,.82)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(6,10,15,.96),rgba(3,6,9,.92))!important;
  box-shadow:0 8px 28px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  font:700 clamp(8px,.58vw,10px)/1.25 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.025em!important;
}
.slot-demo-modal.show-runtime-metrics .demo-debug-stats{display:block!important}
.demo-debug-stats__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid rgba(255,225,64,.28)}
.demo-debug-stats__head strong{color:#ffe140;font-size:1.08em;letter-spacing:.08em}
.demo-debug-stats__head small{color:rgba(255,255,255,.48);font-size:.78em;white-space:nowrap}
.demo-debug-stats__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:0}
.demo-debug-stats__grid span{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.demo-debug-stats__grid i{color:rgba(255,255,255,.62);font-style:normal;white-space:nowrap}
.demo-debug-stats__grid b{color:#a8ff91;font:inherit;white-space:nowrap;text-align:right}
.demo-debug-stats__grid b[data-status="warn"]{color:#ff9b63}
.demo-debug-stats__grid b[data-status="good"]{color:#a8ff91}
.demo-debug-stats__note{margin-top:7px;color:rgba(255,255,255,.42);font-size:.76em;line-height:1.35}
@media (max-width:1050px), (max-height:650px){
  .demo-debug-stats{width:min(270px,25vw)!important;min-width:210px!important;padding:7px 8px!important;font-size:7.5px!important}
  .demo-debug-stats__grid{column-gap:9px}
  .demo-debug-stats__note{display:none}
}
@media (orientation:portrait){
  .demo-debug-stats{right:2%!important;top:1.5%!important;width:min(290px,46vw)!important;min-width:205px!important}
}

/* v120 — dock runtime diagnostics in the lower safe area so reels and controls stay clear. */
@media (min-width: 900px) and (orientation: landscape){
  .demo-debug-stats{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(980px,60vw)!important;
    min-width:620px!important;
    max-width:calc(100vw - 38%)!important;
    padding:7px 10px!important;
    border-radius:8px!important;
    font-size:clamp(7px,.52vw,9px)!important;
  }
  .demo-debug-stats__head{
    align-items:center!important;
    padding-bottom:4px!important;
    margin-bottom:3px!important;
  }
  .demo-debug-stats__grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    column-gap:12px!important;
  }
  .demo-debug-stats__grid span{
    padding:1px 0!important;
    gap:5px!important;
  }
  .demo-debug-stats__note{display:none!important}
}

@media (min-width: 900px) and (orientation: landscape) and (max-height: 680px){
  .demo-debug-stats{
    width:min(920px,58vw)!important;
    min-width:560px!important;
    padding:5px 8px!important;
    font-size:7px!important;
  }
  .demo-debug-stats__head small{display:none!important}
  .demo-debug-stats__grid{column-gap:8px!important}
}


/* v121 — runtime metrics are independent from GRID. */
.demo-action-stack [data-demo-runtime-metrics]{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  height:clamp(40px,5.8vh,56px)!important;
  min-height:40px!important;
  margin:0!important;
  flex:0 0 auto!important;
  transform:none!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}
.demo-action-stack [data-demo-runtime-metrics].is-active{
  border-color:#ffe140!important;
  color:#ffe96a!important;
  box-shadow:0 0 0 2px rgba(255,225,64,.18),0 0 18px rgba(255,225,64,.16)!important;
}

/* v122 — visual 5×3 custom-result picker with live static symbol previews. */
.demo-custom-panel{
  width:min(760px,72%)!important;
  padding:clamp(10px,1.25vw,16px)!important;
}
.demo-custom-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(5px,.65vw,9px)!important;
}
.demo-custom-cell{
  min-width:0;
  display:grid;
  grid-template-rows:minmax(38px,clamp(44px,5.4vw,70px)) auto;
  gap:5px;
  padding:5px;
  border:1px solid rgba(244,195,100,.22);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,214,132,.07),rgba(255,255,255,.018));
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.demo-custom-cell:focus-within{
  border-color:rgba(255,213,122,.78);
  background:linear-gradient(180deg,rgba(255,191,87,.14),rgba(255,255,255,.025));
  transform:translateY(-1px);
}
.demo-custom-thumb{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  object-fit:contain;
  border-radius:7px;
  background:radial-gradient(circle,rgba(87,51,24,.48),rgba(8,7,7,.2) 72%);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));
}
.demo-custom-cell select{
  min-width:0!important;
  width:100%!important;
  height:28px;
  padding:0 5px!important;
  border-color:rgba(255,255,255,.18)!important;
  border-radius:7px!important;
  font-size:clamp(.52rem,.65vw,.68rem)!important;
  text-overflow:ellipsis;
}
@media(max-width:760px), (max-height:620px){
  .demo-custom-panel{width:92%!important;padding:8px!important}
  .demo-custom-head{margin-bottom:7px!important}
  .demo-custom-grid{gap:4px!important}
  .demo-custom-cell{grid-template-rows:minmax(30px,7vh) 24px;gap:3px;padding:3px;border-radius:7px}
  .demo-custom-cell select{height:24px;padding:0 2px!important;font-size:.5rem!important}
  .demo-custom-actions{margin-top:7px!important}
}

/* v123 — keep the result editor inside the viewport at every zoom/height. */
.demo-custom-panel{
  top:50%!important;
  bottom:auto!important;
  max-height:calc(100dvh - 16px)!important;
  box-sizing:border-box!important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translate(-50%,calc(-50% + 18px))!important;
}
.demo-custom-panel.is-open{
  transform:translate(-50%,-50%)!important;
}
.demo-custom-grid{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  grid-template-rows:repeat(3,minmax(70px,1fr));
  scrollbar-width:thin;
  scrollbar-color:rgba(244,195,100,.65) rgba(255,255,255,.05);
}
.demo-custom-cell{
  grid-template-rows:minmax(30px,clamp(34px,7dvh,60px)) 28px;
}
.demo-custom-head,.demo-custom-actions{flex:0 0 auto}
.slot-demo-modal.is-busy [data-demo-auto]{
  cursor:pointer!important;
  pointer-events:auto!important;
}
.slot-demo-modal.is-busy [data-demo-spin]{
  cursor:pointer!important;
  pointer-events:auto!important;
}
.demo-spin.is-stop{
  border-color:#ffd0bd!important;
  background:linear-gradient(180deg,rgba(255,76,55,.96),rgba(139,24,19,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 22px rgba(255,67,44,.42)!important;
}

/* v124 — preserve the large gallery design and scale the whole panel to fit. */
.demo-custom-panel{
  --custom-result-scale:1;
  max-height:none!important;
  overflow:visible!important;
  transition:opacity .18s ease!important;
  transform-origin:50% 50%!important;
  transform:translate(-50%,calc(-50% + 18px)) scale(var(--custom-result-scale))!important;
}
.demo-custom-panel.is-open{
  transform:translate(-50%,-50%) scale(var(--custom-result-scale))!important;
}
.demo-custom-grid{
  overflow:visible!important;
  scrollbar-width:auto;
}
@media(max-width:760px), (max-height:620px){
  .demo-custom-grid{grid-template-rows:repeat(3,minmax(57px,1fr))}
  .demo-custom-cell{grid-template-rows:minmax(25px,6dvh) 24px}
}

/* v125 — full-viewport result gallery with large previews and no overlap. */
.demo-custom-panel{
  position:fixed!important;
  z-index:120!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:min(1600px,calc(100vw - 24px))!important;
  height:min(1080px,calc(100dvh - 24px))!important;
  max-width:none!important;
  max-height:none!important;
  padding:clamp(10px,1.2vw,18px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:clamp(8px,1.1vh,13px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:#0a0908!important;
  transform:translate(-50%,calc(-50% + 18px))!important;
  transform-origin:center!important;
}
.demo-custom-panel.is-open{
  transform:translate(-50%,-50%)!important;
}
.demo-custom-head{margin:0!important;min-height:clamp(34px,5vh,52px)}
.demo-custom-grid{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:clamp(5px,.8vw,10px)!important;
  overflow:hidden!important;
}
.demo-custom-cell{
  min-width:0!important;
  min-height:0!important;
  grid-template-rows:minmax(0,1fr) clamp(30px,4.7vh,48px)!important;
  gap:clamp(3px,.55vh,6px)!important;
  padding:clamp(3px,.45vw,7px)!important;
}
.demo-custom-thumb{min-height:0!important}
.demo-custom-cell select{
  height:clamp(30px,4.7vh,48px)!important;
  font-size:clamp(.58rem,.82vw,.82rem)!important;
}
.demo-custom-actions{margin:0!important;min-height:clamp(38px,5.5vh,58px)}
.is-custom-result-open .demo-action-stack,
.is-custom-result-open .demo-credit,
.is-custom-result-open .slot-demo-exit{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
@media(max-width:760px), (max-height:620px){
  .demo-custom-panel{width:calc(100vw - 8px)!important;height:calc(100dvh - 8px)!important;padding:7px!important;gap:5px!important}
  .demo-custom-head{min-height:30px}
  .demo-custom-grid{gap:3px!important}
  .demo-custom-cell{grid-template-rows:minmax(0,1fr) 25px!important;padding:2px!important;gap:2px!important}
  .demo-custom-cell select{height:25px!important;font-size:.5rem!important}
  .demo-custom-actions{min-height:34px}
}

/* v126 — result editor is exactly the size and position of the reel mask. */
.demo-custom-panel{
  position:absolute!important;
  z-index:120!important;
  left:18.35%!important;
  right:auto!important;
  top:26.8%!important;
  bottom:auto!important;
  width:63.35%!important;
  height:64.95%!important;
  max-width:none!important;
  max-height:none!important;
  padding:clamp(6px,.7vw,11px)!important;
  gap:clamp(4px,.65vh,8px)!important;
  border-radius:clamp(8px,1vw,16px)!important;
  transform:translateY(10px)!important;
  transform-origin:center!important;
}
.demo-custom-panel.is-open{transform:translateY(0)!important}
.demo-custom-head{min-height:clamp(26px,3.8vh,40px)!important}
.demo-custom-head strong{font-size:clamp(.68rem,1.05vw,1rem)!important}
.demo-custom-head button{width:clamp(26px,2.4vw,36px)!important;height:clamp(26px,2.4vw,36px)!important}
.demo-custom-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  gap:clamp(3px,.45vw,7px)!important;
}
.demo-custom-cell{
  grid-template-rows:minmax(0,1fr) clamp(24px,3.8vh,36px)!important;
  padding:clamp(2px,.3vw,5px)!important;
  gap:2px!important;
  border-radius:clamp(5px,.65vw,10px)!important;
}
.demo-custom-cell select{
  height:clamp(24px,3.8vh,36px)!important;
  padding:0 clamp(2px,.35vw,5px)!important;
  font-size:clamp(.45rem,.62vw,.7rem)!important;
}
.demo-custom-actions{min-height:clamp(30px,4.5vh,44px)!important;gap:clamp(5px,.6vw,10px)!important}
.demo-custom-actions .demo-secondary,
.demo-custom-actions .demo-spin{height:clamp(30px,4.5vh,44px)!important;min-height:30px!important;padding:0 clamp(10px,1.2vw,20px)!important}
.is-custom-result-open .demo-action-stack,
.is-custom-result-open .demo-credit,
.is-custom-result-open .slot-demo-exit{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* v127 — calm alpha-led entrance for the browser prototype launcher. */
.slot-prototype-launch{
  opacity:0;
  filter:none!important;
  transform:translate(-50%,-50%) scale(.985)!important;
}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  animation:prototypeLaunchAlphaV127 1.1s cubic-bezier(.22,.61,.36,1) .16s both!important;
}
@keyframes prototypeLaunchAlphaV127{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.985)}
  35%{opacity:.22;transform:translate(-50%,-50%) scale(.99)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .slot-hero-preview.is-prototype-ready .slot-prototype-launch{
    animation:none!important;
    opacity:1!important;
    transform:translate(-50%,-50%) scale(1)!important;
  }
}

/* v128 — uninterrupted fade; no midpoint keyframe or perceived pause. */
.slot-prototype-launch{
  opacity:0!important;
  animation:none!important;
  transform:translate(-50%,-50%) scale(.985)!important;
  transition:opacity .525s linear,transform .525s cubic-bezier(.22,.61,.36,1)!important;
  will-change:opacity,transform;
}
.slot-hero-preview.is-prototype-ready .slot-prototype-launch{
  opacity:1!important;
  animation:none!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
@media(prefers-reduced-motion:reduce){
  .slot-prototype-launch{transition:none!important}
}
@media (max-height:680px) and (orientation:landscape){
  .demo-action-stack{gap:clamp(4px,.65vh,7px)!important}
  .demo-action-stack [data-demo-auto],
  .demo-action-stack [data-demo-spin],
  .demo-action-stack [data-demo-win],
  .demo-action-stack [data-demo-custom],
  .demo-action-stack [data-demo-grid-debug],
  .demo-action-stack [data-demo-runtime-metrics]{height:clamp(34px,5.5vh,42px)!important;min-height:34px!important}
}

/* v137 — image-first Custom Result editor, strength ordering and unclipped card strokes. */
.demo-custom-panel{
  overflow:hidden!important;
}
.demo-custom-cell{
  position:relative;
  display:block!important;
  grid-template-rows:minmax(0,1fr)!important;
  width:100%;
  height:100%;
  min-width:0!important;
  min-height:0!important;
  padding:clamp(3px,.35vw,6px)!important;
  border:1px solid rgba(244,195,100,.2)!important;
  border-radius:clamp(6px,.7vw,11px)!important;
  background:radial-gradient(circle,rgba(87,51,24,.4),rgba(8,7,7,.3) 72%)!important;
  color:#fff;
  cursor:pointer;
  appearance:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.demo-custom-cell:hover,
.demo-custom-cell:focus-visible{
  border-color:rgba(255,216,130,.78)!important;
  background:radial-gradient(circle,rgba(133,76,29,.5),rgba(8,7,7,.34) 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,230,166,.12),0 6px 18px rgba(0,0,0,.28)!important;
  outline:none;
  transform:none;
}
.demo-custom-thumb{
  display:block;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:contain!important;
  border-radius:inherit;
  background:transparent!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.48))!important;
  pointer-events:none;
}
.demo-custom-cell:disabled,
.demo-symbol-picker__option:disabled{opacity:.48!important;pointer-events:none!important}
.demo-symbol-picker{
  position:absolute;
  z-index:20;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:clamp(6px,.75vh,10px);
  padding:clamp(8px,.8vw,13px);
  box-sizing:border-box;
  border-radius:inherit;
  background:linear-gradient(180deg,#100d09,#080706 72%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.demo-symbol-picker.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .16s ease,transform .16s ease;
}
.demo-symbol-picker__head{
  position:relative;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2px 12px;
  min-height:clamp(34px,5vh,50px);
  padding-right:clamp(30px,3vw,42px);
}
.demo-symbol-picker__head strong{
  color:#fff0c6;
  font-size:clamp(.72rem,1.05vw,1rem);
  letter-spacing:.04em;
}
.demo-symbol-picker__head small{
  grid-column:1;
  color:rgba(255,239,203,.5);
  font-size:clamp(.48rem,.68vw,.68rem);
}
.demo-symbol-picker__head button{
  position:absolute;
  top:50%;
  right:0;
  width:clamp(27px,2.5vw,36px);
  height:clamp(27px,2.5vw,36px);
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
}
.demo-symbol-picker__grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(4px,.55vw,8px);
}
.demo-symbol-picker__option{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:2px;
  padding:clamp(3px,.4vw,6px);
  overflow:hidden;
  border:1px solid rgba(244,195,100,.18);
  border-radius:clamp(6px,.65vw,10px);
  background:radial-gradient(circle,rgba(92,53,24,.38),rgba(5,5,5,.32) 72%);
  color:rgba(255,240,207,.72);
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.demo-symbol-picker__option:hover,
.demo-symbol-picker__option:focus-visible,
.demo-symbol-picker__option.is-selected{
  border-color:rgba(255,211,116,.82);
  background:radial-gradient(circle,rgba(145,83,30,.5),rgba(7,6,5,.38) 72%);
  outline:none;
  transform:translateY(-1px);
}
.demo-symbol-picker__option.is-selected{box-shadow:inset 0 0 0 1px rgba(255,225,154,.18)}
.demo-symbol-picker__option img{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.5));
  pointer-events:none;
}
.demo-symbol-picker__option span{
  overflow:hidden;
  color:inherit;
  font-size:clamp(.42rem,.58vw,.62rem);
  line-height:1.15;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:760px), (max-height:620px){
  .demo-symbol-picker{padding:6px;gap:4px}
  .demo-symbol-picker__head{min-height:30px}
  .demo-symbol-picker__head small{display:none}
  .demo-symbol-picker__grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .demo-symbol-picker__option{padding:2px;border-radius:5px}
  .demo-symbol-picker__option span{font-size:.42rem}
}

/* v138 — mirror the balance HUD spacing against the close button. */
.demo-credit{
  left:max(10px,env(safe-area-inset-left))!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:auto!important;
  bottom:auto!important;
}

/* v142 — symbol 00 reel art is captured from the Spine `static` animation. */
.demo-spine-static-renderer{
  position:fixed;
  left:-10000px;
  top:-10000px;
  width:316px;
  height:317px;
  overflow:hidden;
  pointer-events:none;
  visibility:visible;
}
img[data-spine-static="00"]{opacity:0}
img[data-spine-static="00"].is-spine-static-ready{opacity:1}

/* v144 — symbol 00 win state is rendered live by Spine, not by the legacy scale tween. */
.demo-spine-symbol-player{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:min(100cqw,100cqh);
  height:min(100cqw,100cqh);
  transform:translate(-50%,-50%);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.demo-spine-symbol-player.is-ready{opacity:1}
.demo-spine-symbol-player .spine-player,
.demo-spine-symbol-player .spine-player-canvas{
  width:100%!important;
  height:100%!important;
}
.spine-shared-renderer .demo-shared-spine-symbol{
  display:block;
}
.spine-shared-renderer:has(.slot-demo-modal.is-loading) spine-overlay,
.spine-shared-renderer:has(.slot-demo-modal.is-custom-result-open) spine-overlay,
.spine-shared-renderer:not(:has(.slot-demo-modal.is-open)) spine-overlay{
  display:none!important;
}

/* v160 — one Spine WebGL surface for every reel symbol. The explicit stack
   keeps diagnostics above gameplay, the result editor above diagnostics, and
   the loader above the complete demo without relying on DOM insertion order. */
.demo-spine-canvas{
  position:absolute;
  z-index:6;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.spine-canvas-renderer .demo-spine-standby{display:block;width:100%;height:100%}
.spine-canvas-renderer .slot-demo-modal.show-debug-grid .demo-reel-track{z-index:7}
.spine-canvas-renderer .demo-paylines{z-index:20!important}
.spine-canvas-renderer .demo-debug-stats{z-index:200!important}
.spine-canvas-renderer .demo-custom-panel{z-index:300!important}
.spine-canvas-renderer .slot-demo-loader{z-index:1000!important}
.spine-canvas-renderer .slot-demo-modal.is-custom-result-open .demo-debug-stats{visibility:hidden!important}

/* v150 — keep the live Spine viewport square inside narrow reel cells.
   Wide glyphs such as K and A now fit instead of being cropped horizontally. */
.demo-symbol{container-type:size}
.demo-spine-placeholder{
  position:absolute;
  inset:8%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px dashed rgba(255,94,76,.82);
  border-radius:10px;
  color:#ffd7ca;
  background:rgba(34,8,6,.72);
  text-align:center;
  box-shadow:inset 0 0 18px rgba(255,57,35,.08);
}
.demo-spine-placeholder small{font-size:clamp(.42rem,.55vw,.58rem);font-weight:850;letter-spacing:.12em}
.demo-spine-placeholder strong{font-size:clamp(1rem,1.5vw,1.45rem);line-height:1;color:#ff705b}
.demo-spine-placeholder span{font-size:clamp(.42rem,.52vw,.56rem);opacity:.72}
.demo-spine-win-player{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.demo-spine-win-player.is-ready{opacity:1}
.demo-symbol.is-win-00>img.symbol-00-static{
  animation:none!important;
  transform:none!important;
}

/* v149 — missing Spine IDs and persistent custom-result playback. */
.demo-custom-cell.is-spine-missing .demo-custom-thumb,
.demo-symbol-picker__option.is-spine-missing img{display:none!important}
.demo-custom-cell.is-spine-missing::before,
.demo-symbol-picker__option.is-spine-missing::before{
  content:"ADD SPINE " attr(data-spine-id);
  display:grid;
  place-items:center;
  min-height:42px;
  padding:4px;
  border:1px dashed rgba(255,94,76,.8);
  border-radius:7px;
  color:#ff8b77;
  background:rgba(38,9,7,.78);
  font-size:clamp(.42rem,.55vw,.58rem);
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.15;
  text-align:center;
}
.demo-custom-repeat{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-right:auto;
  color:rgba(255,238,207,.88);
  font-size:clamp(.52rem,.66vw,.7rem);
  font-weight:750;
  cursor:pointer;
  user-select:none;
}
.demo-custom-repeat input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:#f06a45;
}
.demo-symbol.is-spine-win-live>img.symbol-00-static{
  opacity:0!important;
  animation:none!important;
  transform:none!important;
}

/* v160 HUD polish — cabinet-safe anchors and truly centred action labels. */
.demo-custom-actions [data-demo-custom-random]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-block:0!important;
  line-height:1!important;
  text-align:center!important;
}
.slot-demo-exit{
  position:absolute!important;
  z-index:500!important;
  left:auto!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  bottom:auto!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  transform:none!important;
}
.demo-credit{
  position:absolute!important;
  z-index:40!important;
  left:max(10px,env(safe-area-inset-left))!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  align-items:flex-start!important;
  transform:none!important;
}
.demo-credit small{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  white-space:nowrap!important;
  font-size:clamp(.52rem,.82vw,.82rem)!important;
  line-height:1.1!important;
}
.demo-credit strong{
  display:block!important;
  white-space:nowrap!important;
  line-height:1.05!important;
}
.slot-demo-exit::before{
  content:"×"!important;
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  color:#fff4d4!important;
  font:700 clamp(1.65rem,2.2vw,2.05rem)/1 Arial,sans-serif!important;
  transform:translateY(.1em)!important;
}

/* v161 — dedicated 941×1672 portrait cabinet, reel mask and bottom action dock. */
@media (orientation:portrait){
  .slot-demo-game{
    background:#03070a!important;
  }
  .demo-cabinet{
    width:min(100vw,56.2799dvh)!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    aspect-ratio:941 / 1672!important;
    background-image:url('/images/slots/pirate/demo-layout-portrait.png?v=20260714-portrait-v1')!important;
    background-size:100% 100%!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
  .demo-reels{
    left:1.1%!important;
    top:31.25%!important;
    width:97.8%!important;
    height:32.2%!important;
    box-shadow:inset 0 0 18px rgba(0,0,0,.22)!important;
  }
  .demo-controls{
    position:absolute!important;
    z-index:40!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    pointer-events:none!important;
  }
  .demo-action-stack{
    position:absolute!important;
    z-index:45!important;
    left:3.2%!important;
    right:3.2%!important;
    bottom:2.2%!important;
    top:auto!important;
    width:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:clamp(36px,7vw,54px)!important;
    gap:clamp(4px,1vw,8px)!important;
    transform:none!important;
    pointer-events:none!important;
  }
  .demo-action-stack [data-demo-auto],
  .demo-action-stack [data-demo-spin],
  .demo-action-stack [data-demo-win],
  .demo-action-stack [data-demo-custom],
  .demo-action-stack [data-demo-grid-debug],
  .demo-action-stack [data-demo-runtime-metrics]{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 .45em!important;
    border-radius:clamp(8px,1.8vw,13px)!important;
    font-size:clamp(.5rem,1.7vw,.82rem)!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  .demo-action-stack [data-demo-auto]{
    flex-direction:column!important;
  }
  .demo-credit{
    left:3.2%!important;
    top:1.5%!important;
    right:auto!important;
    bottom:auto!important;
    padding:clamp(5px,1.2vw,9px) clamp(7px,1.5vw,11px)!important;
    border:1px solid rgba(255,220,154,.32)!important;
    border-radius:10px!important;
    background:rgba(5,8,10,.66)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(5px)!important;
    pointer-events:auto!important;
  }
  .demo-credit small{font-size:clamp(.46rem,1.5vw,.68rem)!important}
  .demo-credit strong{font-size:clamp(.9rem,3.2vw,1.5rem)!important}
  .demo-custom-toggle::after{content:none!important;display:none!important}
  .demo-custom-panel{
    left:1.1%!important;
    top:31.25%!important;
    width:97.8%!important;
    height:32.2%!important;
    padding:clamp(4px,1vw,8px)!important;
    gap:clamp(3px,.7vw,6px)!important;
    border-radius:0!important;
  }
  .slot-demo-modal.show-debug-grid .demo-cabinet::before{
    left:1.1%!important;
    top:calc(31.25% - 16px)!important;
    max-width:97.8%!important;
  }
  .demo-debug-stats{
    left:3.2%!important;
    right:3.2%!important;
    bottom:16.5%!important;
    max-height:16%!important;
    min-width:0!important;
    overflow:hidden!important;
    font-size:clamp(6px,1.25vw,9px)!important;
  }
  .demo-legal{display:none!important}
}

/* v162 — native fullscreen with a full-viewport fallback and game-only touch lock. */
.slot-demo-modal.is-open,
.slot-demo-modal.is-open .slot-demo-dialog,
.slot-demo-modal.is-open .slot-demo-game,
.slot-demo-modal.is-open .demo-cabinet{
  touch-action:none!important;
  overscroll-behavior:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
.slot-demo-modal.is-open{
  overflow:hidden!important;
}
.slot-demo-modal.is-open .slot-demo-dialog,
.slot-demo-modal.is-open .slot-demo-game{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
}
@media (orientation:portrait){
  .slot-demo-modal.is-open .demo-cabinet{
    width:min(100%,56.2799dvh)!important;
  }
}
.slot-demo-modal:fullscreen,
.slot-demo-modal:-webkit-full-screen{
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#03070a!important;
}
.slot-demo-modal:fullscreen .slot-demo-dialog,
.slot-demo-modal:-webkit-full-screen .slot-demo-dialog{
  width:100vw!important;
  height:100dvh!important;
}

/* v163 — explicit native-fullscreen exit beside the demo close control. */
.slot-demo-fullscreen-exit{
  position:absolute!important;
  z-index:500!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:calc(max(10px,env(safe-area-inset-right)) + clamp(48px,4.4vw,62px))!important;
  width:clamp(38px,3.2vw,50px)!important;
  height:clamp(38px,3.2vw,50px)!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(244,195,100,.7)!important;
  border-radius:50%!important;
  color:#fff4d4!important;
  background:rgba(8,5,3,.46)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  cursor:pointer!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  transition:opacity .16s ease,background-color .16s ease!important;
}
.slot-demo-fullscreen-exit svg{
  width:55%!important;
  height:55%!important;
  display:block!important;
  fill:currentColor!important;
  pointer-events:none!important;
}
.slot-demo-modal.has-native-fullscreen .slot-demo-fullscreen-exit{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.slot-demo-fullscreen-exit:hover,
.slot-demo-fullscreen-exit:focus-visible{
  background:rgba(80,47,20,.68)!important;
  outline:2px solid rgba(255,229,173,.78)!important;
  outline-offset:2px!important;
}

/* v164 — one immutable 1648×928 coordinate space for every landscape viewport. */
html:has(.slot-demo-modal.is-open){overflow:hidden!important}
@media (orientation:landscape){
  .slot-demo-modal.is-open .slot-demo-game{
    display:grid!important;
    place-items:center!important;
    background:#03070a!important;
  }
  .slot-demo-modal.is-open .demo-cabinet{
    width:min(100vw,177.5862dvh)!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    aspect-ratio:1648 / 928!important;
    margin:auto!important;
    background-size:100% 100%!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    overflow:hidden!important;
  }
}