/* ============================================================
   RAK GOVERNMENT — DEPARTMENT OF HUMAN RESOURCES
   Single stylesheet: fonts + tokens + component styles + site.
   Ported faithfully from the RAK Government Design System.
   ============================================================ */

/* ---------------- FONTS ---------------- */
@font-face { font-family:"ABC Diatype"; src:url("../fonts/ABCDiatypeArabic-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Diatype"; src:url("../fonts/ABCDiatypeArabic-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Diatype"; src:url("../fonts/ABCDiatypeArabic-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Diatype"; src:url("../fonts/ABCDiatypeArabic-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Diatype"; src:url("../fonts/ABCDiatypeArabic-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

/* ---------------- COLOR TOKENS ---------------- */
:root{
  --color-white:#FFFFFF; --color-black:#1A1918; --color-brand:#A9001A;
  --gray-50:#F7F5F3; --gray-100:#EFEDE9; --gray-150:#DFDCD9; --gray-200:#D6CEC5;
  --gray-250:#CBC2B9; --gray-300:#BFB4AA; --gray-350:#B2A79C; --gray-400:#A69A8E;
  --gray-450:#998D81; --gray-500:#8D8074; --gray-550:#807367; --gray-600:#74675B;
  --gray-650:#685B50; --gray-700:#5C5045; --gray-750:#4F4740; --gray-800:#443E39;
  --gray-850:#393632; --gray-900:#2F2D2A; --gray-950:#252321; --gray-1000:#1B1918;
  --error-100:#FFF5F5; --error-200:#FFCFD1; --error-300:#F49CA9; --error-400:#DB3C55;
  --error-500:#A9001A; --error-600:#731725; --error-700:#46070F; --error-800:#26080C; --error-900:#170507;
  --warning-100:#FFF9EB; --warning-400:#BF8C39; --warning-700:#382A11;
  --success-100:#EFFCF8; --success-400:#1F9973; --success-700:#0A3326;
  --info-100:#F0F9FF; --info-200:#ADC7D9; --info-300:#82B5D9; --info-400:#4795CC;
  --info-500:#2578B3; --info-600:#1C5E8C; --info-700:#0A4066;

  --text-primary:var(--color-black); --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500); --text-disabled:var(--gray-400);
  --text-inverse:var(--color-white); --text-brand:var(--color-brand); --text-link:var(--info-500);
  --surface-page:var(--color-white); --surface-subtle:var(--gray-50); --surface-muted:var(--gray-100);
  --surface-card:var(--gray-50); --surface-inverse:var(--color-black); --surface-overlay:rgba(26,25,24,0.55);
  --border-subtle:var(--gray-150); --border-default:var(--gray-200); --border-strong:var(--color-black); --border-focus:var(--color-black);
  --action-solid-bg:var(--color-black); --action-solid-bg-hover:var(--gray-800); --action-solid-bg-active:var(--gray-700); --action-solid-fg:var(--color-white);
  --action-soft-bg:var(--color-white); --action-soft-bg-hover:var(--gray-100); --action-soft-bg-active:var(--gray-200); --action-soft-fg:var(--color-black);
  --action-outline-border:var(--color-black); --action-outline-fg:var(--color-black); --action-outline-bg-hover:var(--gray-100); --action-outline-bg-active:var(--gray-200);
  --action-disabled-bg:var(--gray-100); --action-disabled-fg:var(--gray-400);
  --error-text:var(--error-700);

  /* type */
  --font-sans:"ABC Diatype","Helvetica Neue",Arial,system-ui,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:900;
  --fs-display-2xl:72px; --fs-display-xl:60px; --fs-display-lg:48px; --fs-display-md2:40px;
  --fs-display-md:36px; --fs-display-sm:32px; --fs-display-sm2:28px; --fs-display-xs:24px;
  --fs-text-xl:20px; --fs-text-lg:18px; --fs-text-md:16px; --fs-text-sm:14px; --fs-text-xs:12px;
  --lh-display-2xl:90px; --lh-display-xl:72px; --lh-display-lg:60px; --lh-display-md2:48px;
  --lh-display-md:44px; --lh-display-sm:40px; --lh-display-sm2:36px; --lh-display-xs:32px;
  --lh-text-xl:28px; --lh-text-lg:24px; --lh-text-md:20px; --lh-text-sm:18px; --lh-text-xs:18px;
  --tracking-display:-0.01em; --tracking-text:0em;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --gap-section:48px; --tap-min:44px;
  --gutter-mobile:20px; --gutter-desktop:80px; --container-max:1280px;

  /* radius */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px;
  --radius-2xl:24px; --radius-pill:999px; --radius-circle:50%;

  /* elevation */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(43,38,34,0.05);
  --shadow-sm:0 1px 2px rgba(43,38,34,0.06),0 2px 6px rgba(43,38,34,0.06);
  --shadow-md:0 4px 8px rgba(43,38,34,0.06),0 8px 24px rgba(43,38,34,0.10);
  --shadow-lg:0 8px 16px rgba(43,38,34,0.08),0 24px 48px rgba(43,38,34,0.16);
}

/* ---------------- BASE / RESET ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:var(--fs-text-md); line-height:var(--lh-text-md);
  color:var(--text-primary); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
html,body{ min-height:100%; }
/* App shell is a full-height flex column so the footer always sits at the
   bottom of the viewport and spans its full width, even on short pages. */
#root{ display:flex; flex-direction:column; min-height:100vh; }
#root > main{ flex:1 0 auto; }
#root > .rak-footer{ flex:0 0 auto; }
[dir="rtl"]{ text-align:right; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
a{ color:var(--text-link); text-decoration:none; }
a:hover{ color:var(--info-700); text-decoration:underline; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; }

/* ---------------- LAYOUT HELPERS ---------------- */
.rak-container{ max-width:var(--container-max); margin:0 auto; padding-left:var(--gutter-desktop); padding-right:var(--gutter-desktop); box-sizing:border-box; }
/* Large displays (e.g. a 27" 5K Mac that "looks like 2560×1440", reporting
   2560 CSS px): widen the content cap so pages don't feel narrow. Bumping the
   token keeps the hero and footer (which also use --container-max) aligned. */
@media (min-width:1920px){ :root{ --container-max:1600px; } }
.rak-section{ padding-top:72px; padding-bottom:72px; }
/* Anchored sections (e.g. /about#vision) clear the sticky header when scrolled to */
.rak-section[id]{ scroll-margin-top:96px; }
.rak-section--subtle{ background:var(--gray-50); }
.rak-section--tight{ padding-top:48px; padding-bottom:0; }
.rak-section--pb{ padding-bottom:72px; }
/* The About intro section ("Building the Future Workforce" title + leadership
   quote) sits flush against the divider below it — the quote band supplies its
   own vertical padding, so no extra bottom padding here. */
.about-intro{ padding-bottom:0; }
.rak-divider{ height:1px; background:var(--gray-150); border:0; margin:0; }
@media (max-width:900px){
  .rak-container{ padding-left:var(--gutter-mobile); padding-right:var(--gutter-mobile); }
  .rak-section{ padding-top:48px; padding-bottom:48px; }
  /* The About page header keeps its zero bottom padding on mobile too, so the
     quote below sits close (the .rak-section rule above would otherwise add 48px). */
  .about-head{ padding-bottom:0; }
  /* Same for the Legislation & Policies title, so the section list sits close. */
  .leg-head{ padding-bottom:0; }
  /* Same for the News title, so the filters/list sit close beneath it. */
  .news-head{ padding-bottom:0; }
  /* Same for the Contact title, so the sidebar/content sits close beneath it. */
  .contact-head{ padding-bottom:0; }
}

/* ---------------- BUTTON ---------------- */
.rak-btn{
  --_bg:var(--action-solid-bg); --_fg:var(--action-solid-fg); --_bd:transparent;
  --_bgh:var(--action-solid-bg-hover); --_bga:var(--action-solid-bg-active);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;
  font-family:var(--font-sans); font-weight:var(--fw-medium);
  border-radius:var(--radius-pill); border:1.5px solid var(--_bd);
  background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.rak-btn:hover{ background:var(--_bgh); color:var(--_fg); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.rak-btn:active{ background:var(--_bga); transform:translateY(0) scale(.98); box-shadow:none; }
/* The trailing arrow nudges forward on hover (mirrored in RTL). */
.rak-btn:hover .rak-btn__ico{ transform:translateX(3px); }
.rak-btn__ico{ transition:transform .2s ease; }
[dir="rtl"] .rak-btn:hover .rak-btn__ico{ transform:translateX(-3px); }
.rak-btn--solid{ --_bg:var(--action-solid-bg); --_fg:var(--action-solid-fg); --_bgh:var(--action-solid-bg-hover); --_bga:var(--action-solid-bg-active); }
.rak-btn--soft{ --_bg:var(--action-soft-bg); --_fg:var(--action-soft-fg); --_bd:var(--gray-200); --_bgh:var(--action-soft-bg-hover); --_bga:var(--action-soft-bg-active); }
.rak-btn--outline{ --_bg:transparent; --_fg:var(--action-outline-fg); --_bd:var(--action-outline-border); --_bgh:var(--action-outline-bg-hover); --_bga:var(--action-outline-bg-active); }
/* Fills with the brand colour on hover — matches the careers program-card "Learn more" CTA. */
.rak-btn--brand-hover:hover{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
.rak-btn--big{ font-size:var(--fs-text-lg); line-height:1; padding:14px 28px; min-height:52px; }
.rak-btn--medium{ font-size:var(--fs-text-md); line-height:1; padding:12px 22px; min-height:48px; }
.rak-btn--small{ font-size:var(--fs-text-sm); line-height:1; padding:9px 16px; min-height:40px; }
.rak-btn--block{ display:flex; width:100%; }
.rak-btn:disabled,.rak-btn[aria-disabled="true"]{ background:var(--action-disabled-bg)!important; color:var(--action-disabled-fg)!important; border-color:transparent!important; cursor:not-allowed; transform:none; }
.rak-btn__ico{ flex:0 0 auto; display:inline-flex; }
[dir="rtl"] .rak-btn__ico svg{ transform:scaleX(-1); }

/* ---------------- ICON BUTTON ---------------- */
.rak-iconbtn{
  --_bg:var(--action-solid-bg); --_fg:var(--action-solid-fg); --_bd:transparent;
  --_bgh:var(--action-solid-bg-hover); --_bga:var(--action-solid-bg-active);
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-circle);
  border:1.5px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  cursor:pointer; padding:0; box-sizing:border-box;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .06s ease;
  -webkit-tap-highlight-color:transparent;
}
.rak-iconbtn:hover{ background:var(--_bgh); }
.rak-iconbtn:active{ background:var(--_bga); transform:scale(.94); }
.rak-iconbtn--solid{ --_bg:var(--action-solid-bg); --_fg:var(--action-solid-fg); --_bgh:var(--action-solid-bg-hover); --_bga:var(--action-solid-bg-active); }
.rak-iconbtn--soft{ --_bg:var(--gray-100); --_fg:var(--color-black); --_bgh:var(--gray-200); --_bga:var(--gray-250); }
.rak-iconbtn--outline{ --_bg:transparent; --_fg:var(--color-black); --_bd:var(--color-black); --_bgh:var(--gray-100); --_bga:var(--gray-200); }
.rak-iconbtn--big{ width:56px; height:56px; } .rak-iconbtn--medium{ width:48px; height:48px; }
.rak-iconbtn--small{ width:40px; height:40px; } .rak-iconbtn--xs{ width:32px; height:32px; }
.rak-iconbtn:disabled{ background:var(--action-disabled-bg)!important; color:var(--action-disabled-fg)!important; border-color:transparent!important; cursor:not-allowed; transform:none; }
[dir="rtl"] .rak-iconbtn svg{ transform:scaleX(-1); }

/* ---------------- HEADER ---------------- */
.rak-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:32px; width:100%; box-sizing:border-box;
  /* Fixed 96px navbar; the 96px logo (with -22px block margins) centres within it. */
  min-height:96px; padding:10px var(--gutter-desktop);
  /* Solid at the top of the page; turns frosted/translucent once scrolled. */
  background:var(--surface-page);
  border-bottom:1px solid var(--gray-150); font-family:var(--font-sans);
  box-shadow:0 0 0 rgba(43,38,34,0);
  transition:box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
/* Smooth sticky transition: semi-transparent background + backdrop blur + a
   whisper of shadow once the page scrolls (toggled from Header.jsx). */
.rak-header.is-scrolled{
  background:rgba(255,255,255,0.82);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 2px 12px rgba(43,38,34,0.08);
  border-bottom-color:transparent;
}
/* In Arabic: keep the logo on the right, move the nav links beside it (also on
   the right), and push the utilities (language + text-size + menu) to the left. */
[dir="rtl"] .rak-header{ flex-direction:row; }
[dir="rtl"] .rak-header__brand{ order:1; }
[dir="rtl"] .rak-header__nav{ order:2; }
[dir="rtl"] .rak-header__utils{ order:3; }
.rak-header__brand{ flex:0 0 auto; display:inline-flex; align-items:center; text-decoration:none; }
.rak-header__brand:hover{ text-decoration:none; }
/* Logo renders at 96px — the same size as the footer logo — while the negative
   vertical margins keep its margin-box at 52px, so the navbar height and every
   other item stay exactly where they are. The logo simply bleeds beyond the
   bar's content line. */
/* The <picture> wrapper is transparent to layout so the <img> keeps behaving as
   a direct child of the brand link (its negative margins bleed to 96px). */
.rak-header__brand picture{ display:contents; }
.rak-header__brand img{ height:96px; width:auto; margin-block:-22px; transition:opacity .2s ease; }
.rak-header__nav{ display:flex; align-items:center; justify-content:flex-start; gap:32px; flex:1 1 auto; }
.rak-header__link{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; padding:8px 0;
  font-family:var(--font-sans); font-size:var(--fs-text-md); line-height:1;
  color:var(--text-primary); text-decoration:none;
}
.rak-header__link::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--color-brand); opacity:0; transition:opacity .15s ease; }
.rak-header__link:hover{ color:var(--text-primary); text-decoration:none; }
.rak-header__link:hover::after{ opacity:1; }
.rak-header__link.is-active{ font-weight:var(--fw-medium); color:var(--color-brand); }
.rak-header__link.is-active::after{ background:var(--color-brand); opacity:1; }
.rak-header__utils{ display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.rak-header__lang{ background:transparent; border:0; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary); padding:6px 8px; border-radius:var(--radius-pill); transition:color .15s ease, background-color .15s ease; }
.rak-header__ico{ background:transparent; border:0; cursor:pointer; color:var(--text-primary); padding:8px; display:inline-flex; border-radius:var(--radius-circle); transition:color .15s ease, background-color .15s ease; }
/* Every header action (language, accessibility, theme, search, burger) picks up
   the brand colour on hover, so they read the same as the nav links' brand
   underline rather than as a separate grey-only interaction. */
.rak-header__lang:hover,
.rak-header__ico:hover{ background:var(--gray-100); color:var(--color-brand); }
.rak-header__ico.is-active{ background:var(--gray-100); color:var(--color-brand); }
.rak-header__burger{ display:none; }
/* nav dropdown */
.rak-navitem{ position:relative; }
.rak-navitem__menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:220px; background:var(--surface-page); border:1px solid var(--gray-150);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:8px;
  opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:120;
}
.rak-navitem.is-open .rak-navitem__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* Invisible bridge over the gap between trigger and menu so the dropdown
   doesn't close while the pointer travels down toward it. */
.rak-navitem__menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.rak-navitem__link{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-primary); font-size:var(--fs-text-md); text-decoration:none; }
.rak-navitem__link:hover{ background:var(--gray-50); color:var(--color-brand); text-decoration:none; }
.rak-navitem.is-open > .rak-header__link .rak-chev{ transform:rotate(180deg); }
.rak-chev{ transition:transform .18s ease; display:inline-flex; }
@media (max-width:960px){
  .rak-header{ padding:10px var(--gutter-mobile); gap:16px; }
  /* Keep the compact top bar in the English (LTR) arrangement even in Arabic:
     the bar (language · search … logo · burger) does not mirror when the site
     switches to RTL. */
  [dir="rtl"] .rak-header{ direction:ltr; }
  .rak-header__nav{ display:none; }
  .rak-header__burger{ display:inline-flex; }
  /* Smaller crest than desktop's 96px. The negative margins still resolve the
     margin-box to 52px, so the bar and every other item stay put — only the
     mark itself shrinks. */
  .rak-header__brand img{ height:64px; margin-block:-6px; }

  /* Drop the utilities wrapper into the header's own flex row (its buttons
     become direct flex items) so they can be ordered around the logo, which is
     a sibling of the wrapper: language + search lead the row and the burger
     follows the logo. */
  .rak-header__utils{ display:contents; }
  /* Small screens show language + search + burger only; the accessibility and
     theme controls collapse into the burger menu. */
  .rak-a11y{ display:none; }
  .rak-header__utils .rak-header__ico:not(.rak-header__burger):not([aria-label="Search"]){ display:none; }

  /* Left → right: language, search … logo, burger (same order in RTL — the bar
     is forced LTR above). The auto inline-start margin on the logo opens the
     gap after search. */
  /* Language toggle is plain clickable text on mobile — no pill/tag background. */
  .rak-header__lang{ display:inline-flex; order:1; padding-inline:0; border-radius:0; }
  .rak-header__lang:hover{ background:transparent; }
  .rak-header__utils .rak-header__ico[aria-label="Search"]{ order:2; }
  .rak-header__brand,
  [dir="rtl"] .rak-header__brand{ order:3; margin-inline-start:auto; margin-inline-end:0; }
  .rak-header__burger{ order:4; }
}

/* ---------------- ACCESSIBILITY DIALOG ---------------- */
/* A centred modal opened from the header "Aa" control; lets visitors bump the
   text size and switch to high-contrast colours before resorting to browser
   zoom. */
.rak-a11y{ display:inline-flex; }
.rak-a11y__overlay{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter-mobile);
  background:var(--surface-overlay);
  animation:rak-a11y-fade .16s ease;
}
/* Fixed 400x312 card (border-box, so those are the outer dimensions). The
   internals below are sized to fit inside it with the content optically centred
   and clear of the close button. */
.rak-a11y__card{
  position:relative;
  width:400px; max-width:calc(100% - 32px);
  height:312px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);
  padding:45px 24px 0; font-family:var(--font-sans);
  animation:rak-a11y-in .18s ease;
}
@keyframes rak-a11y-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes rak-a11y-in{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
.rak-a11y__close{
  position:absolute; top:12px; inset-inline-end:19px;
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:var(--radius-circle);
  background:var(--gray-100); color:var(--text-primary);
}
.rak-a11y__close svg{ width:14px; height:14px; }
.rak-a11y__close:hover{ background:var(--gray-150); }
.rak-a11y__title{ margin:0; font-size:30px; line-height:36px; font-weight:var(--fw-bold); color:var(--text-primary); }
.rak-a11y__title:not(:first-of-type){ margin-top:46px; }
.rak-a11y__sizes{ display:flex; gap:12px; margin-top:17px; }
/* Fixed height so both samples share a pill size despite their different type
   sizes; the sample size itself is the control's affordance. */
.rak-a11y__size{
  height:48px; padding:0 32px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); line-height:1;
  background:var(--action-soft-bg-hover); color:var(--text-primary);
  font-family:var(--font-sans);
}
.rak-a11y__size[data-level="0"]{ font-size:20px; }
.rak-a11y__size[data-level="1"]{ font-size:30px; }
.rak-a11y__size:hover{ background:var(--action-soft-bg-active); }
.rak-a11y__size.is-active{ background:var(--action-solid-bg); color:var(--action-solid-fg); }
.rak-a11y__contrast{ display:flex; flex-direction:row; justify-content:center; gap:18px; margin-top:19px; }
.rak-a11y__radio{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:18px; color:var(--text-primary); }
.rak-a11y__radio input{ width:18px; height:18px; margin:0; accent-color:var(--color-brand); cursor:pointer; flex:0 0 auto; }

/* Mobile card: 258x300 with its own type scale and the contrast options
   stacked, per the design. */
@media (max-width:960px){
  .rak-a11y__card{ width:258px; height:300px; padding:43px 16px 0; }
  .rak-a11y__close{ top:12px; inset-inline-end:14px; width:24px; height:24px; }
  .rak-a11y__close svg{ width:12px; height:12px; }
  .rak-a11y__title{ font-size:24px; line-height:30px; }
  .rak-a11y__title:not(:first-of-type){ margin-top:35px; }
  .rak-a11y__sizes{ gap:11px; margin-top:13px; }
  .rak-a11y__size{ height:36px; padding:0 21px; }
  .rak-a11y__size[data-level="0"]{ font-size:16px; }
  .rak-a11y__size[data-level="1"]{ font-size:22px; }
  .rak-a11y__contrast{ flex-direction:column; align-items:flex-start; gap:13px; margin-top:14px; }
  .rak-a11y__radio{ font-size:15px; gap:9px; }
  .rak-a11y__radio input{ width:16px; height:16px; }
}

/* ---------------- FULLSCREEN MENU ---------------- */
.rak-menu{ position:fixed; inset:0; z-index:1000; background:var(--surface-page); display:none; flex-direction:column; font-family:var(--font-sans); overflow:auto; }
.rak-menu.is-open{ display:flex; }
.rak-menu__bar{ display:flex; justify-content:flex-end; padding:20px var(--gutter-mobile) 8px; }
.rak-menu__close{ width:44px; height:44px; border-radius:var(--radius-circle); background:var(--gray-100); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary); }
.rak-menu__close:hover{ background:var(--gray-200); }
.rak-menu__inner{ flex:1 1 auto; width:100%; max-width:520px; margin:0 auto; padding:8px var(--gutter-mobile) 0; box-sizing:border-box; }
.rak-menu__section{ margin-bottom:28px; }
.rak-menu__heading{ font-size:var(--fs-text-md); color:var(--text-secondary); margin:0 4px 12px; }
.rak-menu__group{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
.rak-menu__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 20px; background:transparent; border:0; cursor:pointer; text-align:start; font-family:var(--font-sans); font-size:var(--fs-text-lg); color:var(--text-primary); text-decoration:none; }
.rak-menu__row + .rak-menu__row{ border-top:1px solid var(--gray-150); }
/* Same brand-colour hover as the desktop nav links and header actions. */
.rak-menu__row:hover{ background:var(--gray-100); color:var(--color-brand); text-decoration:none; }
.rak-menu__row:hover .rak-menu__chev{ color:var(--color-brand); }
.rak-menu__row[aria-current="page"]{ position:relative; color:var(--color-brand); font-weight:var(--fw-medium); }
.rak-menu__row[aria-current="page"] .rak-menu__chev{ color:var(--color-brand); }
.rak-menu__row[aria-current="page"]::before{ content:""; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:3px; background:var(--color-brand); border-radius:0 2px 2px 0; }
.rak-menu__row-label{ display:inline-flex; align-items:center; gap:14px; }
.rak-menu__chev{ color:var(--gray-500); flex:0 0 auto; }
/* The row chevron points the way the language reads: it sits at the row's
   trailing edge, so in Arabic it must flip to point left. */
[dir="rtl"] .rak-menu__chev svg{ transform:scaleX(-1); }
.rak-menu__foot{ padding:28px var(--gutter-mobile) 48px; max-width:520px; width:100%; margin:0 auto; box-sizing:border-box; }
.rak-menu__foot img{ height:48px; width:auto; }

/* ---------------- FOOTER ---------------- */
.rak-footer{ background:var(--gray-100); border-top:1px solid var(--border-subtle); font-family:var(--font-sans); }
.rak-footer__bar{ display:flex; align-items:center; gap:40px; padding:20px var(--gutter-desktop); min-height:85px; max-width:var(--container-max); margin:0 auto; box-sizing:border-box; flex-wrap:wrap; }
.rak-footer__brand{ flex:0 0 auto; display:inline-flex; align-items:center; text-decoration:none; }
.rak-footer__brand:hover{ text-decoration:none; }
.rak-footer__brand img{ height:96px; width:auto; margin-block:-22px; }
/* Nav pushed to the inline end (right in LTR, left in RTL); copyright follows
   it at the far edge — see footer design. */
.rak-footer__nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-inline-start:auto; }
.rak-footer__link{ display:inline-flex; align-items:center; gap:4px; background:transparent; border:0; padding:0; cursor:pointer; color:var(--text-primary); text-decoration:none; font-family:var(--font-sans); font-size:var(--fs-text-md); }
.rak-footer__link{ transition:color .15s ease; }
.rak-footer__link:hover{ color:var(--color-brand); text-decoration:none; }
.rak-footer__copy{ color:var(--text-secondary); font-size:var(--fs-text-sm); }
@media (max-width:900px){
  /* Stack vertically, aligned to the inline start: brand · nav · copyright. */
  .rak-footer__bar{ padding:24px var(--gutter-mobile); gap:20px; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; min-height:0; }
  .rak-footer__brand img{ margin-block:0; }
  .rak-footer__nav{ margin-inline-start:0; gap:8px 20px; }
}

