/* Apple-style "liquid glass" pass, applied on top of the Framer design.
 *
 * Style language from the MockFlow "Apple Liquid Glass" skill (glass slabs,
 * hairline light edge, soft ambient shadow, glossy pills, inset inputs,
 * #007AFF accent), adapted to this site's dark palette.
 *
 * Two rules keep this from breaking the design:
 *
 *   1. NEVER set `background-color` or `color`. Every element keeps its own
 *      fill and its own text colour, so contrast is whatever the designer
 *      chose. Only `background-image` (the glass sheen), radius, blur, ring
 *      and shadow are layered on top. Flooding pills with white made their
 *      labels unreadable; this approach cannot.
 *   2. Borders are inset box-shadow rings, not `border`, so nothing reflows.
 */

:root {
  --lg-blur: 22px;
  --lg-sat: 165%;
  --lg-ring: rgba(255, 255, 255, 0.16);
  --lg-ring-strong: rgba(255, 255, 255, 0.24);
  --lg-sheen: rgba(255, 255, 255, 0.30);
  --lg-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --lg-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ── Dark glass slabs: service panels and benefit cards ───────────────── */
/* The "metric" stats are deliberately NOT in this list. They sit straight on
   the Impact section's rock photograph, where a slab is wrong, and matching
   `[data-framer-name="Metric card container"] > *` boxed whatever happened to
   be a direct child - the two 12px divider dots today, and the whole stat
   card (a rounded rectangle around each number) whenever the DOM nesting
   flattens, which is what Safari does with the display:contents wrappers. */
[data-framer-name="Heading + list"],
[data-framer-name="Right part"],
[data-framer-name="Benefit card"] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-radius: 24px !important;
  box-shadow:
    inset 0 0 0 1px var(--lg-ring),
    inset 0 1px 0 var(--lg-sheen),
    var(--lg-shadow-soft) !important;
}

/* ── "Who we are" card: grey liquid glass slab matching other sections ── */
section[data-framer-name="Introduction"],
.framer-8ba0z1 {
  background-color: transparent !important;
}

[data-framer-name="Text + Brand logos"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 0 0 1px var(--lg-ring),
    inset 0 1px 0 var(--lg-sheen),
    var(--lg-shadow) !important;
}

[data-framer-name="Text + Brand logos"][data-border="true"]:after,
[data-framer-name="Text + Brand logos"] [data-border="true"]:after {
  display: none !important;
}

/* ── "Who we are" sizing: ~25% more compact height across viewports ──── */
section[data-framer-name="Introduction"] [data-framer-name="Container"],
section[data-framer-name="Introduction"] .framer-48fw9c {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

[data-framer-name="Text + Brand logos"] {
  padding: 66px 80px !important;
  gap: 40px !important;
}

[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] {
  gap: 28px !important;
}

[data-framer-name="Text + Brand logos"] .framer-x4s9t5-container p,
[data-framer-name="Text + Brand logos"] .framer-x4s9t5-container span {
  font-size: 68px !important;
  line-height: 1.05em !important;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  section[data-framer-name="Introduction"] [data-framer-name="Container"],
  section[data-framer-name="Introduction"] .framer-48fw9c {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [data-framer-name="Text + Brand logos"] {
    padding: 60px 50px !important;
    gap: 32px !important;
  }
  [data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] {
    gap: 24px !important;
  }
  [data-framer-name="Text + Brand logos"] .framer-x4s9t5-container p,
  [data-framer-name="Text + Brand logos"] .framer-x4s9t5-container span {
    font-size: 52px !important;
    line-height: 1.05em !important;
  }
}

@media (max-width: 809.98px) {
  section[data-framer-name="Introduction"] [data-framer-name="Container"],
  section[data-framer-name="Introduction"] .framer-48fw9c {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  [data-framer-name="Text + Brand logos"] {
    padding: 44px 20px !important;
    gap: 28px !important;
  }
  [data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] {
    gap: 22px !important;
  }
  [data-framer-name="Text + Brand logos"] .framer-x4s9t5-container p,
  [data-framer-name="Text + Brand logos"] .framer-x4s9t5-container span {
    font-size: 34px !important;
    line-height: 1.08em !important;
  }
}

/* Category label: "{Who we are}" / "{Kdo jsme}" */
[data-framer-name="Text + Brand logos"] .framer-ymvuvu p,
[data-framer-name="Text + Brand logos"] .framer-styles-preset-1b37gw1 {
  --framer-text-color: rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Headline: "BUILDING BOLD BRANDS THAT REFUSE TO BLEND IN" */
[data-framer-name="Text + Brand logos"] .framer-x4s9t5-container,
[data-framer-name="Text + Brand logos"] .framer-x4s9t5-container p,
[data-framer-name="Text + Brand logos"] .framer-x4s9t5-container span,
[data-framer-name="Text + Brand logos"] [data-char],
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] h1,
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] h2,
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] h3 {
  color: var(--token-de7f27a3-ada7-4af5-b900-ae12f6454d28, rgb(255, 255, 255)) !important;
  --framer-text-color: var(--token-de7f27a3-ada7-4af5-b900-ae12f6454d28, rgb(255, 255, 255)) !important;
}

/* Subtitle paragraph */
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] .framer-1m68s6w,
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] .framer-1m68s6w p,
[data-framer-name="Text + Brand logos"] [data-framer-name="Text container"] .framer-styles-preset-3u90h5 {
  color: rgba(255, 255, 255, 0.65) !important;
  --framer-text-color: rgba(255, 255, 255, 0.65) !important;
}

