/* VaultEx hero fix v4 (2026-10-26) - stronger background fade only.
   User direction: text showcased + more fade on the bg picture; then
   "Glass bg not needed" - so NO frosted panel, NO text styling changes.
   ORIGINAL layout, copy, text sizes and product-image scale fully preserved.
   Single change: a stronger theme-aware fade over the background picture so
   the text reads clearly and the lineup recedes but stays visible. */
.hero-scrim {
  background:
    radial-gradient(125% 115% at 18% 30%, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.80) 46%, rgba(0,0,0,0.42) 74%, rgba(0,0,0,0.26) 100%),
    linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.16)) !important;
}
[data-theme=light] .hero-scrim {
  background:
    radial-gradient(125% 115% at 18% 30%, rgba(250,247,242,0.96) 0%, rgba(250,247,242,0.84) 46%, rgba(250,247,242,0.48) 74%, rgba(250,247,242,0.30) 100%),
    linear-gradient(rgba(250,247,242,0.18), rgba(250,247,242,0.18)) !important;
}

/* User (26 Oct, replying to option 1 dark image): "Make the sub headlines as
   off-white" - the supporting paragraph under the heading. Dark theme only;
   headline white/red hierarchy and light theme colors untouched. */
html:not([data-theme=light]) section[aria-labelledby="hero-title"] .hero-copy {
  color: #f2ede4 !important;
}

/* Approved About Values + Facility, scoped to match site tokens */
.vx-values-heading{display:flex;align-items:center;gap:2rem;margin-bottom:1.75rem}.vx-line{height:1px;background:var(--line);flex:1}.vx-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.vx-value{position:relative;min-height:190px;padding:1.5rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius-2xl,1rem);background:var(--surface-2);overflow:hidden}.vx-value:before{content:"";position:absolute;top:0;left:1.3rem;right:1.3rem;height:2px;background:var(--accent)}.vx-icon{width:40px;height:40px;color:var(--accent-text)}.vx-icon svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.vx-num{position:absolute;right:1rem;top:1.5rem;font-size:11px;color:var(--muted)}.vx-value h3{font-family:var(--font-heading);font-size:1.05rem;line-height:1.5;font-weight:500;margin:1.8rem 0 0}.vx-facility{display:grid;grid-template-columns:.88fr 1.12fr;gap:3rem;align-items:start}.vx-eyebrow{font-family:var(--font-heading);color:var(--accent-text);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1rem}.vx-facility h2{max-width:450px}.vx-facility p{font-size:1.125rem;line-height:1.8;color:var(--muted);margin-top:1.5rem;max-width:440px}.vx-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.vx-gallery figure{position:relative;overflow:hidden;border-radius:var(--radius-2xl,1rem);margin:0;background:var(--surface-2);border:1px solid var(--line)}.vx-gallery img{width:100%;height:220px;object-fit:cover;display:block}.vx-gallery figcaption{position:absolute;bottom:0;left:0;right:0;padding:2.5rem .9rem .9rem;font-size:.75rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.9))}
@media(max-width:767px){.vx-values{grid-template-columns:1fr;gap:.75rem}.vx-value{min-height:78px;display:flex;align-items:center;gap:1rem;padding:1.25rem}.vx-value:before{width:2px;height:auto;top:1rem;bottom:1rem;left:0;right:auto}.vx-icon{width:30px;height:30px;flex-shrink:0}.vx-icon svg{width:29px;height:29px}.vx-value h3{margin:0;font-size:1rem;padding-right:1rem}.vx-num{font-size:10px;top:10px;right:12px}.vx-facility{grid-template-columns:1fr;gap:1.5rem}.vx-facility p{font-size:1rem;margin-top:1.25rem}.vx-gallery{gap:.75rem}.vx-gallery img{height:184px}.vx-gallery figcaption{font-size:.65rem;padding:2rem .6rem .8rem}}

/* User (3 Nov): new hero wording "very odd" - "reduce the size little smaller
   and make it as 2 lines". The longer red phrase wrapped to a 3rd line on
   desktop. Same wording, colors, layout and clamp shape; only the fluid vw
   factor lowered (4.25 -> 3.65) so each phrase fits one line at desktop
   (measured fit limit ~3.82vw at 1440, margin kept). Mobile unchanged (2rem
   floor); mobile wraps naturally as before. */
#hero-title{font-size:clamp(2rem,3.3vw,7rem) !important;}

/* Tablet range (768-1023): the 2rem floor pins the font while the container is
   still narrow, so the red phrase wrapped to a 3rd line (seen on iPad Mini
   768x1024). Lower the floor inside this range only; desktop and mobile
   behavior unchanged. */
@media (min-width:768px) and (max-width:1023px){
  #hero-title{font-size:clamp(1.6rem,3.3vw,2rem) !important;}
}

/* User (4 Nov): widen the hero paragraph toward the right so it uses fewer
   lines (arrow markup on the 768 preview). The old cap min(52ch,40vw) pinned
   it to ~307px at tablet. New cap min(64ch,100%): wider on tablet/desktop,
   phone unchanged (container is the binding limit there). */
.hero-copy{max-width:min(64ch,100%) !important;}

/* User (4 Nov, circling the widened paragraph): "this one you have to reduce
   the size". Smaller fluid body size; words, width, colors, buttons and the
   approved heading unchanged. Floor 0.95rem keeps phone text readable. */
.hero-copy{font-size:clamp(0.95rem,1.15vw,1.6rem) !important;}