/* ---------------- BACK BUTTON ---------------- */
.rak-back{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:0; padding:6px 2px; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-text-lg); line-height:1; font-weight:var(--fw-medium); color:var(--text-primary); text-decoration:none; }
.rak-back:hover{ color:var(--color-brand); text-decoration:none; }
.rak-back:hover .rak-back__icon{ transform:translateX(-3px); }
.rak-back__icon{ display:inline-flex; transition:transform .15s ease; }
[dir="rtl"] .rak-back__icon svg{ transform:scaleX(-1); }
/* Shared back-navigation footer for the About Us pages — consistent placement
   and breathing room above the site footer. */
.about-back{ padding-bottom:48px; }

/* ---------------- PAGE HEADER ---------------- */
.rak-pagehead{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:16px; }
/* 40px page heading, shared by every listing/detail page (Overview, Leadership,
   News, Contact, Services, Careers, Legislation & Policies, Search). */
.rak-pagehead__title{ font-size:var(--fs-display-md2); line-height:var(--lh-display-md2); font-weight:var(--fw-bold); letter-spacing:var(--tracking-display); color:var(--text-primary); text-wrap:balance; padding-bottom:0!important; }
.rak-pagehead__desc{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:60ch; }
/* Lede paragraph: constrained + justified on desktop, full width on mobile. */
.lede-justify{ max-width:60%; }
@media (max-width:900px){ .lede-justify{ max-width:100%; } }
@media (max-width:640px){ .rak-pagehead__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } }

