/* np-style-glass-ios.css */
/* =========================================================
   NutraPlanet Scoped Theme: Glass iOS (Sleek & Shiny)
   Scope Gate: .np-scope.np-style-glass-ios

   Design thesis:
   - iOS-like depth, blur, layers, premium polish
   - High contrast: primary text is dark on light frosted surfaces
   - Background is an “aurora” blur wash, content sits on frosted cards
   - Each highlighted block gets a DISTINCT background tint so it stands out:
     • Key Takeaway Callouts (.callout)
     • Inline CTA Minor (.cta-minor)
     • Visual Break / Divider (hr)
     • Mid-Article CTA Major (.cta-major)
     • Related Posts (.related-posts)
     • Footer CTA (.footer-cta)
     • Internal Link Card (.internal-link-card)
     • Lead Magnet Download Card (.lead-magnet-card)

   IMPORTANT: No ugly FAQ “buttons”.
   - details/summary is styled as clean iOS disclosure row.

   Unique “fun value-adds” for THIS theme:
   1) Subtle parallax “aurora” background drift (JS, cheap)
   2) Glass highlight shimmer on hover (CSS only)
   3) Scroll reveal with soft blur-to-sharp (JS + CSS)

   Constraints:
   - No globals. No :root/body/html.
   - Every selector begins with scope.
   - Includes Elementor nuclear overrides.
========================================================= */

/* =========================================================
   0) THEME VARIABLES (scoped only)
========================================================= */
.np-scope.np-style-glass-ios{
  --np-bg: #0b1020;          /* outer backdrop */
  --np-ink: #0c1220;         /* primary text on glass */
  --np-ink-2: #1a2133;
  --np-muted: #55607a;

  --np-accent: #2b7cff;      /* iOS-ish blue */
  --np-accent-2: #165dd6;

  /* Glass core */
  --np-glass: rgba(255,255,255,.74);
  --np-glass-2: rgba(255,255,255,.62);
  --np-glass-3: rgba(255,255,255,.50);
  --np-border: rgba(12,18,32,.14);
  --np-border-2: rgba(12,18,32,.20);

  /* Distinct block tints (still “glass”) */
  --np-sf-takeaway: rgba(234, 247, 255, .78);
  --np-sf-inline: rgba(255, 246, 214, .85);
  --np-sf-divider: rgba(241, 233, 255, .78);
  --np-sf-major: rgba(232, 255, 245, .78);
  --np-sf-related: rgba(255, 236, 244, .78);
  --np-sf-footer: rgba(12, 18, 32, .86); /* dark glass endcap */
  --np-sf-internal: rgba(240, 244, 255, .78);
  --np-sf-lead: rgba(255, 245, 228, .82);

  /* Typography (premium system-adjacent) */
  --np-font-display: "SF Pro Display","Söhne","Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif;
  --np-font-head: "SF Pro Display","Söhne","Helvetica Neue",Arial,sans-serif;
  --np-font-body: "SF Pro Text","Söhne","Charter","Georgia",serif;
  --np-font-ui: "SF Pro Text","Söhne","Helvetica Neue",Arial,sans-serif;
  --np-font-mono: "SFMono-Regular","IBM Plex Mono",Menlo,Consolas,monospace;

  /* Type */
  --np-fs-body: clamp(1.02rem, 0.95rem + 0.35vw, 1.14rem);
  --np-lh-body: 1.72;
  --np-fs-h1: clamp(2.0rem, 1.25rem + 2.4vw, 3.15rem);
  --np-fs-h2: clamp(1.42rem, 1.12rem + 1.2vw, 2.0rem);
  --np-fs-h3: clamp(1.12rem, 1.02rem + 0.62vw, 1.42rem);

  /* Layout */
  --np-max: 78rem;
  --np-measure: 68ch;
  --np-gutter: clamp(1rem, 0.7rem + 1.6vw, 2.1rem);
  --np-block: clamp(1rem, 0.65rem + 1.25vw, 1.95rem);

  --np-radius: 20px;
  --np-radius-lg: 30px;

  /* Motion */
  --np-ease: cubic-bezier(.2,.85,.2,1);
  --np-dur: 560ms;

  background: var(--np-bg) !important;
  color: var(--np-ink) !important;

  position: relative !important;
  overflow: clip !important;
}

