@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root{
--ranza-magenta:#a91f5a;
--ranza-plum:#6f245c;
--ranza-navy:#171f47;
--ranza-navy-deep:#12183a;
--ranza-maroon:#690738;
--white:#ffffff;
--gray-50:#f7f7f9;
--gray-100:#eef0f3;
--gray-200:#e2e4ea;
--gray-300:#c9ccd6;
--gray-400:#9a9eac;
--gray-500:#6f7386;
--gray-600:#4f5265;
--gray-700:#363852;
--gray-900:#171f47;
}

*{box-sizing:border-box;}
/* overflow-x:hidden on html/body (kept as a fallback for browsers that
   don't understand `clip`) makes them scroll containers, which breaks
   position:sticky on the header — any overflow value on an ancestor other
   than visible does this, since the sticky element then sticks relative to
   that ancestor's scrollport instead of the viewport, and here the two
   never diverge so it just scrolls away. `overflow-x:clip` prevents the
   same horizontal overflow without creating a scroll container, so the
   sticky header keeps working. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;}
body{margin:0;background:#ffffff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;}
a{color:#a91f5a;text-decoration:none;}
[hidden]{display:none !important;}
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;}
html[dir="rtl"] [style*="margin-left:auto"]{margin-left:0 !important;margin-right:auto !important;}
html[dir="rtl"] [style*="letter-spacing"]{letter-spacing:normal !important;}
html[dir="rtl"] [style*="border-left:4px"]{border-left:none !important;border-right:4px solid currentColor !important;}
img{max-width:100%;}

/* body-copy paragraphs carried over small (15-19.5px) from the design file;
   bump each ~1.5px for legibility without touching the heading scale. Exact
   px values enumerated below are the full set used across the site's
   inline-styled <p> tags. */
p[style*="font-size:15px"]{font-size:16.5px !important;}
p[style*="font-size:15.5px"]{font-size:17px !important;}
p[style*="font-size:16px"]{font-size:17.5px !important;}
p[style*="font-size:17px"]{font-size:18.5px !important;}
p[style*="font-size:18px"]{font-size:19.5px !important;}
p[style*="font-size:19px"]{font-size:20px !important;}
p[style*="font-size:19.5px"]{font-size:20.5px !important;}

/* skip link — visually hidden via clipping, not an off-canvas negative
   offset: a negative `left` reads as extra *scrollable* content under
   dir="rtl" (the physical property doesn't flip with the logical writing
   direction the way inset-inline-start would), which was adding ~999px of
   phantom horizontal scroll to the Arabic page. Clipping to a 1x1 box has
   no such direction-dependent side effect. */
.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;background:#a91f5a;color:#fff;z-index:999;font-size:14px;font-weight:600;}
.skip-link:focus{width:auto;height:auto;margin:0;overflow:visible;clip:auto;padding:10px 16px;border-radius:0 0 6px 0;}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.24);color:#fff;border-radius:6px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.nav-toggle svg{width:20px;height:20px;}

/* back-to-top arrow */
#ranza-back-to-top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border:none;border-radius:50%;background:#a91f5a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.28);z-index:500;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 0.2s ease,transform 0.2s ease;}
#ranza-back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#ranza-back-to-top:hover{background:#690738;}
#ranza-back-to-top svg{width:20px;height:20px;}
html[dir="rtl"] #ranza-back-to-top{right:auto;left:20px;}

/* consent banner */
#ranza-consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;background:#171f47;color:#e8eaf3;border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:18px 20px;font-size:13.5px;line-height:1.6;box-shadow:0 12px 40px rgba(0,0,0,0.28);z-index:999;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
#ranza-consent p{margin:0;flex:1 1 260px;}
#ranza-consent .btn{border:none;border-radius:6px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
#ranza-consent .accept{background:#a91f5a;color:#fff;}
#ranza-consent .decline{background:transparent;color:#c9ccd6;border:1px solid rgba(255,255,255,0.24);}

/* ===== Responsive layer =====
   The page markup uses fixed inline grid-template-columns (authored in the
   design file). We override those by targeting the literal style substrings,
   since every page reuses the same handful of section/grid patterns. */
/* Header nav collapses to the hamburger menu well above the phone
   breakpoint: the full nav (5 links) plus the logo, language switcher and
   Contact button need ~1130-1260px depending on locale (French/Arabic
   labels run longer than English) to lay out on one row without the browser
   silently shrinking the nav links or overflowing the viewport. Below that,
   tablets in landscape and small laptop windows were seeing a cramped/
   clipped header and, at the old 980px threshold, up to ~140px of
   site-wide horizontal overflow. */
@media (max-width:1240px){
  header > div{padding:0 24px !important;}
  header nav{display:none !important;}
  header[data-nav-open="1"] nav{display:flex !important;position:absolute;top:100%;left:0;right:0;background:#171f47;flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 18px;border-bottom:1px solid rgba(255,255,255,0.1);}
  header[data-nav-open="1"] nav a{padding:12px 0;width:100%;}
  .nav-toggle{display:flex;}
}
@media (max-width:980px){
  header > div{padding:0 20px !important;}
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  section > div{padding-left:20px !important;padding-right:20px !important;}
  #top > div{padding:64px 20px 56px !important;}
  #top h1{font-size:40px !important;}
  h2[style*="font-size:40px"]{font-size:30px !important;}
}
@media (max-width:600px){
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important;}
  #top h1{font-size:32px !important;}
  footer > div:first-child{grid-template-columns:1fr !important;}
}
/* Below ~640px the logo + language switcher + Contact button + hamburger
   don't fit on one row at full size (they total ~570px and were all
   flex:none). Wrapping instead of overflowing fixed the site-wide
   horizontal scroll, but produced its own eyesore: a lopsided two-line
   header. Shrinking the wordmark, language pills and Contact button
   instead gets everything back under ~280px, which fits a single
   unwrapped row down to a 320px-wide phone. */
@media (max-width:640px){
  header > div{height:auto !important;padding:10px 12px !important;gap:4px !important;}
  header > div > a:first-child{gap:5px !important;}
  header > div > a:first-child img{width:28px !important;height:28px !important;}
  header > div > a:first-child span{font-size:12px !important;letter-spacing:normal !important;}
  header > div > a:first-child .wm-sarl{display:none;}
  header [style*="padding:3px;flex:none"]{padding:1px !important;gap:0 !important;}
  header [style*="padding:3px;flex:none"] a{padding:3px 5px !important;font-size:10.5px !important;}
  header a[data-track="cta_header_contact"]{padding:6px 10px !important;font-size:12px !important;}
  .nav-toggle{width:34px !important;height:34px !important;}
}