/* Vision–Mission–Values Pack
   Background matches your site's section blue (#162449).
   VMV hero now uses a static image instead of the video frame. */

/* Main tokens */
:root{
  --vmv-brand-navy: #162449;

  --brand-blue: var(--accent, #5aa0e6);
  --brand-blue-700: color-mix(in hsl, var(--brand-blue), #000 28%);
  --brand-blue-200: color-mix(in hsl, var(--brand-blue), #fff 75%);
  --text-900: var(--text-color, #eaf4ff);
  --text-800: color-mix(in hsl, var(--text-900), #000 20%);
  --muted-500: #cfd8ea;

  --surface: var(--surface-bg, #f5f7fb);
  --dark-900: var(--dark-bg, #0b0f14);

  --grad-cyan: #00e0ff;
  --grad-purple: #7c3aed;
}

/* Layout */
.vmv-container{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,28px)}
.vmv-section{padding:clamp(32px,5vw,72px) 0;position:relative;overflow:clip} /* reduced padding */
.vmv-grid{display:grid;gap:clamp(20px,3vw,40px)}

/* Themes */
.vmv-section[data-theme="brand"]{background:var(--vmv-brand-navy);color:#fff}
.vmv-section[data-theme="light"]{background:var(--surface);color:var(--text-900)}
.vmv-section[data-theme="dark"]{
  background:radial-gradient(900px 400px at 18% 22%,#0e2230 0%,var(--dark-900) 50%),var(--dark-900); /* reduced gradient */
  color:#eaf2ff
}

/* Readability on brand navy */
.vmv-section[data-theme="brand"] .vmv-hero-title,
.vmv-section[data-theme="brand"] .vmv-h2,
.vmv-section[data-theme="brand"] .vmv-h3,
.vmv-section[data-theme="brand"] .vmv-lead,
.vmv-section[data-theme="brand"] .vmv-text,
.vmv-section[data-theme="brand"] .vmv-statement{color:#fff}
.vmv-section[data-theme="brand"] .vmv-h2 .accent,
.vmv-section[data-theme="brand"] .vmv-statement .accent{color:var(--brand-blue-200)}
.vmv-section[data-theme="brand"] .vmv-strap{color:var(--brand-blue-200)}
.vmv-section[data-theme="brand"] .vmv-rule,
.vmv-rule--brand{background:color-mix(in hsl,#fff,#000 32%);opacity:.85}

/* Headings & text */
.vmv-hero-title{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:800;line-height:.98;font-size:clamp(2.4rem,1.6rem + 4.2vw,4.6rem);letter-spacing:.01em}
.vmv-lead{font-size:clamp(1.1rem,.95rem + .9vw,1.45rem);line-height:1.85;opacity:.98;max-width:62ch}
.vmv-h2{font-weight:800;letter-spacing:.01em;font-size:clamp(2.2rem,1.4rem + 2.8vw,3.4rem)}
.vmv-h2 .accent{color:var(--brand-blue)}
.vmv-h2--brand{color:#fff}
.vmv-strap{font-weight:800;font-size:clamp(1.3rem,1.05rem + 1.9vw,2.1rem);line-height:1.25;text-transform:uppercase;letter-spacing:.06em}
.vmv-text{font-size:clamp(1.05rem,1rem + .45vw,1.25rem);line-height:1.9;color:#e7eefd;max-width:68ch}
.vmv-statement{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.35rem);font-weight:800;line-height:1.3}

/* Rules */
.vmv-rule{border:0;height:1px;background:color-mix(in hsl,#ffffff,#000 18%);margin:clamp(18px,3.2vw,34px) 0}
.vmv-rule--dark{background:color-mix(in hsl,#fff,#000 65%);opacity:.6}

/* 1) Hero */
.vmv-grid--hero{grid-template-columns:1.2fr 1fr;align-items:center}
.vmv-hero-copy{padding-right:clamp(8px,2vw,20px)}

/* New: static image media replacing the old video frame */
.vmv-hero-media{display:grid;place-items:center}
.vmv-hero-img{
  width:min(640px,100%);
  height:auto;
  border-radius:32px;
  box-shadow:0 2px 38px #0007;
  object-fit:cover;
  aspect-ratio: 1.2/1;
}

/* 2) Vision grid */
.vmv-grid--vision{grid-template-columns:.9fr 1.1fr;align-items:start}
.vmv-figure{margin:0}
.vmv-figure img{width:100%;height:auto;border-radius:12px;filter:grayscale(100%)}

/* Steps */
.vmv-steps{display:flex;align-items:flex-start;gap:clamp(18px,3.8vw,48px);margin-top:clamp(8px,1vw,12px);flex-wrap:wrap}
.vmv-step{display:flex;flex-direction:column;align-items:flex-start;min-width:88px}
.vmv-num{font-weight:900;font-size:clamp(2.2rem,1.2rem + 3.6vw,4rem);line-height:1}
.vmv-arrow{align-self:center;font-size:clamp(1.6rem,1rem + 1.2vw,2rem);color:#e6f3ff;margin-top:6px}
.vmv-step-label{margin-top:8px;font-weight:700;color:#ffffff;opacity:.95;line-height:1.35}

/* Gradient text for numbers and badges */
.vmv-section[data-theme="brand"] .vmv-num,
.vmv-section[data-theme="brand"] .vmv-badge{background:linear-gradient(135deg,var(--grad-cyan),var(--grad-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* 3) Two-column strip */
.vmv-grid--two{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(24px,6vw,80px)}
.vmv-h3{font-size:clamp(1.5rem,1.05rem + 1.25vw,2.1rem);font-weight:800;margin-bottom:10px}

/* 4) Mission bullets */
.vmv-grid--mission{grid-template-columns:.9fr 1.1fr;gap:clamp(12px,3vw,40px);align-items:start}
.vmv-grid--bullets{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(16px,3vw,28px)}
.vmv-bullet{display:grid;grid-template-columns:auto 56px 1fr;gap:18px;align-items:start}
.vmv-badge{font-weight:900;font-size:clamp(1.8rem,1.25rem + 1.75vw,2.5rem)}
.vmv-icon{display:grid;place-items:center}
.vmv-bullet-copy p{color:#ffffff;line-height:1.9;font-size:clamp(1.05rem,1rem + .45vw,1.25rem)}
.vmv-mission .vmv-container{position:relative}
.vmv-mission::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(600px 280px at 20% 18%,rgba(16,165,238,.12),transparent 50%); /* reduced glow */
  pointer-events:none
}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Anim */
@keyframes vmvHue{0%{filter:hue-rotate(0deg) saturate(110%)}100%{filter:hue-rotate(18deg) saturate(120%)}}

/* Responsive */
@media (max-width:1024px){
  .vmv-grid--hero,.vmv-grid--vision,.vmv-grid--mission{grid-template-columns:1fr}
  .vmv-hero-img{width:100%}
}
@media (max-width:760px){
  .vmv-grid--bullets{grid-template-columns:1fr}
  .vmv-grid--two{grid-template-columns:1fr}
}