/* =========================================================
   1) ELEMENTOR OVERRIDE “NUCLEAR” RESET (scoped + !important)
========================================================= */
.np-scope.np-style-glass-ios,
.np-scope.np-style-glass-ios *{
  box-sizing: border-box !important;
}

.np-scope.np-style-glass-ios{
  font-family: var(--np-font-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.np-scope.np-style-glass-ios *{
  font-family: inherit !important;
  color: inherit !important;
}

.np-scope.np-style-glass-ios a,
.np-scope.np-style-glass-ios a *{
  color: var(--np-accent) !important;
  text-decoration: none !important;
}

.np-scope.np-style-glass-ios a:hover{
  color: var(--np-accent-2) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.np-scope.np-style-glass-ios :focus{ outline: none !important; }
.np-scope.np-style-glass-ios :focus-visible{
  outline: 3px solid color-mix(in srgb, var(--np-accent) 55%, #fff 45%) !important;
  outline-offset: 3px !important;
  border-radius: 12px !important;
}

.np-scope.np-style-glass-ios img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
}

/* Typography */
.np-scope.np-style-glass-ios p{
  font-size: var(--np-fs-body) !important;
  line-height: var(--np-lh-body) !important;
  color: var(--np-ink-2) !important;
  margin: 0 0 1.05em 0 !important;
}

.np-scope.np-style-glass-ios strong{
  font-weight: 800 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios h1{
  font-family: var(--np-font-display) !important;
  font-size: var(--np-fs-h1) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5em 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios h2{
  font-family: var(--np-font-head) !important;
  font-size: var(--np-fs-h2) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  margin: 1.35em 0 0.55em 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios h3{
  font-family: var(--np-font-ui) !important;
  font-size: var(--np-fs-h3) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  margin: 1.05em 0 0.45em 0 !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   2) AURORA BACKDROP (inside scope)
========================================================= */
.np-scope.np-style-glass-ios::before{
  content: "" !important;
  position: absolute !important;
  inset: -140px !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(43,124,255,.55), transparent 42%),
    radial-gradient(circle at 82% 26%, rgba(0, 255, 178,.28), transparent 44%),
    radial-gradient(circle at 50% 95%, rgba(255, 85, 160,.28), transparent 48%),
    radial-gradient(circle at 18% 78%, rgba(255, 208, 80,.22), transparent 46%) !important;
  filter: blur(42px) saturate(1.1) !important;
  opacity: .95 !important;
  pointer-events: none !important;
  transform: translate3d(var(--np-aurora-x, 0px), var(--np-aurora-y, 0px), 0) !important;
  transition: transform 300ms var(--np-ease) !important;
}

.np-scope.np-style-glass-ios::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.0) 35%, rgba(255,255,255,.03)) !important;
  pointer-events: none !important;
}

/* Ensure content sits above backdrop */
.np-scope.np-style-glass-ios > *{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   3) CONTAINER + MEASURE
========================================================= */
.np-scope.np-style-glass-ios .np-article,
.np-scope.np-style-glass-ios .article,
.np-scope.np-style-glass-ios .post-content{
  max-width: var(--np-max) !important;
  margin: 0 auto !important;
  padding: calc(var(--np-gutter) * 1.3) var(--np-gutter) !important;
}

.np-scope.np-style-glass-ios .reading-box,
.np-scope.np-style-glass-ios .reading{
  max-width: var(--np-measure) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   4) GLASS CARD PRIMITIVE (apply to hero/callouts/ctas)
========================================================= */
.np-scope.np-style-glass-ios .hero,
.np-scope.np-style-glass-ios .glass-card,
.np-scope.np-style-glass-ios .callout,
.np-scope.np-style-glass-ios .cta-major,
.np-scope.np-style-glass-ios .internal-link-card,
.np-scope.np-style-glass-ios .lead-magnet-card,
.np-scope.np-style-glass-ios blockquote,
.np-scope.np-style-glass-ios .pull-quote,
.np-scope.np-style-glass-ios .story-vignette,
.np-scope.np-style-glass-ios .vignette{
  background: var(--np-glass) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Shimmer highlight (fun value-add) */
.np-scope.np-style-glass-ios .hero::before,
.np-scope.np-style-glass-ios .glass-card::before,
.np-scope.np-style-glass-ios .callout::before,
.np-scope.np-style-glass-ios .cta-major::before,
.np-scope.np-style-glass-ios .internal-link-card::before,
.np-scope.np-style-glass-ios .lead-magnet-card::before,
.np-scope.np-style-glass-ios blockquote::before,
.np-scope.np-style-glass-ios .pull-quote::before,
.np-scope.np-style-glass-ios .story-vignette::before,
.np-scope.np-style-glass-ios .vignette::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg,
      rgba(255,255,255,.0) 0%,
      rgba(255,255,255,.20) 22%,
      rgba(255,255,255,.0) 45%,
      rgba(255,255,255,.0) 100%) !important;
  transform: translateX(-55%) !important;
  opacity: .0 !important;
  pointer-events: none !important;
}

.np-scope.np-style-glass-ios .hero:hover::before,
.np-scope.np-style-glass-ios .glass-card:hover::before,
.np-scope.np-style-glass-ios .callout:hover::before,
.np-scope.np-style-glass-ios .cta-major:hover::before,
.np-scope.np-style-glass-ios .internal-link-card:hover::before,
.np-scope.np-style-glass-ios .lead-magnet-card:hover::before{
  opacity: .65 !important;
  transform: translateX(55%) !important;
  transition: transform 650ms var(--np-ease), opacity 200ms var(--np-ease) !important;
}

/* =========================================================
   5) HERO
========================================================= */
.np-scope.np-style-glass-ios .hero{
  padding: clamp(1.2rem, 1rem + 2vw, 2.4rem) !important;
  margin-bottom: calc(var(--np-block) * 1.1) !important;
}

.np-scope.np-style-glass-ios .hero .meta,
.np-scope.np-style-glass-ios .hero .post-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
  margin-bottom: 0.95rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

.np-scope.np-style-glass-ios .pill,
.np-scope.np-style-glass-ios .hero .read-time{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.34rem 0.7rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(12,18,32,.16) !important;
  background: rgba(255,255,255,.70) !important;
  font-family: var(--np-font-ui) !important;
  font-size: 0.88rem !important;
  color: var(--np-ink) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* =========================================================
   6) DISTINCT BLOCK SURFACES (tinted glass)
========================================================= */
.np-scope.np-style-glass-ios .callout{ background: var(--np-sf-takeaway) !important; padding: 1.05rem 1.15rem !important; }
.np-scope.np-style-glass-ios .internal-link-card{ background: var(--np-sf-internal) !important; padding: 1.05rem 1.1rem !important; }
.np-scope.np-style-glass-ios .lead-magnet-card{ background: var(--np-sf-lead) !important; padding: 1.15rem 1.2rem !important; }
.np-scope.np-style-glass-ios .cta-major{ background: var(--np-sf-major) !important; padding: clamp(1.2rem, 1rem + 1.25vw, 2.05rem) !important; }

.np-scope.np-style-glass-ios .callout .callout-title{
  font-family: var(--np-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  color: var(--np-muted) !important;
  margin: 0 0 0.55rem 0 !important;
}

/* Inline CTA Minor (distinct) */
.np-scope.np-style-glass-ios .cta-minor{
  display: inline !important;
  padding: 0.14rem 0.24rem !important;
  border-radius: 12px !important;
  background: var(--np-sf-inline) !important;
  border: 1px solid rgba(12,18,32,.14) !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* =========================================================
   7) VISUAL BREAK / DIVIDER (distinct band)
========================================================= */
.np-scope.np-style-glass-ios hr{
  border: 0 !important;
  height: 22px !important;
  margin: calc(var(--np-block) * 1.15) 0 !important;
  background: transparent !important;
  position: relative !important;
}

.np-scope.np-style-glass-ios hr::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: var(--np-sf-divider) !important;
  border: 1px solid rgba(12,18,32,.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.np-scope.np-style-glass-ios hr::after{
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: rgba(12,18,32,.18) !important;
}

/* =========================================================
   8) GRID + CARDS
========================================================= */
.np-scope.np-style-glass-ios .glass-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 0.6rem + 1.15vw, 1.2rem) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-max) !important;
}

