/* Ukrany responsive overrides. Desktop >991px is untouched — everything lives in max-width queries.
   Inline styles are the source of truth, so overrides use !important. */

/* pass 18b: self-hosted Geist. No third-party font request — nothing leaves the origin.
   font-display: swap matches the behaviour of the Google css2 link this replaced. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Geist-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/GeistMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/GeistMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/GeistMono-Bold.woff2') format('woff2'); }

html, body { overflow-x: clip; }
[data-menu-toggle] { display: none; }

/* pass 15: backgrounds full-bleed on the section; content capped + centred on .r-inner */
.r-inner { max-width: 1920px; margin: 0 auto; padding: 112px 48px; box-sizing: border-box; }
.r-inner-flush { padding: 0 !important; }

/* form: never let a track inflate to a wide option/label (mobile overflow fix) */
.r-split > *, .r-formrow > *, #contact form > * { min-width: 0; }
#contact input:not([name="website"]), #contact select, #contact textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  font-family: 'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
}
#contact select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239AA4AE' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 28px !important;
}
@media (min-width: 768px) {
  [data-mobile-menu] { display: none !important; }
}

/* ------------------------------ TABLET ≤991 ------------------------------ */
@media (max-width: 991px) {
  .r-inner { padding: 88px 32px !important; }
  .r-inner-flush { padding: 0 !important; }
  .r-inner[style*="padding: 112px 48px 0"] { padding: 88px 32px 0 !important; }
  .r-inner[style*="padding: 0 48px 112px"] { padding: 0 32px 88px !important; }
  .r-inner[style*="padding: 128px 48px 112px"] { padding: 96px 32px 88px !important; }
  .r-inner[style*="padding: 64px 48px 96px"] { padding: 64px 32px 96px !important; }
  .r-heroinner { padding-left: 32px !important; padding-right: 32px !important; }
  .r-stripinner { padding: 0 32px !important; }

  [data-hdr-capsule] { gap: 20px !important; }
  [data-hdr-capsule] nav { gap: 16px !important; }

  .r-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .r-split > div[style*="position: sticky"] { position: static !important; }
  .r-footgrid { gap: 40px !important; }
  .r-testimonials { gap: 40px !important; }
  .r-services { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .r-services > div { justify-self: start !important; }
  .r-services > div:first-child { grid-column: 1 / -1; padding-right: 0 !important; }
  .r-logos { flex-wrap: wrap !important; row-gap: 24px !important; justify-content: flex-start !important; }

  .r-steps { grid-template-columns: minmax(100px, 2fr) minmax(220px, 4fr) minmax(220px, 6fr) !important; }
  .r-steps > div:first-child { padding: 48px 0 48px 32px !important; }
  .r-steps > div:nth-child(2) { padding: 88px 32px 0 !important; }

  .r-article { grid-template-columns: 1fr !important; gap: 40px !important; }
  .r-article > nav { position: static !important; }

  [data-oleh-portrait] { left: 0 !important; }
}

/* ------------------------------ MOBILE ≤767 ------------------------------ */
@media (max-width: 767px) {
  .r-inner { padding: 64px 20px !important; }
  .r-inner-flush { padding: 0 !important; }
  .r-inner[style*="padding: 112px 48px 0"] { padding: 64px 20px 0 !important; }
  .r-inner[style*="padding: 0 48px 112px"] { padding: 0 20px 64px !important; }
  .r-inner[style*="padding: 128px 48px 112px"] { padding: 72px 20px 64px !important; }
  .r-inner[style*="padding: 64px 48px 96px"] { padding: 64px 20px 96px !important; }
  .r-strip { height: 180px !important; }
  .r-stripinner { padding: 0 20px !important; }
  .r-spacer { height: 180px !important; }

  /* header: logo + MENU only; no floating elements */
  [data-hdr-capsule] nav { display: none !important; }
  [data-menu-toggle] { display: inline-flex !important; align-items: center; min-height: 44px; }
  /* header: capsule (mark + MENU) on the left, Let's talk on the right — always */
  a[aria-label="Let's talk"] {
    display: flex !important;
    top: 12px !important; right: 16px !important;
    padding: 8px 14px !important;
    gap: 10px !important;
  }
  a[aria-label="Let's talk"] span:not([aria-hidden]) { font-size: 12px !important; }
  [data-hdr-capsule] {
    left: 16px !important; right: auto !important; top: 12px !important;
    transform: none !important;
    background: var(--surface-4) !important;
    border: 1px solid var(--hairline) !important;
    padding: 10px 16px !important;
    gap: 14px !important;
  }
  [data-hdr-capsule] > a span { display: none !important; }   /* hide the "Ukrany" word, keep the mark */
  [data-guide-pill] { display: none !important; }

  /* hero: video off, static poster instead (battery/data); no pin */
  .r-hero { height: auto !important; }
  .r-hero > div { position: static !important; height: 100svh !important; padding: 0 !important; }
  .r-heroinner { padding: 0 20px !important; }
  [data-hero-lift] { transform: none !important; }
  .r-hero .hero-video { display: block !important; }
  .r-hero .hero-poster { display: block !important; }
  .r-herometa { grid-template-columns: 1fr !important; gap: 8px !important; }
  .r-herometa span { text-align: left !important; }
  .r-herometa span:last-child { display: none !important; }

  /* grids stack */
  .r-split, .r-services, .r-testimonials, .r-footgrid, .r-formrow, .r-compare { grid-template-columns: 1fr !important; }
  .r-split { gap: 32px !important; }
  .r-services { gap: 32px !important; }
  .r-testimonials { gap: 32px !important; }
  .r-footgrid { gap: 40px !important; }
  .r-compare { gap: 8px !important; }
  .r-formrow { gap: 16px !important; }
  #contact form { gap: 16px !important; }
  #contact form button[type="submit"] { width: 100%; }

  /* HIW steps: number above content above image */
  .r-steps { grid-template-columns: 1fr !important; }
  .r-steps > div:first-child { padding: 32px 20px 0 !important; }
  .r-steps > div:first-child p { position: static !important; }
  .r-steps > div:nth-child(2) { padding: 8px 20px 0 !important; }
  .r-steps > div:nth-child(2) > div { position: static !important; }
  .r-steps > div:nth-child(3) { min-height: 0 !important; margin-top: 24px; padding: 0 20px 32px !important; }
  .r-steps image-slot { min-height: 280px !important; }
  /* HIW steps: clips play on mobile too, tap to start */
  .r-stepmedia video { display: block !important; }
  .r-stepmedia { width: 100% !important; margin: 0 !important; }
  /* the clip plays on mobile now — the static poster would cover it */
  .r-steppos { display: none !important; }

  /* blog list rows stack */
  .r-bloglist { grid-template-columns: 1fr !important; gap: 8px !important; padding: 24px 0 !important; }
  .r-bloglist span[style*="text-align: right"] { text-align: left !important; }

  /* tap targets */
  a[data-btn], button, summary { min-height: 44px; box-sizing: border-box; }
  summary { align-items: center !important; }
  a[data-btn] { align-items: center; }
  footer a[href^="mailto"], footer a[href^="http"], .r-footgrid a[href^="mailto"], .r-footgrid a[href^="http"] {
    min-height: 44px !important; display: inline-flex !important; align-items: center;
  }
  /* broadened: any in-body mailto / linkedin link, plus the header logo link */
  a[href^="mailto"], a[href^="https://www.linkedin"] {
    min-height: 44px !important; display: inline-flex !important; align-items: center;
  }
  [data-hdr-capsule] > a { min-height: 44px; display: inline-flex; align-items: center; }
  /* legal footer bar: stack left, tappable links */
  .r-footlegal { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .r-footlegal-nav { flex-direction: column !important; gap: 0 !important; }
  .r-footlegal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  #contact input:not([name="website"]):not([type="checkbox"]), #contact select, #contact textarea { min-height: 44px !important; }
  #contact input[type="checkbox"] { width: 24px !important; height: 24px !important; flex: none; }
  #contact label:has(input[type="checkbox"]) { min-height: 44px; }
  /* consent precedes the action on mobile, full width */
  #contact form > div:last-of-type { flex-direction: column-reverse !important; align-items: stretch !important; }
  #contact form > div:last-of-type > label { width: 100%; }
  a[data-pp-tap] { min-height: 44px !important; display: inline-flex !important; align-items: center; }
  /* hero CTA spacing on mobile */
  .r-herocta { margin-top: 32px !important; }

  [data-oleh-portrait] { max-width: 100% !important; }
}

/* --------------------------- SMALL MOBILE ≤478 --------------------------- */
@media (max-width: 478px) {
  h1, h2, h3 { overflow-wrap: break-word; }
  .r-herocta { flex-direction: column; align-items: stretch; }
  .r-herocta a { width: 100%; }
  .r-bloglink { grid-template-columns: 1fr !important; gap: 8px !important; }
  .r-bloglink span[style*="text-align: right"] { text-align: left !important; }
}


/* ---- mobile refinements (added B11) ---- */
@media (max-width: 767px) {
  /* How It Works FAQ intro: portrait and copy side by side, tighter rhythm */
  .r-split > div:first-child { gap: 24px !important; }
  .r-split > div:first-child > span[style*="width:120px"] {
    width: 88px !important; height: 88px !important;
  }
  .r-split > div:first-child > div > p { margin-top: 16px !important; }
}


@media (max-width: 767px) {
  /* testimonials: attribution and the Clutch link stack, never side by side */
  figure figcaption {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }
}

/* ---- mobile fixes (B15) ---- */
@media (max-width: 991px) {
  /* grid blowout: 1fr has an auto minimum, so wide children stretch the track */
  .r-article { grid-template-columns: minmax(0, 1fr) !important; }
  /* grid items default to min-width:auto, which lets long content stretch the
     track past the viewport — reset it on every descendant, not just children */
  .r-article, .r-article * { min-width: 0 !important; }
  .r-article [style*="grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* wide tables scroll horizontally inside their own box instead of
     stretching the page */
  .r-article table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .r-article table thead, .r-article table tbody { display: table; width: max-content; min-width: 100%; }
  .r-article figure { max-width: 100%; overflow-x: auto; }
  .r-article img, .r-article svg { max-width: 100%; height: auto; }
}

@media (max-width: 767px) {
  /* MENU and LET'S TALK: identical height and padding */
  [data-hdr-capsule] {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  a[aria-label="Let's talk"] {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* About Us: portrait beside the copy, never over it */
  /* portrait sits inside the byline row, between its two hairlines */
  [data-oleh-portrait] {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 68px !important;
    flex: 0 0 68px !important;
    aspect-ratio: 4 / 5 !important;
    align-self: center !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border-radius: 4px !important;
  }
  .r-person-row { padding: 0 !important; align-items: center !important; }
  /* the byline row becomes the positioning context, with room reserved */


  /* readable rhythm on long pages */
  .r-article { gap: 32px !important; }
  .r-article > nav { margin-bottom: 8px !important; }
}

/* article byline: name block optically centred against the avatar */
.r-article-byline, article header a[href*="linkedin.com/in"] { vertical-align: middle; }


/* ---- mobile rhythm (B16) ---- */
@media (max-width: 767px) {
  /* headings: a little more air above, tighter below, so they read as blocks */
  h1 { margin-bottom: 20px !important; line-height: 1.08 !important; }
  h2 { margin-bottom: 16px !important; line-height: 1.12 !important; }
  h1 + p, h2 + p { margin-top: 0 !important; }

  /* section padding: consistent everywhere instead of 64px on some, 40 on others */
  .r-inner { padding: 56px 20px !important; }

  /* blog: the intro block left a 128px void before the first post */
  a.r-bloglist { padding: 24px 0 !important; gap: 8px !important; }
  /* the intro and the list are one block — don't stack two section paddings */
  .r-blogsection .r-inner { padding-top: 8px !important; }

  /* article body: comfortable measure and spacing */
  .r-article p { margin-bottom: 20px !important; }
  .r-article h2, .r-article h3 { margin-top: 36px !important; }
}

/* ---- clear the fixed header (B17) ---- */
@media (max-width: 767px) {
  /* the capsule sits at top:12 and is 52 tall, so content must start below 64 */
  main > section:first-of-type > .r-inner,
  body > section:first-of-type > .r-inner { padding-top: 96px !important; }

  /* the hero is full-bleed and positions its own text — leave it alone */
  .r-hero .r-inner { padding-top: 0 !important; }

  /* page titles: consistent air above and below */
  h1 { margin-top: 0 !important; }
}