/* The approved poster remains the no-JS, failed-asset and reduced-motion fallback. */
.intro-sequence { position: relative; isolation: isolate; overflow: clip; }
.hero-layers { display: none; position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 -20% -70% -20%); }
.hero-layer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 55% 58%; }
.ribbon-back { z-index: 0; }
.subject-window { position: absolute; inset: 0; z-index: 1; overflow: clip; }
.hero-subject { z-index: 1; transform-origin: 100% 100%; }
.ribbon-front { z-index: 2; }
.hero-art .subject-image { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: none; }
.hero-art .subject-base { clip-path: polygon(
  2.56% 81.65%, 22.44% 77.57%, 29.91% 76.02%,
  37.39% 74.51%, 44.87% 73.11%, 52.35% 71.53%,
  59.83% 69.90%, 65.45% 68.62%, 66.56% 68.57%,
  68.06% 68.71%, 71.05% 69.47%, 74.79% 70.51%,
  78.53% 71.53%, 82.26% 72.45%, 83.08% 73.06%,
  82.91% 74.64%, 78.53% 75.44%, 74.79% 76.29%,
  71.05% 76.58%, 67.31% 77.79%, 63.57% 77.01%,
  59.83% 76.09%, 56.09% 75.27%, 52.35% 75.49%,
  44.87% 78.28%, 37.39% 79.98%, 29.91% 80.05%,
  22.44% 83.30%, 14.96% 85.63%, 13.89% 86.24%, 2.56% 83.59%
); }
.motion-ready .hero { overflow: visible; }
.motion-ready .hero-art { z-index: 1; }
/* The sharp layered scene fades in over the poster; the poster leaves only once
   it is fully covered, so there is no dip or blurry-to-sharp jump on load. */
