/* ============================================================================
   OUHA United — responsive + interaction layer.

   The page paints its layout through inline style attributes, so there is no
   class to hook onto. These rules match on the inline declarations themselves,
   which makes the site responsive without editing any of the 233 style
   attributes in index.html.

   IMPORTANT: React re-serialises every inline style through the CSSOM, so the
   attribute text in the DOM is normalised — a space after each colon, a space
   after commas inside repeat(), and .5s written as 0.5s. Selectors below must
   match that normalised form, not the source text in index.html.

   `!important` is needed only because inline styles outrank stylesheets.
   ========================================================================== */

/* ---------- 1. Fluid headings -------------------------------------------- */
[style*="font-size: 52px"] { font-size: clamp(27px, 6.6vw, 52px) !important; line-height: 1.3 !important; }
[style*="font-size: 40px"] { font-size: clamp(23px, 5.4vw, 40px) !important; line-height: 1.32 !important; }
[style*="font-size: 36px"] { font-size: clamp(21px, 4.9vw, 36px) !important; line-height: 1.34 !important; }
[style*="font-size: 34px"] { font-size: clamp(21px, 4.7vw, 34px) !important; }
[style*="font-size: 33px"] { font-size: clamp(20px, 4.6vw, 33px) !important; }
[style*="font-size: 32px"] { font-size: clamp(20px, 4.5vw, 32px) !important; line-height: 1.5 !important; }
[style*="font-size: 30px"] { font-size: clamp(19px, 4.2vw, 30px) !important; }

/* ---------- 2. Grid collapse --------------------------------------------- */
@media (max-width: 1000px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr"]  { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"]    { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 760px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"]  { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 620px) {
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- 3. Vertical rhythm on small screens -------------------------- */
@media (max-width: 900px) {
  /* A locked 660px hero is far too tall once the headline shrinks. */
  [style*="height: 660px"] { height: auto !important; min-height: 540px !important; }
  [style*="padding: 90px 28px 0px"] { padding: 64px 20px 0 !important; }
  [style*="padding: 80px 28px"]     { padding: 52px 20px !important; }
  [style*="padding: 90px 28px"]     { padding: 56px 20px !important; }
  [style*="padding: 60px 28px 90px"]{ padding: 40px 20px 60px !important; }
  [style*="padding: 56px 28px 28px"]{ padding: 40px 20px 24px !important; }
  [style*="height: 400px"] { height: 300px !important; }
  [style*="height: 300px"] { height: 240px !important; }
  [style*="height: 280px"] { height: 220px !important; }
}
@media (max-width: 620px) {
  [style*="padding: 10px 28px"] { padding: 10px 14px !important; }
  [style*="padding: 22px 28px"] { padding: 16px 14px !important; }
  [style*="padding: 18px 28px"] { padding: 14px 12px !important; }
  [style*="height: 300px"] { height: 200px !important; }
  [style*="height: 400px"] { height: 240px !important; }
  [style*="border-inline-start: 3px solid"] { padding-inline-start: 12px !important; }
}

/* ---------- 3c. Hero decluttering on small screens ------------------------
   The stats strip is absolutely positioned against the hero's bottom edge. That
   is fine at four columns, but once the grid stacks the strip grows tall enough
   to sit on top of the CTA buttons. Returning it to normal flow removes the
   collision outright, and a 2x2 grid keeps all four figures without the height. */
@media (max-width: 900px) {
  [data-herostats] {
    position: static !important;
    background: oklch(0.2 0.06 255 / 0.88) !important;
  }
  [data-herostats] [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px 10px !important;
    padding: 18px 20px !important;
  }
  [data-herostats] [data-counter] { font-size: 25px !important; }
  [data-herostats] [style*="font-size: 13.5px"] { font-size: 11.5px !important; line-height: 1.35 !important; }
  /* Breathing room between the buttons and the strip now below them. */
  [data-hero] { padding-bottom: 30px !important; }
}

@media (max-width: 620px) {
  /* Trim the long intro to three lines rather than dropping it: the sentence
     still reads, but it stops pushing the buttons off the first screen. */
  [data-herosub] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
  }
}