.np-scope.np-style-glass-ios .glass-card{
  grid-column: span 6 !important;
  padding: 1rem 1.05rem !important;
  background: var(--np-glass-2) !important;
}

/* =========================================================
   9) CTA BUTTONS (iOS pill, clean)
========================================================= */
.np-scope.np-style-glass-ios .cta-major .cta-title{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.65rem) !important;
  margin: 0 0 0.35rem 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios .cta-major .cta-sub{
  color: var(--np-muted) !important;
  margin: 0 0 0.95rem 0 !important;
}

.np-scope.np-style-glass-ios .cta-major .cta-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.82rem 1.08rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(12,18,32,.16) !important;
  background: var(--np-accent) !important;
  color: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow:
    0 14px 30px rgba(43,124,255,.28),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform 160ms var(--np-ease), background 160ms var(--np-ease) !important;
}

.np-scope.np-style-glass-ios .cta-major .cta-button:hover{
  transform: translateY(-1px) !important;
  background: var(--np-accent-2) !important;
}

/* =========================================================
   10) PULL QUOTE (soft glass plate)
========================================================= */
.np-scope.np-style-glass-ios blockquote,
.np-scope.np-style-glass-ios .pull-quote{
  padding: 1.1rem 1.2rem !important;
  background: var(--np-glass-2) !important;
  margin: calc(var(--np-block) * 1.25) auto !important;
  max-width: var(--np-measure) !important;
}

