/* =====================================================================
   NoiraVision overrides on top of the Framer export.
   Light + glassmorphism. Loaded last, so it wins over inline styles only
   where !important is used deliberately.
   ===================================================================== */

/* --- tinted backdrop: glass needs something behind it to refract --- */
html { background: #ffffff; }

body {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(46vw 46vw at 10% 4%,  rgba(0, 0, 238, 0.10), transparent 62%),
    radial-gradient(42vw 42vw at 92% 16%, rgba(124, 77, 255, 0.10), transparent 62%),
    radial-gradient(52vw 52vw at 68% 72%, rgba(0, 170, 255, 0.08), transparent 66%),
    radial-gradient(38vw 38vw at 18% 92%, rgba(0, 0, 238, 0.06), transparent 64%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* --- frosted panels ------------------------------------------------ */
/* Only real panels get glass. Decorative shapes (the concentric rings in
   "The Hidden Cost of Manual Work", background blocks) also carry
   data-border="true" but have no --border-color in their inline style —
   blurring those turns the section into soup. Framer sets
   backdrop-filter:blur(4px) inline on cards, so the real blur is forced. */
[data-border="true"][style*="--border-color"] {
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  box-shadow:
    0 1px 1px rgba(10, 10, 12, 0.03),
    0 14px 40px -12px rgba(10, 10, 12, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* pills and small chips: hairline only, no heavy lift */
[data-border="true"][style*="--border-color"]:has(> .framer-text),
[data-border="true"][style*="--border-color"][style*="border-radius: 100px"] {
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* "Talk with Noro" card — the one panel that should read as thick glass */
.framer-tntiue-container > [data-border="true"] {
  background-image: linear-gradient(145deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.46) 48%,
      rgba(255, 255, 255, 0.62) 100%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(200%) !important;
  backdrop-filter: blur(34px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow:
    0 2px 2px rgba(10, 10, 12, 0.03),
    0 26px 60px -18px rgba(10, 10, 12, 0.16),
    0 0 60px -20px rgba(0, 0, 238, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

/* dark elements (primary buttons, inverted blocks) stay solid */
[data-border="true"][style*="rgb(10, 10, 12)"],
[data-border="true"][style*="rgb(0, 0, 238)"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 238, 0.35);
}

/* --- sticky header: flat, never blurred ---------------------------- */
.framer-ca1k8a-container,
.framer-ca1k8a-container *,
nav, nav * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- nav: white labels; CTA fill left at the template default ------ */
.framer-ca1k8a-container a .framer-styles-preset-gaenl2,
.framer-ca1k8a-container a[href="./contact"] .framer-text {
  color: #ffffff !important;
}


/* --- hero top row (service list + intro line): grey ---------------- */
[data-framer-name="Hero"] [data-framer-name="Top"] .framer-text,
[data-framer-name="Hero"] [data-framer-name="Top"] p,
[data-framer-name="Hero"] [data-framer-name="Top"] span {
  color: #6b6b78 !important;
}

/* --- "Book 15-mins call": light fill instead of near-black ---------- */
a[href="https://cal.com/noira-vision/axis-usa"] [data-framer-name="BG"] {
  background-color: rgba(255, 255, 255, 0.88) !important;
}
/* label has to flip to ink or it disappears on the light fill */
a[href="https://cal.com/noira-vision/axis-usa"] .framer-text {
  color: #0a0a0c !important;
}

/* --- buttons are not glass panels ---------------------------------- */
/* Button fills sit inside links and also carry data-border="true", so the
   card rules above were giving them a blurred backdrop and a wide shadow —
   that was the grey halo around "Book 15-mins call". */
a [data-border="true"][style],
button [data-border="true"][style] {
  box-shadow: none !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- "Talk with …" card: flat, no shadow above or below ------------ */
.framer-tntiue-container > [data-border="true"],
.framer-19wioom {
  box-shadow: none !important;
}

/* --- media keeps its edges crisp ----------------------------------- */
img, video { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* --- hero video: lifted and cooled so black type stays readable ----- */
[data-framer-name="Hero"] video {
  filter: saturate(0.9) brightness(1.06) contrast(0.98);
}

/* --- mobile hero framing ------------------------------------------- */
/* The mobile clip is 1080x1920 in a 360x810 box, so `cover` scales it by
   height and leaves NO vertical slack — object-position alone cannot move
   the frame up. Growing the element past the box (and pulling it back with
   a negative margin) creates that slack: the clip is scaled a bit larger
   and anchored to the hero's bottom edge, which lifts the glass mark.
   --nv-hero-rise = how much taller than the box; the x in object-position
   then centres the mark, which sits at 54.6% of the source width. */
@media (max-width: 809px) {
  /* the grown clip must stay inside the hero box — the container does not
     clip by default, so the overshoot would otherwise sit behind the header */
  [data-framer-name="Hero"] :has(> video[src$="nv-hero-mobile.mp4"]) {
    overflow: hidden;
  }

  /* background clip only — the hero also holds the "Talk with Nolan" card
     video, and an unscoped `Hero video` rule zoomed that one too */
  [data-framer-name="Hero"] video[src$="nv-hero-mobile.mp4"] {
    --nv-hero-rise: 200px;
    height: calc(100% + var(--nv-hero-rise)) !important;
    margin-top: calc(-1 * var(--nv-hero-rise)) !important;
    object-position: 62.5% 50% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- nv-hero-border: divider between the menu and the hero --- */
.framer-1aovhwn,
[data-framer-name="Border"] {
  background-color: #ffffff !important;
}

/* --- "Talk with Nolan" card video framing ---------------------------------
   Source is 9:16 (720x1280) inside a ~4:5 card (95x120). With object-fit:
   cover the scale is driven by width, so roughly 49px of height is cropped
   and object-position decides which slice survives. Default 50% centred the frame and left a lot of empty sky above the
   head; 70% slides the window down so the headroom is cropped instead.

   Scoped to the file name on purpose: the hero video lives in the same
   section and an unscoped video rule would reframe that too. */
video[src$="nv-nolan.mp4"] {
  object-position: center 70% !important;
}

/* --- "Book 15-mins call" label ---------------------------------------------
   The button stacks two labels and swaps them on hover. The hover one is
   painted white while the button's own background computes to
   rgba(255,255,255,.88), so the text vanished into it. Both labels are
   pinned to a dark blue that reads against that surface in either state.

   Scoped by href: the same button component is used elsewhere with a dark
   background, where white is correct. */
a[href*="cal.com/noira-vision"] p,
a[href*="cal.com/noira-vision"] .framer-text {
  color: #0a0a0c !important;
  transition: color .2s ease !important;
}
a[href*="cal.com/noira-vision"]:hover p,
a[href*="cal.com/noira-vision"]:hover .framer-text {
  color: #6b6b78 !important;
}

/* --- "OWNER OF NOIRAVISION" on one line ------------------------------------
   The role sits in a 163px text block and the string measures ~165px, so it
   wrapped by two pixels. The card around it is 300px wide, so there is room -
   the block just has to stop wrapping. */
.framer-1lt3lil,
.framer-1lt3lil .framer-text {
  white-space: nowrap !important;
}

/* --- mobile hero: drop the subtitle ----------------------------------------
   On a phone it ran to five lines and pushed the headline and CTA down the
   page. Below the Framer phone breakpoint the headline carries the message
   instead - see nv/nv-mobile-copy.js, which swaps it to
   "Answered. Quoted. Booked." at the same width. */
@media (max-width: 809px) {
  section[data-framer-name="Hero"] [data-framer-name="Subtitle"] {
    display: none !important;
  }
}