/* Omeiro hero buttons: ONE size, font and animation on every page (same look as the header "Contact" button).
   Load on every public page as the LAST stylesheet in <head>:
     <link rel="stylesheet" href="/assets/css/omeiro-buttons.css?v=20261019e">
   It only touches:
   - buttons inside the hero (the section / header that holds the page's <h1>; on job pages the application form), and
   - the small buttons in the bar at the top of the hero (main > nav: "Home", "All products", "Contact").
   Button kinds (existing class names, nothing to change in the HTML):
     solid  : .btn-burgundy-cta, .btn-sweep, .btn-primary            -> burgundy gradient + soft pulse
     glass  : .btn-glass-cta                                          -> see-through white (on dark heroes)
     outline: .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary    -> white with burgundy border
   All: shine sweep on hover + 2px lift. Phones (max 640px): full-width, text may wrap, never overflow. */
:root { --omz-b1: #590029; --omz-b2: #3d001c; --omz-b1h: #6e0033; --omz-b2h: #4a0022; --omz-dark: #0A0F1C; --omz-ease: cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes omzPulse { 0% { box-shadow: 0 6px 18px -6px rgba(89,0,41,.45), 0 0 0 0 rgba(89,0,41,.35); } 70% { box-shadow: 0 6px 18px -6px rgba(89,0,41,.45), 0 0 0 10px rgba(89,0,41,0); } 100% { box-shadow: 0 6px 18px -6px rgba(89,0,41,.45), 0 0 0 0 rgba(89,0,41,0); } }

/* ---------- base: every hero button ---------- */
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  min-height: 52px !important; height: auto !important; padding: 14px 26px !important; margin: 0;
  border-radius: 12px !important; box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 12.5px !important; font-weight: 900 !important; line-height: 1.25 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; text-align: center !important;
  white-space: nowrap !important; text-decoration: none !important;
  position: relative !important; overflow: hidden !important; isolation: isolate; cursor: pointer;
  transform: none; filter: none !important; -webkit-mask-image: none !important;
  transition: transform .4s var(--omz-ease), box-shadow .4s var(--omz-ease), background .3s ease, color .3s ease, border-color .3s ease !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary) > * { position: relative; z-index: 2; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary)::before { display: none !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary)::after {
  content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: -120% !important; right: auto !important; bottom: auto !important;
  width: 60% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; opacity: 1 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important;
  transform: skewX(-25deg) !important; transition: left .65s var(--omz-ease) !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):hover::after { left: 160% !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):hover { transform: translateY(-2px) !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):focus-visible { outline: 3px solid rgba(89,0,41,.35) !important; outline-offset: 3px !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary) i { font-size: 1em !important; }

/* ---------- solid (burgundy) ---------- */
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary):not(.btn-glass-cta):not(.btn-cloud-sweep):not(.btn-outline-sweep) {
  background: linear-gradient(135deg, var(--omz-b1) 0%, var(--omz-b2) 100%) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important; animation: omzPulse 2.8s infinite !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary):not(.btn-glass-cta):not(.btn-cloud-sweep):not(.btn-outline-sweep):hover {
  background: linear-gradient(135deg, var(--omz-b1h) 0%, var(--omz-b2h) 100%) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary):not(.btn-glass-cta):not(.btn-cloud-sweep):not(.btn-outline-sweep) :is(span, i, svg) { color: #fff !important; }

/* ---------- glass (dark heroes) ---------- */
:is(section:has(h1), header:has(h1), #omeiroApplyForm) .btn-glass-cta {
  background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: none !important; box-shadow: none !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) .btn-glass-cta :is(span, i, svg) { color: inherit !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) .btn-glass-cta:hover { background: #fff !important; color: var(--omz-dark) !important; border-color: #fff !important; box-shadow: 0 14px 28px -10px rgba(255,255,255,.35) !important; }

/* ---------- outline ---------- */
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):not(.btn-glass-cta) {
  background: #fff !important; color: var(--omz-b1) !important; border: 1.5px solid var(--omz-b1) !important; animation: none !important; box-shadow: none !important;
}
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):not(.btn-glass-cta) :is(span, i, svg) { color: inherit !important; }
:is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):not(.btn-glass-cta):hover { background: var(--omz-b1) !important; color: #fff !important; box-shadow: 0 14px 28px -10px rgba(89,0,41,.45) !important; }

/* ---------- the bar at the top of the hero: same position and height on every page ----------
   On 17 pages the bar had extra padding (py-6) and long labels wrapped to 2 lines, so the pills covered the badge and
   the heading on phones and tablets. Now: no extra padding, pills are 40px high and stay on one line. */
:is(main, body) > nav.absolute { padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; }
:is(main, body) > nav :is(a, button) {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  height: 40px !important; min-height: 40px !important; padding: 0 14px !important; box-sizing: border-box !important;
  white-space: nowrap !important; line-height: 1 !important; max-width: 100%;
}
/* labels inside the pills (spans with their own text size) use the pill's size, so both pills match */
:is(main, body) > nav :is(a, button) :not(i):not(svg):not(svg *) { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: 1 !important; }

/* ---------- small buttons in the bar at the top of the hero (Home / All products / Contact) ---------- */
:is(main, body) > nav :is(a, button) {
  border-radius: 12px !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .4s var(--omz-ease), background .3s ease, color .3s ease, border-color .3s ease !important;
}
:is(main, body) > nav :is(a, button)::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-25deg); transition: left .65s var(--omz-ease);
}
:is(main, body) > nav :is(a, button):hover::after { left: 160%; }
:is(main, body) > nav :is(a, button):hover { transform: translateY(-2px) !important; }

