/* Sticky header clone (shared by all pages, built by js/site.js) */
.sticky-full-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 999999 !important;
  background-color: #0a0b34 !important;
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
  padding-top: env(safe-area-inset-top);
}

.sticky-full-nav.is-visible {
  transform: translateY(0);
}

.sticky-full-nav,
.sticky-full-nav *,
.sticky-full-nav *::before,
.sticky-full-nav *::after {
  box-sizing: border-box;
}

.sticky-full-nav .full-nav,
.sticky-full-nav .pre-nav-main,
.sticky-full-nav .Navbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.sticky-full-nav > .full-nav {
  width: 100% !important;
}

/* ---------------------------------------------------------------------
   Mobile navigation
   Shared by the in-flow header and the sticky clone built by js/site.js
   (both use identical .navigation-grid markup). Below 991px the link
   row collapses into a hamburger per data-collapse="medium"; the rules
   below give logo/hamburger/CTA sane spacing and give the opened menu
   real styling instead of Webflow's unstyled grey default.
   ------------------------------------------------------------------- */
.nav-mobile-cta {
  display: none;
}

/* .full-nav's z-index:1 (from the base stylesheet) was never a problem
   closed, since the header never overlapped hero content vertically.
   .hero-section has position:relative but no z-index of its own, so it
   never becomes a stacking context — its child .hero-layout-box._1
   (z-index:3) ends up compared directly against .full-nav at the same
   level and wins. That only surfaces once the opened mobile menu
   extends the header down into the hero's text, which then paints on
   top of the menu. The header should always win that comparison. */
.full-nav {
  z-index: 20;
}