/* ---------------- TEXT BLOCK ---------------- */
.rak-tb{ font-family:var(--font-sans); max-width:var(--rak-tb-max,62ch); display:flex; flex-direction:column; }
.rak-tb--center{ text-align:center; align-items:center; margin-inline:auto; }
.rak-tb__eyebrow{ font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:12px; }
.rak-tb__title{ font-weight:var(--fw-medium); letter-spacing:var(--tracking-display); color:var(--text-primary); text-wrap:balance; }
.rak-tb--lg .rak-tb__title{ font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); }
.rak-tb--md .rak-tb__title{ font-size:var(--fs-display-md); line-height:var(--lh-display-md); }
.rak-tb--sm .rak-tb__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
.rak-tb__subtitle{ margin-top:16px; font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); color:var(--text-primary); text-wrap:pretty; }
.rak-tb__body{ margin-top:20px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); text-wrap:pretty; }
.rak-tb__caption{ margin-top:16px; font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--text-tertiary); }
.rak-tb__cta{ margin-top:24px; }

/* ---------------- ACTION CARD ---------------- */
.rak-action{ display:flex; align-items:center; gap:16px; width:100%; box-sizing:border-box; padding:16px; background:var(--gray-100); border:0; border-radius:var(--radius-md); cursor:pointer; text-align:start; text-decoration:none; color:var(--text-primary); font-family:var(--font-sans); transition:background-color .15s ease; }
.rak-action:hover{ background:var(--gray-150); color:var(--text-primary); text-decoration:none; }
.rak-action:active{ background:var(--gray-200); }
.rak-action__text{ flex:1 1 auto; min-width:0; }
.rak-action__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-primary); }
.rak-action__icon{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-circle); background:var(--surface-inverse); color:var(--text-inverse); display:inline-flex; align-items:center; justify-content:center; transition:transform .15s ease; }
.rak-action:hover .rak-action__icon{ transform:translateX(2px); }
[dir="rtl"] .rak-action{ flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .rak-action__icon svg{ transform:scaleX(-1); }

/* ---------------- INFORMATION / MEDIA CARD ---------------- */
.rak-info{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-xl); aspect-ratio:2/1; color:var(--color-white); text-decoration:none; background:var(--gray-300); }
.rak-info__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rak-info__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,25,24,0) 38%,rgba(26,25,24,.78) 100%); }
.rak-info__body{ position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:32px; }
.rak-info__title{ font-family:var(--font-sans); font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); color:var(--color-white); max-width:22ch; text-wrap:balance; }
.rak-info__cta{ flex:0 0 auto; }
@media (max-width:640px){ .rak-info__body{ padding:20px; flex-direction:column; align-items:flex-start; } .rak-info__title{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); } }

/* ---------------- EXPANDABLE SECTION ---------------- */
.rak-expand{ border-bottom:1px solid var(--gray-150); padding:24px 0; }
/* Top-level sections (e.g. Legislations) get scroll-margin so the sticky header
   doesn't cover the title when the side nav scrolls one into view. */
.rak-expand[id]{ scroll-margin-top:88px; }
.rak-expand__head{ display:flex; align-items:flex-start; gap:20px; width:100%; background:transparent; border:0; padding:0; cursor:pointer; text-align:start; font-family:var(--font-sans); color:var(--text-primary); }
.rak-expand__titles{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.rak-expand__title{ display:block; font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); font-weight:var(--fw-medium); letter-spacing:var(--tracking-display); }
.rak-expand__summary{ display:block; margin-top:8px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.rak-expand__toggle{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-circle); background:var(--surface-inverse); color:var(--text-inverse); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background-color .15s ease; }
.rak-expand__head:hover .rak-expand__toggle{ background:var(--gray-800); }
.rak-expand__panel{ overflow:hidden; transition:grid-template-rows .25s ease; display:grid; grid-template-rows:0fr; }
.rak-expand.is-open > .rak-expand__panel{ grid-template-rows:1fr; }
.rak-expand__panel-inner{ min-height:0; }
.rak-expand__body{ padding-top:16px; max-width:70ch; }
.rak-expand__text{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); }
.rak-expand .rak-expand__minus{ display:none; }
.rak-expand.is-open > .rak-expand__head .rak-expand__minus{ display:inline-flex; }
.rak-expand.is-open > .rak-expand__head .rak-expand__plus{ display:none; }

/* Legislations side nav — sticky category list. The aside must stretch to the
   row height (svc-layout is align-items:start) so the sticky nav has room to
   travel as the taller right column scrolls. */
.leg-aside{ align-self:stretch; }
.leg-nav{ display:flex; flex-direction:column; position:sticky; top:100px; }
.leg-nav__title{ font-size:var(--fs-display-xs); font-weight:var(--fw-medium); margin-bottom:16px; }
.leg-nav .svc-cat{ padding:12px 0; padding-inline-start:16px; }
.rak-expand[id]{ scroll-margin-top:100px; }
@media (max-width:900px){ .leg-nav{ position:static; top:auto; } }
/* Human Resources Law — each chapter is an outlined card in the selected-
   category panel, with an outlined +/- toggle (not the solid inverse circle
   used elsewhere) that picks up the brand colour on hover and while open. */
.leg-panel .rak-expand{ border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:20px 24px; }
.leg-panel .rak-expand + .rak-expand{ margin-top:16px; }
.leg-panel .rak-expand__head{ gap:16px; }
.leg-panel .rak-expand__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.leg-panel .rak-expand.is-open{ border-color:var(--color-brand); }
.leg-panel .rak-expand__toggle{ width:36px; height:36px; background:transparent; color:var(--text-primary); border:1.5px solid var(--gray-200); transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.leg-panel .rak-expand__head:hover .rak-expand__toggle{ background:transparent; border-color:var(--color-brand); color:var(--color-brand); }
.leg-panel .rak-expand__title{ transition:color .15s ease; }
.leg-panel .rak-expand__head:hover .rak-expand__title{ color:var(--color-brand); }
.leg-panel .rak-expand.is-open .rak-expand__toggle{ border-color:var(--color-brand); color:var(--color-brand); }
.law-article + .law-article{ margin-top:24px; padding-top:24px; border-top:1px solid var(--gray-150); }
.law-article__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-medium); margin-bottom:8px; }
/* Same shared prose colour as the article/detail bodies. */
.law-article__content{ color:var(--text-secondary); }
.law-article__content ol, .law-article__content ul{ margin:8px 0; padding-inline-start:24px; }
.law-article__content li + li{ margin-top:6px; }
.law-article__content p + p{ margin-top:8px; }
/* Selected-category panel — paginated document list. Each row is title (+ any
   description) with a soft circular download button that lifts to the brand
   colour on hover, matching the CTA buttons. */
