/* =========================================================================
 * Our Story — block 1, the Video Hero.
 *
 * A full-screen dark section: the poster (a media library attachment) across
 * the whole screen, dimmed on the left and at the edges, the eyebrow / H1 /
 * description / bottom button with the video caption on the left, and a large
 * Play button over the frame (right of centre, so the face on the poster is
 * not covered). No particles and no background animation. The tokens are those
 * of the other sections of the frame (Outfit 300 for the H1, Hanken Grotesk
 * for the text, accent #52C7C6, the --ms-scale scale).
 *
 * The video window (.lmx-modal--video) moved into the shared component
 * assets/css/shared/video-modal.css (the /demo/ page uses it too); the rules
 * are unchanged and only the hero itself is left here.
 * ====================================================================== */

.lmx-vh-inner{position:relative;width:100%;min-height:100vh;background:#05090b;color:#fff;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;display:grid;align-items:center;--ms-scale:1;--vh-accent:#52C7C6;--vh-accent-hi:#83DAD9;--vh-ink:#04211F}
.lmx-vh-inner *{box-sizing:border-box}

/* --- poster ------------------------------------------------------------- */
.lmx-vh-media{position:absolute;inset:0;z-index:0;background:#05090b}
/* Specificity above the frame rule .lmx-ms img{height:auto}: otherwise the poster takes its height from the width and inflates the section. */
.lmx-vh-inner .lmx-vh-poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:64% 50%;display:block;border-radius:0}
/* Dimming: dense on the left (under the text), dissolving towards the centre, with a light vignette at the right edge and vertically. */
.lmx-vh-shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,9,11,.97) 0%,rgba(5,9,11,.9) 24%,rgba(5,9,11,.58) 42%,rgba(5,9,11,.14) 58%,rgba(5,9,11,0) 70%,rgba(5,9,11,.5) 100%),
    linear-gradient(180deg,rgba(5,9,11,.5) 0%,rgba(5,9,11,0) 22%,rgba(5,9,11,0) 76%,rgba(5,9,11,.62) 100%)}

/* --- the large Play button ---------------------------------------------- */
.lmx-vh-playwrap{position:absolute;left:74%;top:49%;z-index:3;transform:translate(-50%,-50%)}
.lmx-vh-play{display:inline-flex;align-items:center;justify-content:center;width:max(96px,calc(128px * var(--ms-scale,1)));height:max(96px,calc(128px * var(--ms-scale,1)));margin:0;padding:0;border-radius:50%;border:2px solid var(--vh-accent);background:rgba(5,9,11,.28);color:var(--vh-accent);cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 0 0 10px rgba(82,199,198,.08),0 0 48px rgba(82,199,198,.28)}
.lmx-vh-play-icon{width:40%;height:40%;margin-left:7%;display:block}
.lmx-vh-play:hover,
.lmx-vh-play:focus-visible{background:var(--vh-accent);color:var(--vh-ink);border-color:var(--vh-accent-hi)}

/* --- text on the left ----------------------------------------------------- */
.lmx-vh-content{position:relative;z-index:2;max-width:640px;padding:max(48px,calc(72px * var(--ms-scale,1))) 0 max(40px,calc(64px * var(--ms-scale,1)))}
.lmx-vh-eyebrow{display:flex;align-items:center;gap:max(10px,calc(16px * var(--ms-scale,1)));margin:0 0 max(14px,calc(30px * var(--ms-scale,1))) !important;color:var(--vh-accent) !important;font-family:var(--lmx-ms-font) !important;font-size:max(11px,calc(14px * var(--ms-scale,1))) !important;font-weight:500;letter-spacing:.42em;text-transform:uppercase;line-height:1.3 !important}
.lmx-vh-eyebrow-line{display:block;width:max(24px,calc(40px * var(--ms-scale,1)));height:1px;background:var(--vh-accent);opacity:.9}
.lmx-vh-title{margin:0 !important;max-width:14ch;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:max(42px,calc(98px * var(--ms-scale,1))) !important;line-height:1.02 !important;letter-spacing:-.025em !important;color:#eef2f4 !important;text-wrap:balance}
.lmx-vh-desc{margin:max(16px,calc(30px * var(--ms-scale,1))) 0 0 !important;max-width:560px;font-family:var(--lmx-ms-font) !important;font-size:max(15px,calc(21px * var(--ms-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:rgba(255,255,255,.8) !important}

/* The bottom button: a small Play circle plus the video caption and the “WATCH · 03:18” line. */
.lmx-vh-cta{display:inline-flex;align-items:center;gap:max(16px,calc(26px * var(--ms-scale,1)));margin:max(28px,calc(56px * var(--ms-scale,1))) 0 0;padding:4px 8px 4px 4px;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;text-align:left;font-family:var(--lmx-ms-font);min-height:44px}
.lmx-vh-cta-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:max(48px,calc(66px * var(--ms-scale,1)));height:max(48px,calc(66px * var(--ms-scale,1)));border-radius:50%;border:2px solid var(--vh-accent);color:var(--vh-accent);transition:background-color .22s ease,color .22s ease}
.lmx-vh-cta-play{width:38%;height:38%;margin-left:6%;display:block}
.lmx-vh-cta:hover .lmx-vh-cta-icon,
.lmx-vh-cta:focus-visible .lmx-vh-cta-icon{background:var(--vh-accent);color:var(--vh-ink)}
.lmx-vh-cta-text{display:flex;flex-direction:column;gap:max(6px,calc(10px * var(--ms-scale,1)))}
.lmx-vh-cta-label{display:block;font-size:max(12px,calc(14px * var(--ms-scale,1)));font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#fff;line-height:1.3}
.lmx-vh-cta-meta{display:flex;align-items:center;gap:10px;font-size:max(11px,calc(12.5px * var(--ms-scale,1)));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.3}
.lmx-vh-cta-sep{opacity:.7}

/* --- desktop: the section fits the window exactly ------------------------- */
@media (min-width:1025px){
.lmx-vh-inner{height:100%;min-height:100%}
}

/* --- tablet and phone: the poster on top, the text below ------------------- */
@media (max-width:1024px){
/* On narrow screens the header is fixed (84px, as in the other blocks): the poster starts below it. */
.lmx-vh-inner{display:block;min-height:0;height:auto;padding:84px 0 52px;--vh-media-h:max(360px,min(72vw,560px))}
.lmx-vh-media{position:relative;inset:auto;height:var(--vh-media-h)}
.lmx-vh-poster{object-position:62% 32%}
.lmx-vh-shade{background:linear-gradient(180deg,rgba(5,9,11,.18) 0%,rgba(5,9,11,0) 28%,rgba(5,9,11,0) 56%,rgba(5,9,11,.7) 84%,#05090b 100%)}
/* Play sits over the left part of the frame so that the face on the right is not covered. */
.lmx-vh-playwrap{left:26%;top:calc(var(--vh-media-h) * .5)}
.lmx-vh-play{width:88px;height:88px}
.lmx-vh-content{max-width:none;padding:0 var(--lmx-section-padding-x);margin-top:-36px}
.lmx-vh-title{font-size:48px !important;max-width:none}
.lmx-vh-desc{font-size:16px !important;max-width:none}
.lmx-vh-cta{margin-top:28px}
.lmx-vh-cta-icon{width:52px;height:52px}
}
@media (max-width:480px){
.lmx-vh-title{font-size:40px !important}
.lmx-vh-play{width:76px;height:76px}
.lmx-vh-cta-label{font-size:12px;letter-spacing:.18em}
}

/* --- less motion ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-vh-cta-icon{transition:none}
}