/* ===== Crafti hero video — copy this block ===== */
.hero{--paper:#F5F2EC;background:var(--paper)}
.hero--B{--paper:#F3EBDF}
.hero-media{
  position:relative; margin:0 auto; width:min(100%, var(--max,1280px));
  aspect-ratio:var(--ar,1418/652);              /* reserves space: zero layout shift */
  /* soft feather so no edge of the video rectangle is ever visible */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fx,5%),#000 calc(100% - var(--fx,5%)),transparent),
                     linear-gradient(180deg,transparent,#000 var(--ft,6%),#000 calc(100% - var(--fb,8%)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fx,5%),#000 calc(100% - var(--fx,5%)),transparent),
                     linear-gradient(180deg,transparent,#000 var(--ft,6%),#000 calc(100% - var(--fb,8%)),transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.hero-media>picture{position:absolute;inset:0}
.hero-media img,.hero-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.hero-media>video{opacity:0;transition:opacity .3s}           /* poster <img> shows until the first frame is really playing */
.hero-media.is-playing>video{opacity:1}
.hero--A .hero-media{--ar:1418/652;--max:1280px}
.hero--B .hero-media{--ar:1358/678;--max:1600px;--fx:9%;--ft:5%;--fb:16%}
/* optional: keep the whole drawing above the fold on short desktop screens (--chrome = height of nav+copy) */
.hero--fit .hero-media{width:min(100%, var(--max,1280px), calc((100svh - var(--chrome,300px)) * var(--arn,2.175)))}
.hero--A{--arn:2.1748} .hero--B{--arn:2.0029}
@media (max-width:600px){
  .hero--fit .hero-media{width:100%}
  .hero--A .hero-media{--fx:3%;--ft:4%;--fb:6%}                 /* A: whole scene, scaled down, paper margins kept */
  .hero--B .hero-media{--ar:1/1;--pos:70.7% 50%;--fx:6%;--ft:4%;--fb:12%}  /* B: square crop centred on the house */
}
@media (prefers-reduced-motion:reduce){.hero-media>video{display:none}}
/* ===== end hero video ===== */
/* paper-whitened hero (A-*w.*): multiply makes its paper exactly the page colour on any display */
.hero-media--multiply img,.hero-media--multiply>video{mix-blend-mode:multiply}