.leg-panel{ min-width:0; padding-bottom:48px; }
.leg-docs{ list-style:none; margin:0; padding:0; }
.leg-doc{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; border-bottom:1px solid var(--gray-150); }
/* The row's text is a link to the document (see LegislationList.jsx); it keeps
   the row's own colours rather than the default link styling. */
.leg-doc__main{ min-width:0; display:block; color:inherit; text-decoration:none; }
.leg-doc__main:hover{ text-decoration:none; }
.leg-doc__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-medium); color:var(--text-primary); transition:color .15s ease; }
/* Hovering a document row turns it brand — the title and the eye button
   together, so the row reads as one target (same treatment as the news rows and
   the HR Law chapters below). */
.leg-doc:hover .leg-doc__title{ color:var(--color-brand); }
.leg-doc:hover .leg-doc__dl.rak-iconbtn{ background:var(--color-brand); color:var(--color-white); }
.leg-doc__desc{ margin-top:6px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.leg-doc__dl{ flex:0 0 auto; text-decoration:none; transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.leg-doc__dl.rak-iconbtn:hover{ background:var(--color-brand); color:var(--color-white); transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.leg-doc__dl.rak-iconbtn:active{ transform:translateY(0) scale(.94); box-shadow:none; }

/* ---------------- INPUT / FORM FIELDS ---------------- */
.rak-field{ display:flex; flex-direction:column; width:100%; font-family:var(--font-sans); gap:8px; }
.rak-field__label{ font-size:var(--fs-text-md); font-weight:var(--fw-medium); color:var(--text-primary); }
.rak-control{
  box-sizing:border-box; width:100%; min-height:56px; padding:15px 16px;
  border-radius:var(--radius-md); background:transparent; border:1.5px solid var(--gray-200);
  font-family:var(--font-sans); font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-primary);
  transition:border-color .15s ease,background-color .15s ease;
}
textarea.rak-control{ min-height:150px; resize:vertical; }
.rak-control::placeholder{ color:var(--text-tertiary); }
.rak-control:hover{ border-color:var(--gray-400); }
.rak-control:focus{ outline:0; border-color:var(--border-focus); background:var(--surface-page); }
.rak-field--filled .rak-control{ background:var(--gray-50); border-color:transparent; }
.rak-field--filled .rak-control:hover{ background:var(--gray-100); }
.rak-field--filled .rak-control:focus{ background:var(--surface-page); border-color:var(--border-focus); }
.rak-field__hint{ font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--text-secondary); padding:0 4px; }
.rak-form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.rak-form-grid .rak-field--full{ grid-column:1 / -1; }
@media (max-width:720px){ .rak-form-grid{ grid-template-columns:1fr; } }

/* checkbox / radio */
.rak-choice{ display:inline-flex; align-items:flex-start; gap:12px; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary); }
.rak-choice input{ position:absolute; opacity:0; width:0; height:0; }
.rak-choice__box{ flex:0 0 auto; width:24px; height:24px; box-sizing:border-box; border:1.5px solid var(--gray-400); background:var(--surface-page); display:inline-flex; align-items:center; justify-content:center; color:var(--color-white); transition:background-color .12s ease,border-color .12s ease; }
.rak-choice--checkbox .rak-choice__box{ border-radius:var(--radius-sm); }
.rak-choice--radio .rak-choice__box{ border-radius:var(--radius-circle); }
.rak-choice:hover .rak-choice__box{ border-color:var(--gray-600); }
.rak-choice input:checked + .rak-choice__box{ background:var(--surface-inverse); border-color:var(--surface-inverse); }
.rak-choice__check{ transform:scale(0); transition:transform .12s ease; }
.rak-choice input:checked + .rak-choice__box .rak-choice__check{ transform:scale(1); }
.rak-choice__dot{ width:10px; height:10px; border-radius:var(--radius-circle); background:var(--text-inverse); transform:scale(0); transition:transform .12s ease; }
.rak-choice input:checked + .rak-choice__box .rak-choice__dot{ transform:scale(1); }

/* ---------------- CAROUSEL DOTS ---------------- */
.rak-dots{ display:inline-flex; align-items:center; gap:16px; }
.rak-dots__track{ display:flex; align-items:center; gap:8px; }
.rak-dots__dot{ width:10px; height:10px; border-radius:var(--radius-circle); background:var(--gray-200); border:0; padding:0; cursor:pointer; transition:background-color .2s ease,transform .2s ease; }
.rak-dots__dot.is-active{ background:var(--surface-inverse); }
.rak-dots__dot:hover{ background:var(--gray-400); }
.rak-dots__dot.is-active:hover{ background:var(--surface-inverse); }

/* ---------------- MEDIA PLACEHOLDER ---------------- */
.rak-ph{ background:var(--gray-200); position:relative; overflow:hidden; }
.rak-ph--warm{ background:linear-gradient(135deg,var(--gray-200),var(--gray-300)); }
.rak-ph::after{ content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gray-500); font-size:var(--fs-text-sm); letter-spacing:.04em; }
.rak-ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   SITE-SPECIFIC COMPOSITIONS
   ============================================================ */

/* HERO (home) */
/* Hero height is proportional to the viewport (not a fixed pixel value) so the
   next section peeks in by the same amount on every screen size, large or small.
   ~80dvh with a pixel floor; vh fallback for browsers without dvh/max(). */
.hero{ position:relative; width:100%; min-height:500px; height:500px; display:flex; align-items:flex-end; overflow:hidden; color:var(--color-white); }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,25,24,0) 40%,rgba(26,25,24,.72) 100%); z-index:1; }
.hero__inner{ position:relative; z-index:2; max-width:var(--container-max); margin:0 auto; width:100%; padding:0 var(--gutter-desktop) 64px; box-sizing:border-box; }
.hero__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--tracking-display); text-wrap:balance; }
.hero__title-line{ display:block; }
/* Second line runs longer — let it span up to 75% of the hero for a stronger,
   wrapping "liner" beneath the short first line. */
.hero__title-line:last-child{ max-width:75%; text-wrap:balance; }
.hero__sub{ margin-top:20px; font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:rgba(255,255,255,.9); max-width:52ch; }
@media (max-width:900px){ .hero{ min-height:400px; height:400px; } .hero__inner{ padding:0 var(--gutter-mobile) 40px; } .hero__title{ font-size:var(--fs-display-md); line-height:var(--lh-display-md); } .hero__title-line:last-child{ max-width:100%; } }

/* Two-column media+text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--top{ align-items:start; }
.split--text-first{ direction:ltr; }
.split__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/2.7; }
.split__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split__body h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
/* Consistent 20px top margin between heading and body across every home section. */
.split__body p{ margin-top:20px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); }
/* Body copy keeps its natural ragged edge — no justification anywhere in the
   home split sections. */
.split__body .rak-btn{ margin-top:28px; }
.split__body .vision-note{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:28px; } .split__body h2{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } }

/* Section header row (title/cta left, desc right) */
.sec-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:36px; }
.sec-head__left h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
.sec-head__left .rak-btn{ margin-top:28px; }
.sec-head__left .rak-btn--solid:hover{ background:var(--color-brand); }
.sec-head__right{ display:flex; justify-content:flex-end; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); align-self:start; }
@media (max-width:820px){ .sec-head{ grid-template-columns:1fr; gap:20px; } .sec-head__left h2{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } .sec-head__right{ justify-content:flex-start; } }

/* Feature card grid (What we do) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card{ background:var(--gray-50); border-radius:var(--radius-xl); overflow:hidden; display:flex; flex-direction:column; }
.feature-card__media{ aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; }
.feature-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-card__body{ padding:24px; }
.feature-card__body h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.feature-card__body p{ margin-top:12px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr; } }

/* Horizontal scroll carousel track */
.carousel{ position:relative; }
.carousel__track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px)/3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:none; }
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track > *{ scroll-snap-align:start; }
.carousel__nav{ display:flex; justify-content:center; margin-top:32px; }
@media (max-width:900px){ .carousel__track{ grid-auto-columns:88%; } }

/* News media card */
.news-card{ position:relative; display:block; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:3/4; background:var(--gray-300); color:var(--text-primary); text-decoration:none; box-shadow:var(--shadow-xs); transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease; }
.news-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text-primary); }
.news-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Semi-transparent white caption (≈94%) — modern, readable over the image.
   No backdrop blur here: blurring while the card lifts / image zooms is what
   made the hover feel janky. */
.news-card__cap{ position:absolute; left:16px; right:16px; bottom:16px; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.55); border-radius:var(--radius-lg); padding:16px 18px; display:flex; align-items:flex-start; gap:14px; box-shadow:var(--shadow-sm); }
.news-card__text{ flex:1 1 auto; min-width:0; }
/* Two-line structure: title (h3) over a muted subtitle (p). Both clamp so the
   frosted card keeps a tidy, consistent height. */