@media (max-width: 991px) {
  /* Header row stays [logo] ... [hamburger] at phone/tablet widths —
     there isn't room for the phone-number CTA next to the menu button,
     so it moves inside the opened menu instead (.nav-mobile-cta). */
  .navigation-grid > .cta-button {
    display: none;
  }

  .nav-mobile-cta {
    display: flex;
    width: 100%;
    margin-top: 20px;
  }

  .w-nav-button {
    color: #fff;
  }

  .w-nav-button.w--open {
    background-color: #ffffff1a;
    border-radius: 4px;
  }

  /* Opened dropdown cosmetics: shared by both open mechanisms. Position
     is deliberately NOT set here — webflow.js already positions the
     original menu correctly (see note below), and redeclaring
     position/top/left/right at this same specificity would fight its
     own more-specific ".w-nav-overlay [data-nav-menu-open]" rule. */
  .navbar .w-nav-menu[data-nav-menu-open],
  .sticky-full-nav .w-nav-menu.cs-open {
    min-width: 0;
    background-color: #0a0b34;
    text-align: left;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - 96px);
    padding: 8px 24px 24px;
    box-shadow: 0 16px 32px -8px #00000059;
  }

  .navbar .w-nav-menu[data-nav-menu-open] .nav-link,
  .sticky-full-nav .w-nav-menu.cs-open .nav-link {
    display: block;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid #ffffff1f;
  }

  /* The sticky clone has no live Webflow bindings, so .cs-open needs
     the full positioning that webflow.js's own [data-nav-menu-open]
     handling would otherwise provide for the original nav. */
  .sticky-full-nav .w-nav-menu.cs-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Only the clone's overlay wrapper gets suppressed: webflow.js
     dynamically wraps the *original* menu in a .w-nav-overlay at
     runtime and relies on it to show the open menu, so hiding it there
     would break the native toggle. The clone has no live Webflow
     bindings and opens via .cs-open directly on .w-nav-menu instead,
     so any leftover overlay wrapper it inherited from cloning needs to
     stay out of the way. */
  .sticky-full-nav .w-nav-overlay {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .full-nav > .pre-nav-main {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   Hero background overlay
   The base .code-embed (the full-bleed radial-gradient vignette behind
   the hero text) is positioned with inset:0 so its wrapping div always
   matches the hero's box exactly — but the inline SVG inside it still
   carries its original width="1920" height="931" and no
   preserveAspectRatio, so browsers used the default "meet" behavior:
   scale uniformly to fit, then letterbox. Against a narrow/tall mobile
   hero that shrinks the gradient to a thin band with transparent space
   above and below it, instead of covering the section, which is why it
   looked like a hard-edged rectangle rather than a smooth vignette.
   Forcing width/height to 100% only fixes the SVG's own box; it also
   needs preserveAspectRatio="none" (set directly on the element, since
   that isn't a CSS property) to actually stretch the artwork to fill
   it. This targets only the base .code-embed — the ._1/._2/._3
   variants are deliberately small corner accents (top-left squares,
   bottom-right glow, blurred bar) positioned with inset:auto on two
   sides, not full-bleed overlays, so they keep their natural size.
   .contact-overlay (the same full-bleed vignette pattern, used behind
   the #kontakt CTA section on index.html/za-mene.html and behind the
   whole hero on contact.html) has the identical issue and gets the
   same treatment; contact.html's copy additionally had an invalid
   viewBox ("0 0 1920 100%" — viewBox requires numbers, not a
   percentage) which is fixed directly in that page's markup. */
.code-embed:not(._1):not(._2):not(._3) svg,
.code-embed-3 svg,
.contact-overlay svg {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------
   Image cropping
   Neither the hero portrait nor the map image had an object-fit, so the
   browser used the default (`fill`): whenever the box's aspect ratio
   didn't match the source image's, the photo was stretched/squashed
   instead of cropped. On desktop the boxes happen to be close to each
   image's natural ratio so it wasn't obvious; stacked to a full-width
   mobile box the mismatch is large. `cover` crops instead of distorting
   at every size, so this is a correctness fix, not a mobile-only patch.
   ------------------------------------------------------------------- */
.hero-layout-box._2 .image {
  object-fit: cover;
  object-position: center top;
}

.map-img {
  width: 100%;
}

/* Accessibility: visible keyboard focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #9998ff;
  outline-offset: 2px;
  border-radius: 2px;
}

.cta-button:focus-visible {
  outline-offset: 3px;
}

.language-link[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}


.services-grid-box,
.process-grid-box {
  transition: transform .3s cubic-bezier(.216, .154, .25, 1), background-color .3s ease, border-color .3s ease;
}

.services-grid-box:hover {
  transform: translateY(-4px);
  background-color: #ffffff17;
}

.process-grid-box:hover {
  transform: translateY(-4px);
}

.social-icon-box {
  transition: transform .25s ease, opacity .25s ease;
}

.social-icon-box:hover {
  transform: translateY(-2px);
  opacity: .85;
}

.about-layout-box.image,
.meet-me-layout-box {
  overflow: hidden;
}

.about-image,
.meet-me-image {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.about-layout-box.image:hover .about-image,
.meet-me-layout-box:hover .meet-me-image {
  transform: scale(1.02);
}

/* Scroll-reveal entrance animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Form feedback states */
.text-field.is-invalid {
  border: 1px solid #e0454a;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===================================================================
   Responsive layout fixes
   The Webflow export only ever styled the desktop breakpoint: every
   two-column grid stayed two columns down to 320px, the hero locked
   itself to 100vh with an 85vh image stacked underneath it, the footer
   had a fixed 400px-wide column with no wrap, and headings never scaled
   down. This section brings tablet/mobile up to the same standard.
   =================================================================== */

/* .container has no horizontal padding at any width (only an inert
   max-width) — on desktop that's masked because .w-layout-blockcontainer
   sits inside it and is itself narrower than the viewport, but that
   max-width is overridden to `none` at 767px and was never present on
   sections (like the header) that use .container directly. Below 991px
   that leaves text, form fields and the nav flush against the screen
   edges. Giving .container itself a real gutter fixes every section at
   once instead of patching each one individually. */
@media (max-width: 991px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 479px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 991px) {
  .padding-global {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .padding-medium {
    padding-top: 150px;
    padding-bottom: 64px;
  }

  .cta-padding {
    padding-top: 150px;
    padding-bottom: 64px;
  }

  .main-h1 {
    font-size: 2.75rem;
  }

  .main-h2 {
    font-size: 2.25rem;
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .full-nav .pre-nav-text {
    font-size: 12px;
  }

  /* .heading-wrapper (services section title + intro paragraph) is a
     row with each side capped at its own desktop max-width (485px /
     580px) — comfortable at 1520px, but with no wrap/stack rule the
     two blocks just got squeezed into whatever width remained,
     wrapping every word onto its own line. */
  .heading-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .heading-inner-wrapper,
  .services-p-wrapper {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .padding-global {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .padding-medium {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .cta-padding {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .full-nav > .pre-nav-main {
    display: none;
  }

  .main-h1 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }

  .main-h2 {
    font-size: 1.875rem;
    margin-bottom: 1.25rem;
  }

  .cta-h3 {
    font-size: 1.5rem;
  }

  /* Hero: a fixed 100vh section plus an 85vh image only works with the
     desktop two-column layout. Stacked on mobile it should size itself
     from its own content instead of forcing a full viewport height
     (which either clips content or leaves a dead gap before the next
     section, depending on how much text wraps). */
  .hero-section {
    height: 85vh;
    padding-top: 132px;
    padding-bottom: 40px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    place-items: stretch;
    row-gap: 32px;
  }

  .hero-layout-box._1 {
    padding-bottom: 0;
  }

  .hero-layout-box._2 {
    width: 100%;
  }

  .hero-layout-box._2 .image {
    width: 100%;
    max-height: 46vh;
    display: none;
  }

  .about-layout,
  .services-grid-wrapper,
  .faq-layout,
  .contact-grid,
  .cta-grid,
  .meet-me-layout {
    grid-template-columns: 1fr;
  }

  .about-layout-box.image {
    padding-right: 0;
  }

  .contact-grid-box._1 {
    padding-right: 0;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .footer-layout {
    flex-wrap: wrap;
    row-gap: 2.5rem;
  }

  .footer-layout-box._2 {
    width: 100%;
  }

  .footer-layout-box._3 {
    flex-wrap: wrap;
    row-gap: 2rem;
  }

  .footer-links-wrapper {
    max-width: none;
  }
}

@media (max-width: 479px) {
  .main-h1 {
    font-size: 1.875rem;
  }

  .main-h2 {
    font-size: 1.625rem;
  }

  .fields-row {
    grid-template-columns: 1fr;
  }

  .contact-rows-wrapper {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .not-found-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===================================================================
   Performance: responsive background images
   Webflow already generated smaller variants of every background photo
   on export (-p-500/800/1080/1600) but the CSS never used them, so every
   visit downloaded the full-size original (1.1MB+) even on phones. The
   services and contact-CTA sections sit under a dark overlay in the
   markup (.code-embed-3 / .contact-overlay), so the smaller, more
   compressed variants are visually indistinguishable while cutting
   the payload by 80-95%.
   =================================================================== */
.services-section {
  background-image: url('../images/uslugi-bg-p-1600.jpg');
}

.cta-hero {
  background-image: url('../images/contactbg-p-1600.jpg');
}

.about-hero {
  background-image: url('../images/zamene-p-1600.jpg');
}

.cta-section {
  background-image: url('../images/abdusamed-footer-image-p-1600.avif');
}

@media (max-width: 991px) {
  .services-section {
    background-image: url('../images/uslugi-bg-p-1080.jpg');
  }

  .cta-hero {
    background-image: url('../images/contactbg-p-1080.jpg');
  }

  .about-hero {
    background-image: url('../images/zamene-p-1080.jpg');
  }

  .cta-section {
    background-image: url('../images/abdusamed-footer-image-p-1080.avif');
  }
}

@media (max-width: 767px) {
  .services-section {
    background-image: url('../images/uslugi-bg-p-800.jpg');
  }

  .cta-hero {
    background-image: url('../images/contactbg-p-800.jpg');
  }

  .about-hero {
    background-image: url('../images/zamene-p-800.jpg');
  }

  .cta-section {
    background-image: url('../images/abdusamed-footer-image-p-800.avif');
  }
}

@media (max-width: 479px) {
  .services-section {
    background-image: url('../images/uslugi-bg-p-500.jpg');
  }

  .cta-hero {
    background-image: url('../images/contactbg-p-500.jpg');
  }

  .about-hero {
    background-image: url('../images/zamene-p-500.jpg');
  }

  .cta-section {
    background-image: url('../images/abdusamed-footer-image-p-500.avif');
  }
}

/* 404 page: every other page places the header over a dark hero/banner
   section, which is what makes the light-colored logo and nav links
   readable (the header itself is transparent by design). The 404 page
   goes straight into the plain white .not-found-section, so the logo
   and nav were rendering white-on-white. This isn't mobile-specific —
   it was already broken at every width — but it's the same header
   component this pass is fixing, so it gets the same dark band the
   other pages already have behind their header. */
.not-found-section {
  background-image: linear-gradient(to bottom, #0a0b34 150px, #fff 150px);
}

/* Respect user motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .sticky-full-nav {
    transition: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cta-button:hover,
  .services-grid-box:hover,
  .process-grid-box:hover,
  .social-icon-box:hover {
    transform: none;
  }
}