@media (max-width: 520px) {
  /* Stack the two CTAs full width so neither wraps mid-word. */
  [data-hero] > div:nth-child(4) { flex-direction: column; align-items: stretch; gap: 10px !important; }
  [data-hero] > div:nth-child(4) > div {
    text-align: center;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
  [data-herostats] [style*="grid-template-columns: repeat(4, 1fr)"] { gap: 12px 8px !important; }
}

/* The floating overlay image in the About block escapes its box once the grid
   collapses to a single column — put it back into normal flow. */
@media (max-width: 900px) {
  [style*="bottom: -36px"] {
    position: relative !important;
    inset-inline-end: auto !important;
    bottom: auto !important;
    width: 60% !important;
    height: 170px !important;
    margin-top: 14px !important;
    animation: none !important;
  }
  [style*="width: 82%"] { width: 100% !important; }
}

/* Mobile browsers render fixed backgrounds badly stretched, or not at all. */
@media (max-width: 900px) {
  [style*="background-attachment: fixed"] { background-attachment: scroll !important; }
}

/* ---------- 3b. Mobile navigation drawer ---------------------------------
   On desktop [data-drawer] is display:contents, so the header lays out exactly
   as it did before this file existed. Below 980px the wrapper becomes a real
   element again and slides in from the side. The panel is anchored to the
   inline-end edge, so it enters from the right in English and from the left in
   Arabic; translate is a physical transform, hence the separate dir rules. */
@media (max-width: 980px) {
  [data-burger] { display: flex !important; }

  /* The sticky header carries backdrop-filter: blur(12px). That single property
     makes the header the containing block for any position:fixed descendant AND
     turns it into a stacking context — so the drawer was being sized against the
     ~70px header instead of the viewport, and the backdrop (a sibling of the
     header, above its z-index:100) painted straight over it.
     Dropping the blur below 980px restores viewport-relative positioning; the
     backdrop then sits just beneath the header rather than above it. */
  [style*="backdrop-filter: blur(12px)"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }

  [data-drawer] {
    display: flex !important;
    position: fixed !important;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(84vw, 330px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 88px 20px 28px;
    background: #fff;
    box-shadow: 0 0 46px rgba(20, 40, 90, .26);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1400;
    transition: transform .34s cubic-bezier(.22, .75, .28, 1);
  }
  [dir="rtl"][data-menu="closed"] [data-drawer] { transform: translateX(-102%); }
  [dir="ltr"][data-menu="closed"] [data-drawer] { transform: translateX(102%); }
  [data-menu="open"] [data-drawer]  { transform: translateX(0); }

  /* Sits in the drawer's top padding, on the inline-start side. */
  [data-close] {
    display: flex !important;
    position: absolute;
    top: 22px;
    inset-inline-start: 20px;
  }

  [data-navlinks] {
    flex-direction: column;
    align-items: stretch;
    gap: 6px !important;
    width: 100%;
    flex-wrap: nowrap !important;
  }
  [data-navlinks] > div {
    padding: 13px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  [data-navactions] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid oklch(0.92 0.01 250);
  }
  [data-navactions] > div {
    text-align: center;
    padding: 13px 18px !important;
    font-size: 15px !important;
  }

  [data-menu="open"] [data-backdrop] {
    display: block !important;
    position: fixed;
    inset: 0;
    /* Must stay below the header's z-index:100, otherwise it covers the drawer
       that lives inside the header. */
    z-index: 99;
    background: rgba(16, 28, 56, .5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* Bars fold into a close icon while the drawer is open. */
  [data-menu="open"] [data-bar]:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  [data-menu="open"] [data-bar]:nth-child(2) { opacity: 0; }
  [data-menu="open"] [data-bar]:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Stop the page behind the drawer from scrolling. */
  html:has([data-menu="open"]) body { overflow: hidden; }
}

/* ---------- 3c. Main navigation hover ------------------------------------
   The runtime does emit a hover rule from style-hover (.scpN:hover), but it
   only lifts the background to oklch(0.94 0.02 250) — against a near-white
   header that reads as no feedback at all. This replaces it with a movement
   the eye actually catches: an underline growing from the centre, a slightly
   deeper tint, and a small lift, all on one easing curve so it feels like a
   single gesture rather than three separate changes. */
@media (hover: hover) and (min-width: 981px) {
  [data-navlinks] > div {
    position: relative;
    /* Overrides the runtime's own 0.25s linear pair. */
    transition: background .3s cubic-bezier(.2, .7, .3, 1),
                color .3s cubic-bezier(.2, .7, .3, 1),
                transform .3s cubic-bezier(.2, .7, .3, 1) !important;
  }
  [data-navlinks] > div::after {
    content: "";
    position: absolute;
    inset-inline: 15px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: oklch(0.6 0.14 145);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .32s cubic-bezier(.2, .7, .3, 1);
  }
  [data-navlinks] > div:hover {
    background: oklch(0.95 0.025 250) !important;
    color: oklch(0.38 0.13 250) !important;
    transform: translateY(-2px);
  }
  [data-navlinks] > div:hover::after { transform: scaleX(1); }

  /* The language toggle and the contact button get the same lift, so the
     whole header responds with one vocabulary. */
  [data-navactions] > div {
    transition: background .3s cubic-bezier(.2, .7, .3, 1),
                color .3s cubic-bezier(.2, .7, .3, 1),
                transform .3s cubic-bezier(.2, .7, .3, 1),
                box-shadow .3s ease !important;
  }
  [data-navactions] > div:hover { transform: translateY(-2px); }
}

/* In the drawer a moving underline would fight the stacked layout, so links
   simply tint and nudge along the reading direction instead. */
@media (max-width: 980px) {
  [data-navlinks] > div {
    transition: background .25s ease, transform .25s ease, color .25s ease !important;
  }
  [data-navlinks] > div:active { transform: translateX(-3px); background: oklch(0.95 0.025 250) !important; }
  [dir="ltr"] [data-navlinks] > div:active { transform: translateX(3px); }
}

/* ---------- 4. Hover interactions ---------------------------------------- */
/* The service cards already ship `transition: transform .5s`, but nothing ever
   changed the transform, so the intended zoom never fired. */
[style*="transition: transform 0.5s"] { will-change: transform; }
div:hover > [style*="transition: transform 0.5s"] { transform: scale(1.09) !important; }

/* Any image inside a clipped frame gets the same treatment. */
@media (hover: hover) {
  [style*="overflow: hidden"] > img { transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
  [style*="overflow: hidden"]:hover > img { transform: scale(1.07); }
}

/* Card lift — the bordered panels used for services, ISO codes, team members,
   accreditations and contact rows. */
[style*="border-radius: 12px"][style*="border: 1px solid"],
[style*="border-radius: 14px"][style*="border: 1px solid"],
[style*="border-radius: 16px"][style*="border: 1px solid"],
[style*="border-radius: 18px"][style*="border: 1px solid"],
[style*="border-radius: 20px"][style*="border: 1px solid"] {
  transition: transform .32s cubic-bezier(.2, .7, .3, 1),
              box-shadow .32s ease,
              border-color .32s ease;
}
@media (hover: hover) {
  [style*="border-radius: 12px"][style*="border: 1px solid"]:hover,
  [style*="border-radius: 14px"][style*="border: 1px solid"]:hover,
  [style*="border-radius: 16px"][style*="border: 1px solid"]:hover,
  [style*="border-radius: 18px"][style*="border: 1px solid"]:hover,
  [style*="border-radius: 20px"][style*="border: 1px solid"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px -16px rgba(30, 60, 120, .38);
    border-color: oklch(0.62 0.13 250) !important;
  }
}

/* Pills and chips lift slightly instead, so rows stay aligned. */
@media (hover: hover) {
  [style*="border-radius: 999px"][style*="border: 1px solid"] {
    transition: background .28s ease, transform .28s ease, border-color .28s ease;
  }
  [style*="border-radius: 999px"][style*="border: 1px solid"]:hover {
    transform: translateY(-2px);
    border-color: oklch(0.6 0.14 145) !important;
  }
}

/* Honour a system-level request for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4b. Hero entrance ---------------------------------------------
   The hero sits above the fold, so the scroll-triggered [data-reveal] system
   never fires for it and it used to slam in fully formed. A pure-CSS staggered
   entrance costs no JS and cannot delay paint. `backwards` fill keeps each item
   hidden during its delay instead of flashing first. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 oklch(0.8 0.16 130 / .65); }
  70%      { transform: scale(1.15); box-shadow: 0 0 0 9px oklch(0.8 0.16 130 / 0); }
}

[data-hero] > * {
  animation: heroIn .72s cubic-bezier(.2, .75, .3, 1) backwards;
}
[data-hero] > *:nth-child(1) { animation-delay: .12s; }
[data-hero] > *:nth-child(2) { animation-delay: .26s; }
[data-hero] > *:nth-child(3) { animation-delay: .40s; }
[data-hero] > *:nth-child(4) { animation-delay: .54s; }

/* Deliberately NOT animated. An entrance here needs animation-fill-mode:
   backwards to stay hidden through its delay, and this element's animation was
   observed sitting at currentTime 0 indefinitely — leaving the whole strip
   stuck at opacity 0. The figures already animate by counting up, so the strip
   stays plainly visible rather than depending on an animation that may not run. */

[data-pulse] { animation: pulseDot 2.4s ease-out infinite; }

/* ---------- 5. Small-screen safety --------------------------------------- */
img { max-width: 100%; }

/* ---------- 6. Clients marquee -------------------------------------------
   Two defects, both visible as names running out and leaving a long empty gap.

   1. Direction. The template animates translateX(0) -> translateX(-50%), which
      is only correct in LTR, where the track starts at the container's left
      edge and overflows to the right. Under RTL the track is anchored to the
      right edge and overflows leftward, so a negative translate walks it
      further off-screen and trails a growing void behind the last name. RTL
      needs the mirrored travel.

   2. Seam. The 14px flex gap also falls between the two copies, so the track is
      2 x copy + 1 gap while the animation moves exactly half of that — leaving
      the loop 7px short every cycle. Measured: copies start 6522px apart while
      the animation travels 6516px. Carrying the spacing on each item instead
      makes the track exactly two identical halves, so 50% lands seamlessly. */
[style*="running marquee"] { gap: 0 !important; }
[style*="running marquee"] > * { margin-inline-end: 14px; }

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
[dir="rtl"] [style*="running marquee"] { animation-name: marquee-rtl !important; }

@media (max-width: 620px) {
  /* React expands the shorthand, so the marquee is matched by its name at the
     end of the serialised animation value. */
  [style*="running marquee"] { animation-duration: 46s !important; }
}