/* Sized by WIDTH, not by a fixed viewport height.
   It was min-height:1080px (a fixed tall box), which the object-fit:cover
   video then cropped to a zoomed sliver on any screen narrower/shorter
   than that. Now the hero keeps a 16:9 box that follows its own width, so
   it grows and shrinks with the screen and the video fills its true width
   at every size. max-height:100svh stops it getting taller than the
   screen on ultrawide displays; a floor keeps the overlaid heading/CTA
   from being crushed on very small phones. */
.vh-root{position:relative;width:100%;aspect-ratio:16/9;max-height:100svh;min-height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0a0a0a;}
/* aspect-ratio is widely supported; this only matters for very old
   browsers, where a viewport height is a reasonable fallback. */
@supports not (aspect-ratio:16/9){.vh-root{min-height:70vh;}}
.vh-bg{position:absolute;inset:0;z-index:0;}
.vh-video{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;}
.vh-image{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;}
.vh-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,.68) 100%);z-index:1;}
.vh-text{position:relative;z-index:2;text-align:center;padding:80px 24px;max-width:900px;}
.vh-heading{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,4rem);font-weight:900;color:#fff;margin:0 0 16px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.vh-subheading{font-family:'DM Sans',sans-serif;font-size:clamp(1rem,2.5vw,1.375rem);font-weight:300;color:rgba(255,255,255,.85);margin:0;line-height:1.55;text-shadow:0 1px 6px rgba(0,0,0,.4);}