.news-card__title{ font-weight:var(--fw-medium); font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card__sub{ margin-top:6px; font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card__cap .rak-iconbtn{ flex:0 0 auto; margin-top:2px; transition:background-color .2s ease, transform .2s ease; }
/* The arrow adopts the brand colour on card hover, like the other CTAs. */
.news-card:hover .rak-iconbtn{ background:var(--color-brand); color:var(--color-white); transform:translateX(2px); }
[dir="rtl"] .news-card:hover .rak-iconbtn{ transform:translateX(-2px); }

/* ---------------- NEWS INDEX (filters + featured + list) ---------------- */
.news-filters{ display:flex; flex-direction:column; gap:32px; position:sticky; top:100px; }
@media (max-width:900px){ .news-filters{ position:static; top:auto; } }

.news-search{ position:relative; display:flex; align-items:center; }
.news-search__icon{ position:absolute; inset-inline-start:2px; display:inline-flex; color:var(--text-tertiary); pointer-events:none; }
.news-search__input{
  box-sizing:border-box; width:100%; min-height:44px; padding:10px 4px; padding-inline:30px 48px;
  border:0; border-bottom:1.5px solid var(--gray-200); border-radius:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary);
  transition:border-color .15s ease;
}
.news-search__input::placeholder{ color:var(--text-tertiary); }
/* Placeholder clears on focus so the caret sits on an empty line (same as the
   global search field). */
.news-search__input:focus::placeholder{ color:transparent; }
.news-search__input:hover{ border-color:var(--gray-400); }
.news-search__input:focus{ outline:0; border-color:var(--color-brand); }
.news-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.news-facet__title{ font-size:var(--fs-text-md); font-weight:var(--fw-medium); color:var(--text-primary); margin-bottom:14px; }
.news-facet__list{ display:flex; flex-direction:column; gap:14px; }
.news-facet__list .rak-choice{ font-size:var(--fs-text-md); color:var(--text-secondary); }

.news-eyebrow{ font-size:var(--fs-text-sm); font-weight:var(--fw-medium); letter-spacing:.04em; color:var(--text-tertiary); margin-bottom:20px; }
.news-featured .news-eyebrow{ font-size:var(--fs-text-xl); }

.news-featured{ background:var(--gray-50); border-radius:var(--radius-2xl); padding:28px; margin-bottom:48px; }
.news-featured__media{ display:block; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); margin-bottom:20px; }
.news-featured__media img{ width:100%; height:100%; object-fit:cover; }
.news-featured__date{ font-size:var(--fs-text-sm); color:var(--text-secondary); margin-bottom:10px; }
.news-featured__title{ font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); font-weight:var(--fw-medium); text-wrap:balance; }
.news-featured__title a{ color:var(--text-primary); text-decoration:none; }
.news-featured__title a:hover{ color:var(--color-brand); }
.news-featured__excerpt{ margin-top:10px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.news-featured__lead .rak-btn{ margin-top:16px; }
.news-featured__aside{ margin-top:28px; padding-top:28px; border-top:1px solid var(--gray-150); }

.news-list{ display:flex; flex-direction:column; }
.news-row{ display:flex; gap:24px; align-items:flex-start; }
.news-list .news-row{ padding:28px 0; border-top:1px solid var(--gray-150); }
.news-list .news-row:first-child{ border-top:0; padding-top:0; }
.news-row__main{ flex:1 1 auto; min-width:0; }
.news-row__date{ font-size:var(--fs-text-sm); color:var(--text-secondary); margin-bottom:8px; }
.news-row__title{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); font-weight:var(--fw-medium); text-wrap:balance; }
.news-row__title a{ color:var(--text-primary); text-decoration:none; }
.news-row__title a:hover{ color:var(--color-brand); }
.news-row__excerpt{ margin-top:8px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.news-row .rak-btn{ margin-top:16px; }
.news-row__thumb{ flex:0 0 auto; width:120px; height:120px; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-200); }
.news-row__thumb img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){
  .news-row{ flex-direction:column-reverse; }
  .news-row__thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}

.news-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:48px; margin-bottom:72px; flex-wrap:wrap; }
.news-pager__num{
  min-width:40px; height:40px; padding:0 8px; border:0; border-radius:var(--radius-circle);
  background:transparent; color:var(--text-secondary); font-family:var(--font-sans); font-size:var(--fs-text-md);
  cursor:pointer; transition:background-color .15s ease,color .15s ease;
}
.news-pager__num:hover{ background:var(--gray-100); color:var(--text-primary); }
.news-pager__num.is-active{ background:var(--surface-inverse); color:var(--text-inverse); }
.news-pager__gap{ min-width:24px; text-align:center; color:var(--text-tertiary); }

/* Objective carousel slide (image + overlay card) */
.obj-split{ display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center; }
.obj-split__left h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
.obj-split__left p{ margin-top:20px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:42ch; }
.obj-split__left .rak-dots{ margin-top:32px; }
.obj-stage{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/11; background:var(--gray-200); }
.obj-slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; }
.obj-slide.is-active{ opacity:1; }
.obj-slide__media{ position:absolute; inset:0; }
.obj-stage__media{ position:absolute; inset:0; }
.obj-stage__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.obj-card{ position:absolute; left:32px; right:32px; bottom:32px; background:var(--surface-page); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); }
.obj-card__eyebrow{ font-size:var(--fs-text-sm); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; color:var(--text-brand); }
.obj-card h3{ margin-top:8px; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.obj-card p{ margin-top:10px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
@media (max-width:900px){ .obj-split{ grid-template-columns:1fr; gap:28px; } .obj-split__left h2{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } .obj-card{ left:16px; right:16px; bottom:16px; padding:20px; } }

/* Banner (careers / info) */
.banner{ background:var(--gray-100); border-radius:var(--radius-xl); padding:36px 40px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.banner h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.banner p{ color:var(--text-secondary); font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
.banner__text p{ margin-top:4px; }
/* Brand-red hover so the CTA reads as a clear, noticeable interaction. */
.banner__cta:hover{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
@media (max-width:820px){ .banner{ grid-template-columns:1fr; gap:18px; text-align:start; } }

/* Growing our family — new joiners (photos are non-clickable) */
.joiners-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.joiner{ margin:0; }
.joiner__photo{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; background:var(--gray-300); }
.joiner__cap{ margin-top:16px; }
.joiner__name{ font-weight:var(--fw-medium); font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.joiner__role{ margin-top:2px; color:var(--text-secondary); font-size:var(--fs-text-sm); }
@media (max-width:900px){ .joiners-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (max-width:480px){ .joiners-grid{ grid-template-columns:1fr 1fr; } }

/* Values cards */
.values-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:720px){ .values-grid{ grid-template-columns:1fr; } }

/* Careers programs — two full-width cards spanning the container, matching the
   grid pattern used across the site's other sections. */
.programs{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:820px){ .programs{ grid-template-columns:1fr; } }

.program-card{ display:flex; flex-direction:column; border:1px solid var(--gray-150); border-radius:var(--radius-xl); overflow:hidden; color:var(--text-primary); text-decoration:none; background:var(--gray-100); transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.program-card:hover{ border-color:var(--color-brand); box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; color:var(--text-primary); }
.program-card__media{ aspect-ratio:16/7; overflow:hidden; background:var(--gray-100); }
.program-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.program-card__body{ padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.program-card__body h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); color:var(--text-primary); }
.program-card__body p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
/* CTA uses the design-system soft button, but with a translucent white fill for
   a lighter, more modern look; it adopts the brand accent on card hover. */
.program-card__cta{ margin-top:14px; --_bg:rgba(255,255,255,0.55); --_bgh:rgba(255,255,255,0.8); backdrop-filter:blur(4px); }
.program-card:hover .program-card__cta{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
.program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(3px); }
[dir="rtl"] .program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(-3px); }

/* ---- ABOUT: leadership pull-quote (top of the About page) ---- */
.about-quote{ margin:0; background:var(--gray-600); padding-block:72px; }
.about-quote__inner{ display:grid; grid-template-columns:1fr minmax(0,44%); gap:64px; align-items:stretch; }
.about-quote__body{ display:flex; flex-direction:column; justify-content:space-between; }
.about-quote__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:1136/904; background:var(--gray-300); align-self:center; width:100%; }
.about-quote__media img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:var(--radius-xl); }
.about-quote__body blockquote{ margin:0; font-size:var(--fs-display-xs); line-height:var(--lh-display-xs);
  color:var(--color-white); font-weight:var(--fw-regular); letter-spacing:var(--tracking-display); }
.about-quote figcaption{ margin-top:64px; }
.about-quote__author{ display:block; font-weight:var(--fw-medium); color:var(--color-white); font-size:var(--fs-text-lg); }
.about-quote__role{ display:block; margin-top:2px; color:var(--color-white); font-size:var(--fs-text-sm); }
@media (max-width:820px){
  .about-quote{ padding-block:48px; }
  .about-quote__inner{ grid-template-columns:1fr; gap:28px; }
  .about-quote__media{ align-self:stretch; order:-1; width:100%; transform:scale(.9); }
  .about-quote figcaption{ margin-top:28px; }
  .about-quote__body blockquote{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
}

/* ---- ABOUT: vision (larger copy, vertically centered beside the image) ---- */
.split--vision{ align-items:center; }
.split--vision .split__body{ max-width:46ch; }
.split--vision .split__body p{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
@media (max-width:900px){ .split--vision{ align-items:start; } }

/* ---- ABOUT: values accordion + media ---- */
.about-values{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-values__heading{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); margin-bottom:8px; }
.about-values__list{ margin-top:16px; }
.about-values__list .rak-expand{ padding:20px 0; }
.about-values__list .rak-expand:first-child{ border-top:1px solid var(--gray-150); }
.about-values__list .rak-expand__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.about-values__list .rak-expand__text{ }
.about-values__list .rak-expand__toggle{ width:32px; height:32px; }
.about-values__cta{ margin-top:28px; }
.about-values__cta.rak-btn--solid:hover{ background:var(--color-brand); }
.about-values__list .rak-expand__head:hover .rak-expand__toggle{ background:var(--color-brand); }
/* Fixed by aspect-ratio and pinned to the top so opening accordions grows the
   left column without stretching the image. */
.about-values__media{ align-self:start; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:3/3.6; background:var(--gray-300); position:sticky; top:100px; }
.about-values__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .about-values{ grid-template-columns:1fr; gap:32px; }
  .about-values__heading{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
  .about-values__media{ position:static; top:auto; aspect-ratio:4/2.7; }
}

/* ---- ABOUT: wide objectives carousel (full-width stage + overlay card) ---- */
.wide-carousel__stage{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:24/9; background:var(--gray-200); }
.wide-carousel__media{ position:absolute; inset:0; }
.wide-carousel__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.wide-carousel__slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.wide-carousel__slide.is-active{ opacity:1; pointer-events:auto; }
.wide-carousel__card{ position:absolute; inset-inline-start:32px; bottom:32px; max-width:420px; background:var(--surface-page); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-md); }
.wide-carousel__eyebrow{ font-size:var(--fs-text-sm); font-weight:var(--fw-medium); letter-spacing:.06em; text-transform:uppercase; color:var(--text-brand); }
.wide-carousel__card h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.wide-carousel__card p{ margin-top:10px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.wide-carousel__nav{ display:flex; justify-content:center; margin-top:32px; }
/* Prev/next arrows fill with the brand colour on hover. */
.wide-carousel__nav .rak-iconbtn:hover{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
@media (max-width:900px){
  .wide-carousel__stage{ aspect-ratio:3/4; }
  /* Stretched to both edges of the stage — inset-inline keeps that true in RTL,
     where the old physical left/right pair left the card anchored to one side and
     shrink-wrapped to its text. */
  .wide-carousel__card{ inset-inline:16px; bottom:16px; max-width:none; padding:20px; }
}

/* ---- ABOUT DETAIL (Vision / Values / Objectives long-form pages) ---- */
/* The title and hero span the full (wider) column and share its left edge; the
   reading copy sits in a narrower column centered beneath the hero, so text stays
   comfortable while the image reads wide. */
.about-detail{ max-width:1040px; margin:0 auto; --about-detail-read:760px; }
.about-detail__body,
.about-detail__foot,
.about-detail__cta{ max-width:var(--about-detail-read); margin-inline:auto; }
.about-detail__head{ width:90%; margin-inline:auto; }
/* Same 40px page heading as .rak-pagehead__title (Vision, Values, Objectives). */
.about-detail__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-md2); line-height:var(--lh-display-md2); letter-spacing:var(--tracking-display); text-wrap:balance; }
.about-detail__hero{ width:90%; margin-top:32px; margin-inline:auto; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/7; background:var(--gray-200); }
.about-detail__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-detail__body{ margin-top:40px; }
.about-detail__body > p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-secondary); }
.about-detail__body > p + p{ margin-top:20px; }
.about-detail__figure{ width:90%; margin:36px auto; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.about-detail__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-detail__section{ margin-top:40px; }
.about-detail__section h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); letter-spacing:var(--tracking-display); margin-bottom:12px; text-wrap:balance; }
.about-detail__section p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-secondary); }
.about-detail__section p + p{ margin-top:20px; }
.about-detail__cta{ margin-top:56px; background:var(--gray-100); border-radius:var(--radius-2xl); padding:40px 40px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:32px; }
.about-detail__cta h2{ font-weight:var(--fw-medium); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); letter-spacing:var(--tracking-display); max-width:32ch; text-wrap:balance; }
.about-detail__cta .rak-btn{ flex:none; }
@media (max-width:640px){
  .about-detail__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
  .about-detail__cta{ padding:28px 24px; flex-direction:column; align-items:flex-start; gap:24px; }
  .about-detail__cta h2{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
}

/* ---- LEADERSHIP ---- */
.lead-intro{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.lead-intro h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
.lead-intro p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.lead-intro__body p + p{ margin-top:20px; }
@media (max-width:820px){ .lead-intro{ grid-template-columns:1fr; gap:24px; } }
.lead-layout{ display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:start; }
.lead-aside h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); }
.lead-aside p{ margin-top:12px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
@media (max-width:900px){ .lead-layout{ grid-template-columns:1fr; gap:32px; } }
/* Our Leadership section carries the same warm background as the message quote. */
#leadership{ background:var(--gray-100); }
/* Featured leader: the image fills the full width of the right-hand column. */
.lead-featured{ display:block; text-decoration:none; color:inherit; margin-bottom:12px; }
.lead-featured:hover{ text-decoration:none; color:inherit; }
.lead-featured__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/11; background:var(--gray-300); }
.lead-featured__name{ margin-top:20px; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.lead-featured__role{ margin-top:4px; color:var(--text-secondary); font-size:var(--fs-text-md); }
.lead-featured .rak-btn{ margin-top:28px; }
/* Leadership card with a summary beside the portrait. The heading sits top-left
   with the summary/name beneath it (left column); the portrait fills the right
   column across both rows. */
.lead-featured--row{ display:grid; grid-template-columns:2fr 3fr; column-gap:56px; align-items:start; padding-right:48px; }
.lead-featured--row .lead-featured__heading{ grid-column:1; grid-row:1; }
.lead-featured--row .lead-featured__info{ grid-column:1; grid-row:2; }
.lead-featured--row .lead-featured__media{ grid-column:2; grid-row:1 / span 2; align-self:stretch; }
.lead-featured--row .lead-featured__name{ margin-top:56px; }
.lead-featured__heading{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); margin-bottom:0!important; }
.lead-featured__summary{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); }
.lead-featured__summary + .lead-featured__summary{ margin-top:12px; }
@media (max-width:720px){
  /* Stack in source order: heading, then portrait, then quote/name. */
  .lead-featured--row{ grid-template-columns:1fr; gap:20px; padding-right:0; }
  .lead-featured--row .lead-featured__heading{ grid-column:1; grid-row:auto; margin-bottom:0; }
  .lead-featured--row .lead-featured__info,
  .lead-featured--row .lead-featured__media{ grid-column:1; grid-row:auto; }
}
.lead-row{ display:flex; align-items:center; gap:24px; padding:24px 0; border-top:1px solid var(--gray-150); text-decoration:none; color:inherit; }
.lead-row:hover{ text-decoration:none; color:inherit; }
.lead-row__body{ flex:1 1 auto; }
.lead-row__name{ font-weight:var(--fw-medium); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
.lead-row__role{ margin-top:4px; color:var(--text-secondary); font-size:var(--fs-text-md); }
.lead-row .rak-btn{ margin-top:14px; }
.lead-row__media{ flex:0 0 auto; width:120px; height:96px; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-300); }
@media (max-width:520px){ .lead-row__media{ width:88px; height:72px; } }