/* Primary button: white glossy pill with dark text matching other sections */
[data-framer-name="Text + Brand logos"] a[data-framer-name="Primary button"] {
  background-color: var(--token-de7f27a3-ada7-4af5-b900-ae12f6454d28, rgb(255, 255, 255)) !important;
}

[data-framer-name="Text + Brand logos"] a[data-framer-name="Primary button"] p,
[data-framer-name="Text + Brand logos"] a[data-framer-name="Primary button"] span {
  --text: var(--token-da44470c-4124-4f55-b997-5c0d1a6f2ec7, rgb(0, 0, 0)) !important;
  color: var(--token-da44470c-4124-4f55-b997-5c0d1a6f2ec7, rgb(0, 0, 0)) !important;
  text-shadow: 0 19.2px 0 var(--text) !important;
}

/* ── Blog artwork: rounded corners only ───────────────────────────────── */
/* The blog row is edge-to-edge: each card's copy sits flush against the
   row's left and bottom edges, so a rounded, clipped *container* sliced the
   text at the corners. Rounding just the artwork keeps the glass feel with
   nothing to clip — the container stays unclipped, as designed. */
[data-framer-name="Blog container"] [data-framer-name="Image container"],
[data-framer-name="Blog - big"] [data-framer-name="Image container"] {
  border-radius: 16px !important;
  overflow: hidden;
}

/* ── Testimonial cards: light glass slabs ─────────────────────────────── */
/* These sit on the white section: flat #f5f5f5 rectangles with a 4px radius
   read as unfinished next to the glass cards elsewhere. Keep the fill, add
   the radius, a hairline ring and a soft ambient shadow. */