.np-scope.np-style-glass-ios blockquote p,
.np-scope.np-style-glass-ios .pull-quote p{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.14rem, 1.02rem + 0.65vw, 1.5rem) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios blockquote cite,
.np-scope.np-style-glass-ios .pull-quote cite{
  display: block !important;
  margin-top: 0.75rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   11) STORY VIGNETTE
========================================================= */
.np-scope.np-style-glass-ios .story-vignette,
.np-scope.np-style-glass-ios .vignette{
  padding: 1.1rem 1.2rem !important;
  background: var(--np-glass-2) !important;
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.2) auto !important;
}

.np-scope.np-style-glass-ios .story-vignette::before,
.np-scope.np-style-glass-ios .vignette::before{
  content: "STORY" !important;
  display: inline-block !important;
  font-family: var(--np-font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--np-muted) !important;
  margin-bottom: 0.65rem !important;
}

/* =========================================================
   12) RELATED POSTS (distinct surface band)
========================================================= */
.np-scope.np-style-glass-ios .related-posts{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1rem, 0.9rem + 1vw, 1.4rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: var(--np-sf-related) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.26) !important;
}

.np-scope.np-style-glass-ios .related-posts .cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.np-scope.np-style-glass-ios .related-posts .card{
  border: 1px solid rgba(12,18,32,.14) !important;
  border-radius: var(--np-radius) !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  transition: transform 210ms var(--np-ease) !important;
}

