.board-hero {
  position: absolute;
  z-index: 4;
  left: 25%;
  top: 25.5%;
  width: 50%;
  height: 48%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.hero-card {
  position: relative;
  margin: 0;
  width: min(100%, 30vw);
  padding: clamp(24px, 3.4vh, 44px) clamp(26px, 2.6vw, 48px) clamp(24px, 3.2vh, 40px);
  transform: rotate(-1.3deg);
  border-radius: 3px;
  background: linear-gradient(158deg, #f7f0e2 0%, #ece1cb 100%);
  box-shadow:
    0 24px 52px rgba(16, 8, 2, .52),
    0 7px 16px rgba(16, 8, 2, .4),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  color: #2b2015;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(120, 92, 55, .16);
  pointer-events: none;
}
.hero-pin {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 19px;
  height: 19px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8b7e 0%, #e5473b 46%, #a81f16 100%);
  box-shadow: 0 5px 7px rgba(12, 4, 1, .55), inset 0 -2px 3px rgba(90, 10, 4, .7), inset 0 2px 2px rgba(255, 255, 255, .45);
}
.hero-card .eyebrow {
  margin: 0 0 12px;
  color: #7a5a34;
  font: 700 clamp(9px, .78vw, 11px) var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-card h1 {
  margin: 0;
  font-size: clamp(30px, 2.9vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: #221810;
}
.hero-sub {
  margin: 13px 0 0;
  color: #5a4630;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .01em;
}
.board-contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: clamp(20px, 3vh, 32px);
  padding: 0 20px;
  border-radius: 7px;
  background: #221913;
  color: #f4ead6;
  font: 600 clamp(13px, .95vw, 15px)/1 var(--sans);
  letter-spacing: .015em;
  box-shadow: 0 6px 14px rgba(20, 10, 2, .4);
  transition: background-color .2s ease, transform .2s ease;
}
.board-contact:hover { background: #0f0a06; transform: translateY(-2px); }
.board-contact:focus-visible { outline: 2px solid #221913; outline-offset: 3px; }
.board-hero .scroll-cue { margin-top: clamp(14px, 2.4svh, 24px); color: #d0be9b; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.board-hero .scroll-cue i { background: rgba(228, 214, 186, .3); }
.board-hero .scroll-cue i::after { background: #d0be9b; }
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(36px, 7vh, 72px);
  color: var(--paper);
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: var(--line);
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: var(--green);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(230%); }
}

.laptop-wrap {
  display: grid;
  place-items: center;
  width: 100%;
}
.laptop-scene {
  /* Calibrated once against the exact 1916×1080 desk-scene video.
     --screen-*: the laptop's glass on the FINAL frame (open, camera settled).
     --board-*:  the cork pin board frame on the FIRST frame.
     All screen geometry lives here so resize/orientation refreshes stay coherent. */
  --screen-left: 21%;
  --screen-top: 8.3%;
  --screen-width: 59%;
  --screen-height: 66.9%;
  --board-left: 28.4%;
  --board-top: 3.2%;
  --board-width: 53.2%;
  --board-height: 63.4%;
  position: relative;
  /* Contained stage for the static fallback; the enhanced experience swaps to a
     full-bleed cover of the viewport below. */
  width: min(94vw, 1480px);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1916 / 1080;
}
.opening-enabled .laptop-scene { width: max(100vw, calc(100svh * (1916 / 1080))); }
/* The initial "camera on the pin board" framing: GSAP scales this wrapper from
   the board push-in back to 1 as the visitor starts scrolling. The origin is the
   board's centre so the pull-back feels like the camera stepping back. */
.stage-zoom {
  position: absolute;
  inset: 0;
  /* Origin: board centre horizontally, just above the board's top frame
     vertically, so the push-in never crops the board and the closed laptop
     stays partially visible beneath it. */
  transform-origin: calc(var(--board-left) + var(--board-width) / 2) calc(var(--board-top) + 1%);
}
.laptop-video, .laptop-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.laptop-poster { opacity: 1; }
.laptop-video { z-index: 1; opacity: 0; background: #111412; }
.opening-enabled .laptop-video { opacity: 1; }

/* Film treatment over the video layer: static vignette that melts the frame into
   the page background, plus animated grain. Sits above the video (z1) and below
   the screen overlay (z3). */
.video-grain { display: none; }
.opening-enabled .video-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.opening-enabled .video-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(6, 8, 7, .16) 20%, rgba(6, 8, 7, .32) 52%, rgba(6, 8, 7, .6) 78%, rgba(6, 8, 7, .93) 100%),
    linear-gradient(180deg, rgba(6, 8, 7, .58) 0%, transparent 16%, transparent 82%, rgba(6, 8, 7, .8) 100%);
}
.opening-enabled .video-grain::after {
  content: "";
  position: absolute;
  inset: -30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .08;
  /* Deliberately NOT mix-blend-mode: blending over a <video> forces a full
     re-composite on every seeked frame, which janks scroll scrubbing. Plain
     normal-blend overlay keeps the grain on its own compositor layer. */
  animation: film-grain 1.2s steps(5) infinite;
  will-change: transform;
}
@keyframes film-grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-3%, 2%, 0); }
  50% { transform: translate3d(2%, -3%, 0); }
  75% { transform: translate3d(-2%, -1%, 0); }
  100% { transform: translate3d(3%, 2%, 0); }
}

.laptop-hero{position:relative;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;background:#0b100e;min-height:100svh;display:grid;align-items:center}.site-header{position:fixed;width:100%;background:#0b100ec9}.screen-overlay{display:none}.hero-phrase{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:5;pointer-events:none;opacity:0;font-size:clamp(24px,3vw,44px);font-weight:500;color:#edf1eb;text-shadow:0 3px 30px #000}.opening-enabled .laptop-hero{height:100svh}.opening-enabled .laptop-scene{overflow:visible}.opening-enabled .screen-overlay{display:block;position:absolute;z-index:6;top:0;left:0;width:100vw;height:100svh;opacity:0;transform-origin:50% 50%;background:var(--ink);overflow:hidden}.screen-activation{position:absolute;inset:0;display:grid;place-items:center;background:var(--ink);z-index:2}.screen-activation strong{font:700 clamp(24px,4vw,52px) var(--mono);color:var(--green);letter-spacing:.15em;opacity:0}.activation-line{position:absolute;width:0;height:1px;background:var(--green)}.screen-interface{position:absolute;inset:0;opacity:0;background:var(--ink)}.welcome-screen{height:100%;width:min(1176px,calc(100% - 72px));margin:auto;display:flex;flex-direction:column;justify-content:center;position:relative;padding:100px 0 65px}.welcome-screen .intro-copy{max-width:760px}.welcome-screen h2{font-size:clamp(36px,5vw,64px);line-height:1.2;font-weight:500;margin:20px 0}.welcome-screen .intro-statement{max-width:35ch;font-size:clamp(24px,3vw,36px)}.welcome-screen .intro-detail{max-width:60ch}.continue-cue{position:absolute;bottom:25px;margin:0;font-size:13px;color:var(--muted)}.laptop-hero .hero-card{width:min(100%,30vw)}.laptop-hero .hero-card h1{color:#221810;font-size:clamp(28px,3vw,50px)}.hero-card .eyebrow{color:#7a5a34}.opening-enabled .board-hero{pointer-events:auto}.opening-enabled .laptop-video{opacity:1}.opening-enabled .stage-zoom{transform:none}.opening-enabled .laptop-video,.opening-enabled .laptop-poster{will-change:transform,opacity}.opening-enabled .video-grain{z-index:2}.hero-sub{font-size:14px}.laptop-hero .board-hero{direction:ltr}html[dir=rtl] .hero-card{direction:rtl}html[dir=rtl] .hero-card h1{line-height:1.5}html[dir=rtl] .welcome-screen h2{line-height:1.4}
@media(max-width:899px),(max-height:639px){.laptop-hero{min-height:0;display:block;padding-top:66px}.laptop-scene{width:100%;overflow:visible;aspect-ratio:auto}.stage-zoom{position:relative;height:65vw;min-height:320px}.laptop-hero .board-hero{left:18%;top:15%;width:64%;height:65%}.laptop-hero .hero-card{width:100%;padding:25px 20px}.laptop-hero .hero-card h1{font-size:30px}.hero-sub{font-size:12px}.board-hero .scroll-cue{display:none}.board-contact{margin-top:18px}.screen-overlay{display:block;position:relative;width:100%;opacity:1}.screen-activation{display:none}.screen-interface{position:relative;opacity:1}.welcome-screen{padding:48px 0 70px;width:calc(100% - 44px)}.welcome-screen h2{font-size:34px}.welcome-screen .intro-statement{font-size:26px}.continue-cue{bottom:20px}.hero-phrase{display:none}}
@media(prefers-reduced-motion:reduce){.laptop-hero{min-height:0;padding-top:78px;display:block}.laptop-scene{width:100%;aspect-ratio:auto}.stage-zoom{position:relative;height:55vw;max-height:650px}.screen-overlay{display:block;position:relative;opacity:1}.screen-activation{display:none}.screen-interface{position:relative;opacity:1}.welcome-screen{padding:60px 0 80px}.hero-phrase{display:none}.laptop-video{display:none}}