[data-framer-name="Testimonials"] [data-framer-name="Rating card"],
[data-framer-name="Testimonials"] [data-framer-name="Content"] [data-framer-name="Desktop"] {
  border-radius: 20px !important;
  box-shadow:
    inset 0 0 0 1px rgba(17, 17, 17, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 44px rgba(17, 17, 17, 0.10) !important;
}

/* ── Pills: a glossy top highlight over their own fill ────────────────── */
a[data-framer-name="Primary button"],
[data-framer-name="Default"] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--lg-ring-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

a[data-framer-name="Primary button"]:hover,
[data-framer-name="Default"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 34px rgba(0, 0, 0, 0.45) !important;
}

/* Inside the nav the pill's drop shadow has nowhere to go: the bar is a 43px
   tall clipping row, so the shadow was sliced off at the bar's top and bottom
   edges and read as a grey band behind the button. The pill keeps its sheen
   and hairline ring; the outer shadow is dropped only where it would be cut. */
.framer-Qc9OT [data-framer-name="Primary button"],
.framer-Qc9OT [data-framer-name="Default"] {
  box-shadow:
    inset 0 0 0 1px var(--lg-ring-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.framer-Qc9OT [data-framer-name="Primary button"]:hover,
.framer-Qc9OT [data-framer-name="Default"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ── Sticky Top Navigation Bar with Liquid Glass Effect ───────────────── */
/* Navarro.ro style: sticky / fixed at top across all viewports and pages,
   with frosted liquid glass blur, subtle specular sheen, hairline bottom border,
   and ambient drop shadow so content flows underneath beautifully. */

html {
  scroll-padding-top: 85px;
}

.framer-o2v6Q .framer-1r1rh13-container,
.framer-1r1rh13-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.framer-1r1rh13-container .framer-FRMF4 {
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(0px) saturate(100%) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition:
    background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-image 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-bottom-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Glassmorphism state: activated once scrolled past the hero section */
.framer-1r1rh13-container .framer-FRMF4.is-past-hero {
  background-color: rgba(13, 13, 14, 0.72) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(13, 13, 14, 0.72) 100%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
  backdrop-filter: blur(50px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Remove Framer's dummy black background overlay & duplicate pseudo border */
.framer-FRMF4 .framer-1p9j0qc {
  display: none !important;
}

.framer-FRMF4[data-border=true]:after,
.framer-FRMF4 [data-border=true]:after {
  display: none !important;
}

/* Mobile & Tablet open menu overlay */
.framer-FRMF4.framer-v-1odcfgd {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(10, 10, 12, 0.94) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(10, 10, 12, 0.94) 100%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
  backdrop-filter: blur(50px) saturate(180%) !important;
}


/* ── Form fields: inset glass, still legible on the white card ────────── */
/* The visible field is `.framer-form-input-wrapper` (the box that carries
   the fill and radius); `.framer-form-input` is only the 19px-tall text row
   inside it. Styling the inner input drew a second pill inside the first —
   the treatment belongs on the wrapper, and the input itself stays clear. */
.framer-form-input-wrapper {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.35) 100%) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 2px 5px rgba(0, 0, 0, 0.10) !important;
}

.framer-form-input {
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.framer-form-input-wrapper:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(0, 122, 255, 0.55),
    inset 0 2px 5px rgba(0, 0, 0, 0.10),
    0 0 0 3px rgba(0, 122, 255, 0.18) !important;
  outline: none !important;
}

/* ── Contact card: rounded slab with ambient shadow ───────────────────── */
[data-framer-name="Form container"] {
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
}

/* The black Submit pill's default halo is tuned for dark sections; on the
   white card it smears into a grey ring, so it gets a tighter shadow here. */
[data-framer-name="Form container"] [data-framer-name="Default"] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

/* Checkbox circle in contact form (Souhlasím se zasíláním novinek) */
.framer-form-boolean-input {
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

.framer-form-boolean-input::after {
  border-radius: 50% !important;
  border: 1.5px solid rgba(0, 0, 0, 0.28) !important;
  box-sizing: border-box !important;
  inset: 0 !important;
  transition: border-color 0.18s ease !important;
}

.framer-hibw8j {
  cursor: pointer !important;
}

.framer-hibw8j:hover .framer-form-boolean-input::after,
.framer-form-boolean-input:hover::after {
  border-color: rgba(0, 0, 0, 0.6) !important;
}

.framer-form-boolean-input:checked {
  background-color: #000000 !important;
}

.framer-form-boolean-input:checked::after {
  border-color: #000000 !important;
}

/* ── Portfolio section (our own markup) ───────────────────────────────── */
#selected-works .works-card {
  box-shadow:
    inset 0 0 0 1px var(--lg-ring),
    var(--lg-shadow) !important;
}

#selected-works .works-card:hover {
  box-shadow:
    inset 0 0 0 1px var(--lg-ring-strong),
    0 26px 70px rgba(0, 0, 0, 0.6) !important;
}

#works-controls button,
.works-indicator {
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px var(--lg-ring),
    0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

/* The circular arrow button on each portfolio card: it flips to solid white
   on hover, which read as a flat disc on the cards' coloured backdrops. */
#selected-works .work-card-cta,
.works-card:hover .work-card-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

/* Full-bleed backdrops stay untouched. */
[data-framer-name="Dark overlay"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}