.motion-ready .hero-poster { opacity: 0; transition: opacity 0s .7s; }
.motion-ready .hero-layers { display: block; animation: veesi-hero-layers-in .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes veesi-hero-layers-in { from { opacity: 0; } to { opacity: 1; } }
.motion-ready .hero-copy, .motion-ready .site-header { z-index: 4; }
.motion-ready .selected { z-index: auto; }
.motion-ready .selected .eyebrow, .motion-ready .concept-grid { position: relative; z-index: 3; }
.motion-ready .concept-grid { background: var(--ivory); }
.motion-ready .hero-copy { transform: translate3d(0, var(--copy-y, 0px), 0); opacity: var(--copy-opacity, 1); }
.motion-ready .hero-copy:focus-within { opacity: 1; }
.motion-ready .hero-subject { transform: perspective(1200px) translate3d(var(--subject-x, 0px), var(--subject-y, 0px), 0) rotateX(var(--subject-rx, 0deg)) rotateY(var(--subject-ry, 0deg)) scale(var(--subject-scale, 1)); opacity: var(--subject-opacity, 1); }
/* Both sides share one transform and deformation, keeping the ribbon continuous. */
.motion-ready .ribbon-back, .motion-ready .ribbon-front { transform: translate3d(var(--ribbon-x, 0px), var(--ribbon-y, 0px), 0) rotate(var(--ribbon-rotation, 0deg)) scale(var(--ribbon-scale, 1)); opacity: var(--ribbon-opacity, 1); }
.motion-ready .concept-card { transform: translate3d(0, var(--card-y, 0px), 0); opacity: var(--card-opacity, 1); }
.motion-ready.motion-active .hero-layer, .motion-ready.motion-active .hero-copy { will-change: transform, opacity; }

/* A real HTML page is projected into the laptop's four measured inner corners. */
.screen-stage { position: absolute; left: 0; top: 0; width: 468px; height: 412px; transform-origin: 0 0; transform: scale(var(--scene-scale, 1)); }
.screen-plane { position: absolute; left: 0; top: 0; width: 900px; height: 620px; overflow: hidden; background: #f9f7f2; color: #152018; transform-origin: 0 0; transform: matrix3d(.2774759457,-.0698177564,0,-.0000939634,-.0437366201,.2707469551,0,-.0000758209,0,0,1,0,112.6,139,0,1); backface-visibility: hidden; }
.screen-track { transform: translate3d(0, var(--screen-y, 0px), 0); }
.motion-active .screen-track { will-change: transform; }
.screen-document { width: 900px; font-family: Arial, sans-serif; background: #f9f7f2; overflow: hidden; }
.screen-nav { display: flex; align-items: center; justify-content: space-between; height: 82px; padding: 0 34px; font-size: 14px; border-bottom: 1px solid #d8d9cf; }
.screen-nav b { font-size: 25px; letter-spacing: -.9px; }
.screen-nav em { font-style: normal; padding: 12px 17px; border: 1px solid #485047; border-radius: 30px; }
.screen-intro { display: flex; justify-content: space-between; padding: 25px 34px 22px; font-size: 11px; letter-spacing: 1.5px; }
.screen-lead { display: grid; grid-template-columns: .86fr 1.14fr; height: 330px; gap: 20px; padding: 0 34px; }
.screen-lead h2 { font-family: Georgia, serif; font-weight: 400; font-size: 68px; line-height: .92; letter-spacing: -3px; margin: 20px 0 25px; }
.screen-lead p { font-size: 20px; line-height: 1.35; margin: 0; }
.hero-art .screen-plane img { position: static; width: 100%; height: 100%; display: block; object-fit: cover; clip-path: none; }
.screen-brand { font-family: Georgia, serif; font-size: 115px; line-height: 1.2; letter-spacing: -6px; padding: 20px 28px 24px; white-space: nowrap; border-bottom: 1px solid #d8d9cf; }
.screen-story { padding: 46px 35px 45px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 42px; }
.screen-story > span { grid-column: 1 / -1; font-size: 12px; letter-spacing: 1px; margin-bottom: 26px; }
.screen-plane h3 { font-family: Georgia, serif; font-weight: 400; font-size: 49px; line-height: 1; letter-spacing: -1.8px; margin: 0; }
.screen-story p { font-size: 22px; line-height: 1.45; margin: 5px 25px 0 0; }
.screen-project { background: #dfe4d6; padding: 30px 34px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 37px; min-height: 425px; }
.screen-project img { max-height: 365px; }
.screen-project > div { padding-top: 22px; }
.screen-project span, .screen-detail span { display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 24px; }
.screen-project h3 { font-size: 46px; }
.screen-project p { font-size: 20px; line-height: 1.4; max-width: 310px; }
.screen-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 55px 34px; height: 410px; }
.screen-detail > div { padding-top: 28px; }
.screen-footer { display: flex; align-items: flex-end; justify-content: space-between; padding: 45px 34px; min-height: 274px; background: #263b2d; color: #f7f8eb; }
.screen-footer h3 { font-size: 58px; }
.screen-footer span { font-size: 20px; white-space: nowrap; }
.screen-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, #fff0 36%, #ffffff18 72%, #fff0); box-shadow: inset 0 0 0 2px #060c0618; }

.motion-toggle { display: none; position: absolute; z-index: 5; right: 2.7%; bottom: 18px; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; font-size: 11px; line-height: 1; border: 1px solid #a6a49d; border-radius: 99px; background: #fbf8f3ed; cursor: pointer; }
.motion-ready .motion-toggle { display: inline-flex; }
.motion-toggle-icon { font-size: 14px; line-height: 12px; width: 12px; text-align: center; }
@media (max-width: 680px) {
  .motion-toggle { bottom: 12px; right: 6%; min-height: 32px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layers, .motion-toggle { display: none !important; }
  .hero-poster { opacity: 1 !important; }
  .hero-copy, .concept-card { transform: none !important; opacity: 1 !important; }
  .hero { overflow: hidden !important; }
}