/* GM message detail — quote (left) sits beside the portrait (right) at matching
   height; the message body flows beneath the portrait in the right column. */
.msg-top{ display:grid; grid-template-columns:3fr 5fr; column-gap:48px; row-gap:36px; align-items:start; }
.msg-quote{ grid-column:1; grid-row:1; align-self:stretch; background:var(--gray-50); border-radius:var(--radius-xl); padding:32px; }
.msg-quote__text{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:var(--text-primary); text-align:start; }
.msg-quote__text p + p{ margin-top:16px; }
.msg-quote__by{ margin-top:28px; font-size:var(--fs-text-sm); line-height:var(--lh-text-sm); color:var(--text-secondary); }
.msg-quote__by b{ display:block; color:var(--text-primary); font-weight:var(--fw-medium); }
.msg-portrait{ grid-column:2; grid-row:1; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:3/2; background:var(--gray-300); }
.msg-portrait img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
/* Body text sits under the portrait, aligned within the right column. */
.msg-body{ grid-column:2; grid-row:2; max-width:none; }
.msg-body h2{ margin-bottom:24px; }
.msg-body p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-secondary); }
.msg-body p + p{ margin-top:20px; }
.msg-sign{ margin-top:32px; }
.msg-sign b{ display:block; font-weight:var(--fw-medium); font-size:var(--fs-text-lg); }
.msg-sign span{ color:var(--text-secondary); font-size:var(--fs-text-md); }
@media (max-width:820px){
  .msg-top{ grid-template-columns:1fr; gap:28px; }
  .msg-quote, .msg-portrait, .msg-body{ grid-column:1; grid-row:auto; }
  /* Portrait leads on mobile, above the quote and message body. */
  .msg-portrait{ aspect-ratio:4/3; order:-1; }
  /* Portrait leads directly under the subtitle on mobile — drop the section's
     top padding so the image sits close beneath the header. */
  .msg-section{ padding-top:0; }
}

/* ---- SERVICES ---- */
/* The intro is a plain .lead-intro, same as Careers: the heading and the copy
   sit in its two-column grid across the full container. Capping the section at
   60% squeezed that grid into the left of the page instead. */
/* min-height keeps the page a stable height across service categories so the
   footer never shifts when the filtered list grows or shrinks. */
.svc-layout{ display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start; min-height:620px; }
@media (max-width:1199px){ .svc-layout{ gap:64px; } }
@media (max-width:900px){ .svc-layout{ grid-template-columns:1fr; gap:48px; min-height:0; } }
.svc-search{ position:relative; margin-bottom:32px; }
/* Search field uses an underline only — no box border, no rounded corners. */
/* Logical padding/offsets: the icon leads and the clear button trails in both
   directions, where the old physical left/right pair stacked them on each other
   in Arabic. */
.svc-search .rak-control{ padding-block:12px; padding-inline:36px 48px; border:0; border-bottom:1.5px solid var(--gray-200); border-radius:0; background:transparent; }
.svc-search .rak-control:focus{ background:transparent; border-bottom-color:var(--color-brand); }
/* Scoped to .svc-search so the service-page form fields keep their placeholders. */
.svc-search .rak-control:focus::placeholder{ color:transparent; }
.svc-search__ico{ position:absolute; inset-inline-start:6px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); pointer-events:none; }
/* Typeahead suggestions dropdown */
.svc-suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; margin:0; padding:6px; list-style:none; background:var(--surface-page); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.svc-suggest__item{ display:block; width:100%; text-align:start; background:transparent; border:0; border-radius:var(--radius-sm); cursor:pointer; padding:10px 12px; font-family:var(--font-sans); font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-primary); }
.svc-suggest__item:hover,.svc-suggest__item.is-active{ background:var(--gray-100); color:var(--color-brand); }
.svc-suggest__cat{ display:block; margin-top:2px; font-size:var(--fs-text-sm); line-height:1.3; color:var(--text-tertiary); }
.svc-suggest__empty{ padding:10px 12px; font-size:var(--fs-text-sm); color:var(--text-tertiary); }
.svc-cats h4{ font-size:var(--fs-display-xs); font-weight:var(--fw-medium); margin-bottom:16px; }
.svc-cats__list{ display:flex; flex-direction:column; }
/* Logical padding + indicator inset so the active marker sits before the label
   in both directions: left of it in English, right of it in Arabic. */
.svc-cat{ position:relative; text-align:start; background:transparent; border:0; cursor:pointer; padding:12px 0; padding-inline-start:16px; font-family:var(--font-sans); font-size:var(--fs-text-lg); color:var(--text-secondary); }
.svc-cat:hover{ color:var(--color-brand); }
.svc-cat.is-active{ color:var(--color-brand); font-weight:var(--fw-medium); }
.svc-cat.is-active::before{ content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:2px; background:var(--color-brand); border-radius:2px; }

/* Desktop keeps the authored 48px gap under the intro; on mobile/tablet the
   description sits closer to the search below it. */
.svc-intro{ padding-bottom:48px; }
@media (max-width:900px){
  .svc-intro{ padding-bottom:0; }
  .svc-listing{ padding-top:24px; }
}

/* Categories: the desktop chip list (Services' .svc-cats / Legislations'
   .leg-nav) is swapped for a dropdown (.svc-catsel) at ≤900px, where the
   sidebar stacks full-width above the list. */