/* ---------- sweep buttons on ALL pages (filters, "Load more", "Return home"...) ----------
   A later rule on many pages put the colour fill ON TOP of the text (z-index: 1 !important) and stopped the selected
   filter from filling, so on hover the text disappeared and the selected filter was white text on white.
   The fill now always sits behind the text, and the selected (.active) button is filled. */
html body .btn-outline-sweep { isolation: isolate !important; }
html body .btn-outline-sweep::before { z-index: -1 !important; }
html body .btn-outline-sweep:is(:hover, :focus-visible, .active)::before { transform: scaleX(1) !important; }
html body .btn-outline-sweep > * { position: relative; z-index: 1; }
/* white sweep buttons (on dark backgrounds): when the white fill comes in, the text turns dark */
html body .btn-outline-sweep.sweep-white:is(:hover, :focus-visible, .active),
html body .btn-outline-sweep.sweep-white:is(:hover, :focus-visible, .active) * { color: #0A0F1C !important; }
/* burgundy sweep buttons: when the burgundy fill comes in, the text turns white */
html body .btn-outline-sweep.sweep-burgundy:is(:hover, :focus-visible, .active),
html body .btn-outline-sweep.sweep-burgundy:is(:hover, :focus-visible, .active) * { color: #fff !important; }
/* yellow buttons (outside the hero): dark text, as the button's own class asks (a shared rule forced white) */
html body .btn-sweep:is([class*="FACC15"], [class*="facc15"], .bg-yellow-400),
html body .btn-sweep:is([class*="FACC15"], [class*="facc15"], .bg-yellow-400) * { color: #0A0F1C !important; }

/* ---------- room under the last hero button ----------
   Heroes with only 40px at the bottom (pb-10: Services, About, Industries, Reviews, Tech stack, FAQ...) put the last
   button right against the edge / the next section. They get the same breathing room as the other heroes. */
:is(section:has(h1), header:has(h1))[class*="pb-10"] { padding-bottom: 72px !important; }
@media (max-width: 640px) { :is(section:has(h1), header:has(h1))[class*="pb-10"] { padding-bottom: 56px !important; } }

/* ---------- header buttons: same pulse + sweep timing ---------- */
.oh-root .oh-cta { animation-name: omzPulse !important; animation-duration: 2.8s !important; }
.oh-root .oh-cta.oh-cta--calm { animation: none !important; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 52px !important;
    padding: 14px 18px !important; font-size: 12px !important; letter-spacing: .05em !important; white-space: normal !important;
  }
  /* rows of hero buttons stack neatly with the same gap */
  :is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(div, p):has(> :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary)) {
    flex-wrap: wrap !important; gap: 12px !important; max-width: 100% !important;
  }
  :is(main, body) > nav.absolute { gap: 10px !important; }
  :is(main, body) > nav :is(a, button) { padding: 0 12px !important; font-size: 10.5px !important; letter-spacing: .04em !important; max-width: calc(50vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  :is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary), .oh-root .oh-cta, :is(main, body) > nav :is(a, button) { animation: none !important; transition: none !important; }
  :is(section:has(h1), header:has(h1), #omeiroApplyForm) :is(.btn-burgundy-cta, .btn-sweep, .btn-primary, .btn-glass-cta, .btn-cloud-sweep, .btn-outline-sweep, .btn-secondary):hover, :is(main, body) > nav :is(a, button):hover { transform: none !important; }
}

/* ===== Phones & small tablets: text that was set to "never wrap" (badges, small headings, buttons) may wrap
   instead of being cut off by the card or running off the screen. (2026-10-18) ===== */
@media (max-width: 767px) {
  .w-max:not(svg):not(img):not(i) { max-width: 100%; white-space: normal; }
  .w-max.rounded-full { text-align: left; line-height: 1.35; }
  .w-max.rounded-full > span:first-child:empty { flex: none; }
  [class*="tracking-[0.2em]"].uppercase, [class*="tracking-widest"].uppercase { overflow-wrap: anywhere; }
  .whitespace-nowrap.inline-flex:not(nav *):not(.omz-nav *) { white-space: normal; max-width: 100%; }
  a.whitespace-nowrap.inline-flex, button.whitespace-nowrap.inline-flex { text-align: center; justify-content: center; }
}
@media (max-width: 380px) {
  .w-max.rounded-full.uppercase, [class*="tracking-[0.2em]"].uppercase { letter-spacing: .08em; }
}

/* ===== Heroes followed by a section that slides up over them (-mt-8 ... -mt-16): the hero keeps enough space at the
   bottom = the overlap + 1.5rem. In rem, so it still fits when the phone / browser uses larger text. (2026-10-19) ===== */
:is(header, section, div):has(+ :is(section, div)[class~="-mt-8"]) { padding-bottom: calc(2rem + 1.5rem) !important; }
:is(header, section, div):has(+ :is(section, div)[class~="-mt-10"]) { padding-bottom: calc(2.5rem + 1.5rem) !important; }
:is(header, section, div):has(+ :is(section, div)[class~="-mt-12"]) { padding-bottom: calc(3rem + 1.5rem) !important; }
:is(header, section, div):has(+ :is(section, div)[class~="-mt-16"]) { padding-bottom: calc(4rem + 1.5rem) !important; }
@media (min-width: 640px) {
  :is(header, section, div):has(+ :is(section, div)[class~="sm:-mt-16"]) { padding-bottom: calc(4rem + 1.5rem) !important; }
  :is(header, section, div):has(+ :is(section, div)[class~="sm:-mt-24"]) { padding-bottom: calc(6rem + 1.5rem) !important; }
}