.np-scope.np-style-glass-ios .related-posts .card:hover{
  transform: translateY(-2px) !important;
}

.np-scope.np-style-glass-ios .related-posts .card .title{
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  padding: 0.85rem 0.9rem 0.2rem 0.9rem !important;
  margin: 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-glass-ios .related-posts .card .desc{
  padding: 0 0.9rem 0.95rem 0.9rem !important;
  margin: 0 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   13) FOOTER CTA (distinct dark glass endcap)
========================================================= */
.np-scope.np-style-glass-ios .footer-cta{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1.2rem, 1rem + 1.25vw, 2.05rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: var(--np-sf-footer) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.32) !important;
  position: relative !important;
  overflow: hidden !important;
}

.np-scope.np-style-glass-ios .footer-cta *{ color: #ffffff !important; }

.np-scope.np-style-glass-ios .footer-cta::before{
  content: "" !important;
  position: absolute !important;
  inset: -70px !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(43,124,255,.40), transparent 45%),
    radial-gradient(circle at 80% 35%, rgba(0,255,178,.20), transparent 50%),
    radial-gradient(circle at 55% 85%, rgba(255,85,160,.18), transparent 50%) !important;
  filter: blur(32px) !important;
  opacity: .85 !important;
  pointer-events: none !important;
}

.np-scope.np-style-glass-ios .footer-cta > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-glass-ios .footer-cta .cta-title{
  font-family: var(--np-font-display) !important;
  font-weight: 950 !important;
  margin: 0 0 0.35rem 0 !important;
}

.np-scope.np-style-glass-ios .footer-cta .cta-sub{
  color: rgba(255,255,255,.78) !important;
}

.np-scope.np-style-glass-ios .footer-cta .cta-button{
  background: rgba(255,255,255,.92) !important;
  color: #0c1220 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
}

/* =========================================================
   14) FAQ (NO button look) iOS disclosure rows
========================================================= */
.np-scope.np-style-glass-ios details{
  max-width: var(--np-measure) !important;
  margin: 0.9rem auto !important;
  border: 1px solid rgba(12,18,32,.14) !important;
  border-radius: var(--np-radius) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
}

.np-scope.np-style-glass-ios summary{
  list-style: none !important;
  cursor: pointer !important;
  padding: 0.95rem 1rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-ink) !important;
  background: rgba(255,255,255,.55) !important;
}

.np-scope.np-style-glass-ios summary::-webkit-details-marker{ display: none !important; }

.np-scope.np-style-glass-ios summary::after{
  content: "›" !important;
  float: right !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: rgba(12,18,32,.55) !important;
  transform: translateY(-1px) !important;
}

.np-scope.np-style-glass-ios details[open] summary::after{
  content: "⌄" !important;
}

.np-scope.np-style-glass-ios details > :not(summary){
  padding: 0 1rem 1rem 1rem !important;
}

/* =========================================================
   15) REVEAL (blur-to-sharp)
========================================================= */
.np-scope.np-style-glass-ios .np-reveal{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  filter: blur(8px) !important;
  transition:
    opacity var(--np-dur) var(--np-ease),
    transform var(--np-dur) var(--np-ease),
    filter var(--np-dur) var(--np-ease) !important;
  will-change: opacity, transform, filter !important;
}

.np-scope.np-style-glass-ios .np-reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

@media (prefers-reduced-motion: reduce){
  .np-scope.np-style-glass-ios::before{
    transform: none !important;
    transition: none !important;
  }
  .np-scope.np-style-glass-ios .np-reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   16) RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .np-scope.np-style-glass-ios .glass-grid{
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .np-scope.np-style-glass-ios .glass-card{ grid-column: span 12 !important; }
  .np-scope.np-style-glass-ios .related-posts .cards{ grid-template-columns: 1fr !important; }
}

@media (max-width: 640px){
  .np-scope.np-style-glass-ios .hero{ padding: 1.15rem !important; }
}