.svc-catsel{ display:none; }
@media (max-width:900px){
  .svc-cats,
  .leg-nav{ display:none; }
  .svc-catsel{ display:block; position:relative; }
}
.svc-catsel__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; box-sizing:border-box; text-align:start; cursor:pointer; font-family:var(--font-sans);
  background:var(--gray-100); border:2px solid transparent; border-radius:var(--radius-lg); padding:14px 20px;
}
.svc-catsel.is-open .svc-catsel__trigger{ border-color:var(--text-primary); }
.svc-catsel__labels{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.svc-catsel__label{ font-size:var(--fs-text-sm); line-height:1.2; color:var(--text-tertiary); }
.svc-catsel__value{ font-size:var(--fs-text-lg); line-height:1.2; color:var(--text-primary); }
.svc-catsel__chev{ flex:0 0 auto; display:inline-flex; color:var(--text-primary); transition:transform .18s ease; }
.svc-catsel.is-open .svc-catsel__chev{ transform:rotate(180deg); }
.svc-catsel__menu{
  position:absolute; top:calc(100% + 12px); left:0; right:0; z-index:30;
  margin:0; padding:8px; list-style:none;
  background:var(--surface-page); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.svc-catsel__opt{
  display:flex; align-items:center; gap:16px; width:100%; box-sizing:border-box;
  text-align:start; cursor:pointer; background:transparent; border:0; border-radius:var(--radius-md);
  padding:14px 16px; font-family:var(--font-sans); font-size:var(--fs-text-lg); color:var(--text-primary);
}
.svc-catsel__opt:hover{ background:var(--gray-50); }
.svc-catsel__opt.is-active{ background:var(--gray-100); }
.svc-catsel__radio{
  flex:0 0 auto; width:22px; height:22px; box-sizing:border-box; position:relative;
  border:1.5px solid var(--gray-300); border-radius:var(--radius-circle);
}
.svc-catsel__opt.is-active .svc-catsel__radio{ border-color:var(--text-primary); }
.svc-catsel__opt.is-active .svc-catsel__radio::after{
  content:""; position:absolute; inset:4px; border-radius:var(--radius-circle); background:var(--text-primary);
}
.svc-banner{ display:flex; gap:14px; align-items:flex-start; background:var(--gray-100); border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:12px; color:var(--text-secondary); font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
.svc-banner svg{ flex:0 0 auto; color:var(--text-primary); margin-top:2px; }
.svc-item{ display:flex; align-items:center; gap:24px; padding:28px 0; border-bottom:1px solid var(--gray-150); text-decoration:none; color:inherit; }
.svc-item:hover{ text-decoration:none; color:inherit; }
.svc-item__body{ flex:1 1 auto; }
.svc-item__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.svc-item__title{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); transition:color .15s ease; }
.svc-item:hover .svc-item__title{ color:var(--color-brand); }
.svc-tag{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:var(--radius-pill); background:var(--gray-100); color:var(--text-secondary); font-size:var(--fs-text-sm); }
.svc-item__desc{ margin-top:10px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); max-width:70ch; }
.svc-item__ext{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; color:var(--text-tertiary); font-size:var(--fs-text-sm); }
/* Colour-only hover: the circle fills brand and the icon flips to white, with no
   positional shift. */
.svc-item__chev{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-circle); background:var(--gray-100); display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary); transition:background-color .15s ease,color .15s ease; }
.svc-item:hover .svc-item__chev{ background:var(--color-brand); color:var(--color-white); }
[dir="rtl"] .svc-item__chev svg{ transform:scaleX(-1); }

/* ---- FORMS PAGE ---- */
.form-page{ max-width:920px; }
.form-note{ background:var(--gray-50); border-radius:var(--radius-lg); padding:20px 24px; font-weight:var(--fw-medium); color:var(--text-primary); margin-bottom:40px; }

/* ---- ARTICLE (news / people hub) ---- */
.article{ max-width:760px; margin:0 auto; }
.article__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--tracking-display); text-wrap:balance; }
/* News article headlines read smaller than the display-lg used elsewhere. */
.article--news .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
.article__meta{ margin-top:16px; color:var(--text-secondary); font-size:var(--fs-text-sm); }
.article__hero{ margin-top:32px; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.article__body{ margin-top:40px; }
/* Body copy — paragraphs and list items alike — uses the one shared prose
   colour (--text-secondary); headings and the pull quote stay near-black. */
.article__body p,
.article__body li{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-secondary); }
.article__body p + p{ margin-top:20px; }
.article__body h2{ margin-top:40px; margin-bottom:4px; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.article__body blockquote{ margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid var(--color-brand); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:var(--text-primary); }
.article__link{ color:var(--text-brand); text-decoration:underline; text-underline-offset:2px; }
.article__link:hover{ text-decoration:none; }
@media (max-width:640px){ .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } }

/* ---- CONTACT ---- */
.contact-layout{ display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:32px; } }
.contact-aside{ position:sticky; top:96px; display:flex; flex-direction:column; }
@media (max-width:900px){ .contact-aside{ position:static; top:auto; } }
.contact-aside .svc-search{ margin-bottom:24px; }
.contact-nav a{ position:relative; display:block; padding:10px 0; padding-inline-start:16px; color:var(--text-secondary); font-size:var(--fs-text-md); text-decoration:none; }
.contact-nav a:hover{ color:var(--color-brand); }
.contact-nav a.is-active{ color:var(--color-brand); font-weight:var(--fw-medium); }
.contact-nav a.is-active::before{ content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:2px; background:var(--color-brand); }
.contact-block{ margin-bottom:56px; }
.contact-block > h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); margin-bottom:20px; }
.contact-kv{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-primary); }
.contact-kv .lbl{ color:var(--text-secondary); }
.contact-kv + .contact-kv{ margin-top:16px; }
.contact-map{ margin:20px 0; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/6; background:var(--gray-200); }
.contact-hours{ margin-top:12px; color:var(--text-secondary); font-size:var(--fs-text-md); line-height:var(--lh-text-lg); }
.contact-centers{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
.social-row{ display:flex; gap:12px; flex-wrap:wrap; }
.social-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--gray-200); border-radius:var(--radius-pill); color:var(--text-primary); font-size:var(--fs-text-sm); text-decoration:none; }
.social-chip:hover{ background:var(--gray-50); color:var(--text-primary); text-decoration:none; }

/* utility */
.stack-sm > * + *{ margin-top:12px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.text-secondary{ color:var(--text-secondary); }
.eyebrow{ font-size:var(--fs-text-sm); font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; color:var(--text-brand); margin-bottom:16px; }

/* ============================================================
   MOTION & INTERACTION ENHANCEMENTS
   Scroll reveals, image loading/hover, page & section polish.
   All timings sit in the 200–300ms band and everything below is
   disabled under prefers-reduced-motion (see the block at the end).
   ============================================================ */

/* ---- Scroll-triggered reveal (fade-in + slide-up) ---- */
/* Driven by the <Reveal> component which adds .is-visible on enter. */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---- Smooth image loading (fade-in once decoded) ---- */
.fade-img{ opacity:0; transition:opacity .5s ease; }
.fade-img.is-loaded{ opacity:1; }

/* ---- Hero parallax layer ---- */
/* JS translates this on scroll; the extra scale hides the parallax gap. */
.hero__img--parallax{ transform:scale(1.08); will-change:transform; }
/* No parallax below 900px (see Home.jsx), so no zoom either — on a phone-sized
   frame the zoom only crops the panorama further. Declared here rather than in
   the hero's own media query so it wins against the rule above. */
@media (max-width:900px){ .hero__img--parallax{ transform:none; } }

/* ---- Section / page transition ---- */
@keyframes rak-page-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.page-fade{ animation:rak-page-fade .32s ease both; }

/* ---- Image hover zoom on common media cards ---- */

/* ---- Consistent focus states for keyboard navigation ---- */
/* Cards and controls that strip the default outline get a clear brand ring. */
.news-card:focus-visible,
.feature-card:focus-visible,
a.value-card:focus-visible,
.svc-item:focus-visible,
.lead-row:focus-visible,
.lead-featured:focus-visible,
.rak-btn:focus-visible,
.rak-iconbtn:focus-visible,
.rak-header__link:focus-visible,
.rak-header__ico:focus-visible,
.rak-header__lang:focus-visible,
.rak-totop:focus-visible{ outline:2px solid var(--color-black); outline-offset:3px; border-radius:var(--radius-md); }

/* ---- Back to top ---- */
.rak-totop{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:200;
  width:48px; height:48px; border-radius:var(--radius-circle); border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-inverse); color:var(--text-inverse); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease, visibility .25s;
}
.rak-totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.rak-totop:hover{ background:var(--color-brand); color:var(--color-white); transform:translateY(-2px); }
@media (max-width:640px){ .rak-totop{ inset-block-end:16px; inset-inline-end:16px; width:44px; height:44px; } }

/* ---- Skeleton loading (News & Media, and any future dynamic content) ---- */
.skeleton{ position:relative; overflow:hidden; background:var(--gray-100); border-radius:var(--radius-sm); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation:rak-shimmer 1.4s infinite; }
@keyframes rak-shimmer{ 100%{ transform:translateX(100%); } }
.news-card--skeleton{ background:var(--gray-100); box-shadow:none; }
.news-card--skeleton:hover{ transform:none; box-shadow:none; }
.news-card--skeleton .news-card__img{ border-radius:0; }
.news-card--skeleton .news-card__cap{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface-page); border-color:var(--gray-150); }
.skeleton-line{ display:block; height:16px; border-radius:var(--radius-xs); }
.skeleton-line + .skeleton-line{ margin-top:10px; }
.skeleton-line--sm{ width:60%; height:12px; }

/* ---- Carousel indicators: clearer active state, smoother slides ---- */
.rak-dots__dot{ transition:background-color .25s ease, width .25s ease, transform .2s ease; }
.rak-dots__dot.is-active{ width:22px; border-radius:var(--radius-pill); }
.obj-slide, .wide-carousel__slide{ transition:opacity .5s ease; }

/* ---- Reduced motion: honour the user's OS preference ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .fade-img{ opacity:1 !important; }
  .hero__img--parallax{ transform:none !important; }
}

/* ============================================================
   DARK MODE  —  toggled via <html data-theme="dark"> (see theme.js).
   The whole site is tokenised, so dark mode is achieved by (1) inverting
   the warm-gray ramp — light grays become dark surfaces, dark grays become
   light text, so every raw --gray-* usage flips automatically — and (2)
   re-pointing the semantic tokens that reference the fixed ink colours.
   ============================================================ */
:root[data-theme="dark"]{
  /* (1) Invert the warm-gray ramp. Top end is tuned a touch lighter than a
     pure mirror so subtle surfaces/borders separate from the near-black page. */
  --gray-50:#211F1D;  --gray-100:#2A2724; --gray-150:#39352F; --gray-200:#454039;
  --gray-250:#4F4740; --gray-300:#5C5045; --gray-350:#685B50; --gray-400:#74675B;
  --gray-450:#807367; --gray-500:#8D8074; --gray-550:#998D81; --gray-600:#A69A8E;
  --gray-650:#B2A79C; --gray-700:#BFB4AA; --gray-750:#CBC2B9; --gray-800:#D6CEC5;
  --gray-850:#DFDCD9; --gray-900:#EFEDE9; --gray-950:#F2F0ED; --gray-1000:#F7F5F3;

  /* (2) Semantic tokens that point at the fixed ink colours must be re-pointed. */
  --text-primary:var(--gray-1000); --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500); --text-disabled:var(--gray-400);
  --text-inverse:var(--color-black); --text-brand:var(--error-400); --text-link:var(--info-300);
  /* Lighten the brand red so accents/hovers stay legible on dark surfaces. */
  --color-brand:var(--error-400);

  --surface-page:var(--color-black); --surface-subtle:var(--gray-50); --surface-muted:var(--gray-100);
  --surface-card:var(--gray-50); --surface-inverse:var(--gray-1000); --surface-overlay:rgba(0,0,0,0.6);

  --border-subtle:var(--gray-150); --border-default:var(--gray-200);
  --border-strong:var(--gray-700); --border-focus:var(--gray-1000);

  /* Solid buttons/accents invert to a light "ink" with dark text. */
  --action-solid-bg:var(--gray-1000); --action-solid-bg-hover:var(--gray-850); --action-solid-bg-active:var(--gray-800); --action-solid-fg:var(--color-black);
  --action-soft-bg:var(--gray-100); --action-soft-bg-hover:var(--gray-150); --action-soft-bg-active:var(--gray-200); --action-soft-fg:var(--gray-1000);
  --action-outline-border:var(--gray-700); --action-outline-fg:var(--gray-1000); --action-outline-bg-hover:var(--gray-100); --action-outline-bg-active:var(--gray-150);
  --action-disabled-bg:var(--gray-100); --action-disabled-fg:var(--gray-400);

  /* Shadows read as cast-black on dark surfaces rather than warm-gray. */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4),0 2px 6px rgba(0,0,0,0.4);
  --shadow-md:0 4px 8px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:0 8px 16px rgba(0,0,0,0.5),0 24px 48px rgba(0,0,0,0.6);
}
/* Soft & outline icon buttons hardcode a near-black glyph/border via the fixed
   --color-black, which doesn't flip with the ramp — re-point them to the light
   end so download and pager controls stay legible on dark surfaces. */
:root[data-theme="dark"] .rak-iconbtn--soft{ --_fg:var(--gray-1000); }
:root[data-theme="dark"] .rak-iconbtn--outline{ --_fg:var(--gray-1000); --_bd:var(--gray-700); }
/* Frosted sticky header: translucent near-black instead of translucent white. */
:root[data-theme="dark"] .rak-header.is-scrolled{
  background:rgba(26,25,24,0.82);
  box-shadow:0 2px 12px rgba(0,0,0,0.5);
}
/* Glassy caption over photos → dark frosted panel. */
:root[data-theme="dark"] .news-card__cap{
  background:rgba(26,25,24,0.72); border-color:rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .program-card__cta{
  --_bg:rgba(255,255,255,0.10); --_bgh:rgba(255,255,255,0.18);
}
/* Shimmer sweep needs a light highlight against the dark skeleton base. */
:root[data-theme="dark"] .skeleton::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
/* The leadership quote is a fixed dark-taupe panel with white text (fixed ink,
   not ramp-driven). The gray ramp would otherwise invert --gray-600 to a light
   surface here — pin it to the dark-ramp token that equals the same #74675B
   (dark --gray-400 == light --gray-600) so the panel stays dark in both themes. */
:root[data-theme="dark"] .about-quote{ background:var(--gray-400); }

/* ============================================================
   HIGH CONTRAST  —  toggled via <html data-contrast="high"> (see a11y.js).
   Collapses the muted greys onto the ink colour so secondary text, borders
   and dividers meet a stronger contrast ratio. Works over both light and
   dark themes by re-pointing the same semantic tokens.
   ============================================================ */
:root[data-contrast="high"]{
  --text-secondary:var(--color-black); --text-tertiary:var(--color-black); --text-disabled:var(--gray-700);
  --border-subtle:var(--color-black); --border-default:var(--color-black); --border-strong:var(--color-black);
  --surface-subtle:var(--color-white); --surface-muted:var(--color-white); --surface-card:var(--color-white);
}
:root[data-theme="dark"][data-contrast="high"]{
  --text-secondary:var(--gray-1000); --text-tertiary:var(--gray-1000); --text-disabled:var(--gray-750);
  --border-subtle:var(--gray-1000); --border-default:var(--gray-1000); --border-strong:var(--gray-1000);
  --surface-subtle:var(--color-black); --surface-muted:var(--color-black); --surface-card:var(--color-black);
}

/* ---- Global search page ------------------------------------------------- */
/* Search field — underlined, icon leading, clear button trailing. */
.gsearch-field{ position:relative; display:flex; align-items:center; margin-top:28px; }
.gsearch-field__icon{ position:absolute; inset-inline-start:2px; display:inline-flex; color:var(--text-tertiary); pointer-events:none; }
.gsearch-field__input{
  box-sizing:border-box; width:100%; min-height:52px; padding:12px 52px; padding-inline-start:36px;
  border:0; border-bottom:1.5px solid var(--gray-300); border-radius:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-primary);
  transition:border-color .15s ease;
}
.gsearch-field__input::placeholder{ color:var(--text-tertiary); }
/* The placeholder clears the moment the field takes focus, so the caret sits on
   an empty line rather than over the word "Search". */
.gsearch-field__input:focus::placeholder{ color:transparent; }
.gsearch-field__input:hover{ border-color:var(--gray-400); }
.gsearch-field__input:focus{ outline:0; border-color:var(--color-brand); }
.gsearch-field__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* Clear/reset control: a filled circle at the minimum tap size, so it reads as a
   button at rest rather than only on hover. Shared by all three search fields —
   global search here, plus the News and Services sidebars, whose own sections
   only reserve the trailing padding it sits in. */
.gsearch-field__clear,
.news-search__clear,
.svc-search__clear{
  position:absolute; inset-inline-end:0; display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap-min); height:var(--tap-min); padding:0; border:0; border-radius:var(--radius-circle);
  background:var(--gray-50); color:var(--text-secondary); cursor:pointer; transition:color .12s ease,background-color .12s ease;
}
.gsearch-field__clear:hover,
.news-search__clear:hover,
.svc-search__clear:hover{ color:var(--text-primary); background:var(--gray-150); }
/* The sidebar fields are only as tall as the tap target, so the circle is centred
   on the input rather than filling it top to bottom. */
.news-search__clear,
.svc-search__clear{ top:50%; transform:translateY(-50%); }
/* Phones: a 32px circle, with the trailing padding it reserves shrunk to match so
   the gap between the typed text and the button stays the same. */
@media (max-width:640px){
  .gsearch-field__clear,
  .news-search__clear,
  .svc-search__clear{ width:32px; height:32px; }
  .gsearch-field__input{ padding-inline-end:40px; }
  .news-search__input,
  .svc-search .rak-control{ padding-inline-end:36px; }
}

/* Empty state — previous searches */
.gsearch-prev{ margin-top:40px; }
.gsearch-prev__title{ font-size:var(--fs-text-md); font-weight:var(--fw-medium); color:var(--text-primary); margin-bottom:16px; }
.gsearch-prev__chips{ display:flex; flex-wrap:wrap; gap:12px; }
.gsearch-chip{
  display:inline-flex; align-items:center; min-height:40px; padding:8px 16px;
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--surface-page);
  font-family:var(--font-sans); font-size:var(--fs-text-sm); color:var(--text-primary);
  cursor:pointer; transition:border-color .12s ease,background-color .12s ease;
}
.gsearch-chip:hover{ border-color:var(--gray-400); background:var(--gray-50); }
.gsearch-clear-all{
  display:inline-block; margin-top:20px; padding:0; border:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-sm); color:var(--text-secondary); cursor:pointer;
}
.gsearch-clear-all:hover{ color:var(--text-primary); text-decoration:underline; }

/* Results — two-column svc-layout (categories | list) */
.gsearch-results{ margin-top:40px; }
.gsearch-cats__title{ font-size:var(--fs-text-md); font-weight:var(--fw-medium); color:var(--text-primary); margin-bottom:20px; }
.gsearch-cats__list{ display:flex; flex-direction:column; }
.gsearch-cats__item{
  display:block; width:100%; text-align:start; padding:8px 0; padding-inline-start:16px;
  border:0; border-inline-start:2px solid transparent; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-secondary);
  cursor:pointer; transition:color .12s ease,border-color .12s ease;
}
/* Brand colour on hover AND while selected, indicator included — the same
   treatment as the Services / Legislations sidebars (.svc-cat). */
.gsearch-cats__item:hover{ color:var(--color-brand); }
.gsearch-cats__item.is-active{ color:var(--color-brand); font-weight:var(--fw-medium); border-inline-start-color:var(--color-brand); }

.gsearch-count{ font-size:var(--fs-text-sm); color:var(--text-secondary); margin-bottom:24px; }
.gsearch-empty{ font-size:var(--fs-text-md); color:var(--text-secondary); }

.gsearch-list{ display:flex; flex-direction:column; }
.gsearch-row{ display:flex; gap:24px; align-items:flex-start; padding:24px 0; border-top:1px solid var(--gray-150); }
.gsearch-row:first-child{ border-top:0; padding-top:0; }
.gsearch-row__main{ flex:1 1 auto; min-width:0; }
.gsearch-row__title{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); font-weight:var(--fw-medium); text-wrap:balance; }
.gsearch-row__title a{ color:var(--text-primary); text-decoration:none; }
.gsearch-row__title a:hover{ color:var(--color-brand); }
.gsearch-row__more{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:6px 14px; background:var(--gray-100); border-radius:var(--radius-pill); font-size:var(--fs-text-sm); color:var(--text-primary); transition:background-color .2s ease, color .2s ease; }
/* Fills with the brand colour on hover, like the other "Learn more" CTAs
   (.rak-btn--brand-hover, .program-card__cta). */
.gsearch-row__more:hover{ background:var(--color-brand); color:var(--color-white); text-decoration:none; }
.gsearch-row__more svg{ transition:transform .2s ease; }
.gsearch-row__more:hover svg{ transform:translateX(3px); }
[dir="rtl"] .gsearch-row__more svg{ transform:scaleX(-1); }
[dir="rtl"] .gsearch-row__more:hover svg{ transform:scaleX(-1) translateX(3px); }
.gsearch-row__thumb{ flex:0 0 auto; width:120px; height:120px; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-200); }
.gsearch-row__thumb img{ width:100%; height:100%; object-fit:cover; }

/* Mobile: categories first, results below — the filter belongs above the list it
   filters, and it matches how the Services and Legislations listings stack. */
@media (max-width:900px){
  .gsearch-results .svc-layout{ display:flex; flex-direction:column; }
}
@media (max-width:560px){
  .gsearch-row{ flex-direction:column-reverse; align-items:stretch; }
  .gsearch-row__thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}

/* ---------------- PAGE LOADING SKELETON ---------------- */
/* Shown while a page's CMS payload is in flight (see PageLoading.jsx). The CMS
   is the source of truth, so nothing real exists to draw yet — these blocks hold
   the page's rough shape so the layout doesn't jump when the content lands. */
.rak-sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.page-skel{ display:flex; flex-direction:column; gap:32px; }
.page-skel__title{ height:56px; width:min(560px,72%); border-radius:var(--radius-md); }
.page-skel__hero{ width:100%; aspect-ratio:16/7; border-radius:var(--radius-xl); }
.page-skel__lines{ display:flex; flex-direction:column; gap:14px; }
.page-skel__line{ height:16px; border-radius:var(--radius-sm); }
/* Each line a little shorter than the last, like a paragraph's ragged edge. */
.page-skel__line:nth-child(2){ width:96%; }
.page-skel__line:nth-child(3){ width:92%; }
.page-skel__line:nth-child(4){ width:97%; }
.page-skel__line:nth-child(5){ width:64%; }
.page-skel__title,
.page-skel__hero,
.page-skel__line{
  background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-150) 37%, var(--gray-100) 63%);
  background-size:400% 100%;
  animation:rak-skel 1.4s ease-in-out infinite;
}
@keyframes rak-skel{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){
  .page-skel__title,
  .page-skel__hero,
  .page-skel__line{ animation:none; background:var(--gray-100); }
}