/* ============================================================
   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; } }
/* Large screens (e.g. 14"/16" MacBooks at 1512–1728 CSS px, and larger
   desktops): scale the whole type system up by ~1.125 in one place. Because
   every section styles off these tokens, headings and body copy grow together
   and section proportions stay identical to the base — a consistent bump
   rather than per-section overrides. */
@media (min-width:1440px){
  :root{
    --fs-display-2xl:81px; --fs-display-xl:68px; --fs-display-lg:54px; --fs-display-md2:45px;
    --fs-display-md:41px; --fs-display-sm:36px; --fs-display-sm2:32px; --fs-display-xs:27px;
    --fs-text-xl:23px; --fs-text-lg:20px; --fs-text-md:18px; --fs-text-sm:16px; --fs-text-xs:14px;
    --lh-display-2xl:101px; --lh-display-xl:81px; --lh-display-lg:68px; --lh-display-md2:54px;
    --lh-display-md:50px; --lh-display-sm:45px; --lh-display-sm2:41px; --lh-display-xs:36px;
    --lh-text-xl:32px; --lh-text-lg:27px; --lh-text-md:23px; --lh-text-sm:20px; --lh-text-xs:20px;
  }
}
.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; }
.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 85px navbar; the 96px logo (with -22px block margins) centres within it. */
  min-height:85px; 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. */
.rak-header__brand img{ height:96px; width:auto; margin-block:-22px; transition:opacity .2s ease; }
/* Logo theme swap: the light logo has dark text that vanishes on the dark
   surface, so dark mode shows a variant with the text lightened (emblem kept). */
.rak-brand-logo--dark{ display:none; }
:root[data-theme="dark"] .rak-brand-logo--light{ display:none; }
:root[data-theme="dark"] .rak-brand-logo--dark{ display:initial; }
/* Crest-only mark: hidden on desktop, swapped in for the lockup on mobile. */
.rak-brand-crest{ display:none; }
.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); }
.rak-header__lang:hover{ background:var(--gray-100); }
.rak-header__ico{ background:transparent; border:0; cursor:pointer; color:var(--text-primary); padding:8px; display:inline-flex; border-radius:var(--radius-circle); }
.rak-header__ico:hover{ background:var(--gray-100); }
.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(--text-primary); 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){
  /* Mobile/tablet bar: [ العربية · search ] … [ crest · burger ].
     Left group = language toggle + search; right group = crest logo + menu. */
  .rak-header{ padding:10px var(--gutter-mobile); gap:12px; }
  .rak-header__nav{ display:none; }

  /* Left group: keep only the language toggle and search icon. */
  .rak-header__utils{ order:1; gap:8px; }
  .rak-header__lang{ display:inline-flex; }
  /* Language toggle is plain clickable text here — no background overlay. */
  .rak-header__lang:hover{ background:transparent; }
  .rak-header__search{ display:inline-flex; }
  /* Accessibility panel and theme toggle move into the burger menu here. */
  .rak-header__utils .rak-a11y{ display:none; }
  .rak-header__theme{ display:none; }

  /* Right group: emblem logo then the burger, pushed to the far edge. */
  .rak-header__brand{ order:2; margin-inline-start:auto; }
  .rak-header__burger{ order:3; display:inline-flex; }
  /* On mobile/tablet the bar keeps the English (LTR) arrangement even in Arabic:
     forcing direction:ltr lays the row left-to-right, and the order overrides
     below beat the desktop RTL ordering (which still matches [dir="rtl"]). */
  [dir="rtl"] .rak-header{ direction:ltr; }
  [dir="rtl"] .rak-header__utils{ order:1; }
  [dir="rtl"] .rak-header__brand{ order:2; margin-inline-start:auto; }
  [dir="rtl"] .rak-header__burger{ order:3; }

  /* Swap the wordmark lockup for the emblem-only mark. */
  :root .rak-header__brand .rak-brand-logo{ display:none; }
  .rak-header__brand .rak-brand-crest{ display:block; height:46px; width:auto; margin-block:0; }
}

/* ---------------- 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;
}
.rak-a11y__card{
  position:relative; box-sizing:border-box;
  width:396px; height:312px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);
  padding:28px 24px; 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:16px; inset-inline-end:16px;
  width:44px; height:44px; 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:hover{ background:var(--gray-150); }
.rak-a11y__title{ margin:0 0 14px; font-size:30px; line-height:1.2; font-weight:var(--fw-bold); color:var(--text-primary); }
.rak-a11y__title:not(:first-of-type){ margin-top:30px; }
.rak-a11y__sizes{ display:flex; gap:12px; }
.rak-a11y__size{
  min-width:96px; padding:10px 20px; border:0; cursor:pointer;
  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: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; flex-wrap:wrap; justify-content:center; gap:10px 20px; }
.rak-a11y__radio{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-text-md); color:var(--text-primary); }
.rak-a11y__radio input{ width:20px; height:20px; accent-color:var(--color-brand); cursor:pointer; }

@media (max-width:960px){
  /* Accessibility dialog sizing on small viewports (the trigger itself now lives
     in the burger menu rather than the top bar). */
  .rak-a11y__card{ width:396px; max-width:calc(100vw - 32px); height:312px; padding:28px 24px; }
  .rak-a11y__title{ font-size:30px; line-height:1.2; margin-bottom:14px; }
  .rak-a11y__title:not(:first-of-type){ margin-top:30px; }
  .rak-a11y__sizes{ gap:12px; }
  .rak-a11y__size{ min-width:96px; padding:10px 20px; }
  .rak-a11y__radio{ font-size:var(--fs-text-md); }
}

/* ---------------- 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); }
.rak-menu__row:hover{ background:var(--gray-100); color:var(--text-primary); text-decoration:none; }
.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; }
/* Mirror the row chevron in RTL so it points toward the reading direction. */
[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:96px; 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:16px 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:hover{ color:var(--text-secondary); 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(--text-secondary); 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; }
.rak-pagehead__title{ font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); 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; }
.leg-head__intro{ margin-top:16px; }
/* About intro lede: heading left, paragraphs right; two-column on desktop. */
.about-intro-lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-intro-lead h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); color:var(--text-primary); margin:0; }
.about-intro-lead p{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); }
.about-intro-lead p + p{ margin-top:20px; }
@media (max-width:900px){ .about-intro-lead__grid{ grid-template-columns:1fr; gap:24px; } }
/* Lede paragraph: constrained + justified on desktop, full width on mobile. */
.lede-justify{ max-width:60%; text-align:justify; }
@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-primary); }
.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 12px 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.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; }
.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; }
/* Services reuse .leg-aside/.leg-panel: search sits above the category nav, and
   each service accordion opens into plain labelled detail blocks (description,
   delivery requirements, requirements, fee). */
.leg-aside .svc-search{ margin-bottom:24px; }
/* Services intro-to-search spacing: preserve the roomy gap on desktop, but on
   mobile/tablet the intro and search stack, so pull them close together. */
.svc-head{ padding-bottom:48px; }
@media (max-width:900px){
  .svc-head{ padding-bottom:0; }
  .svc-body{ padding-top:24px; }
}
/* Mobile/tablet category picker (≤900px). Replaces the desktop left nav
   (.leg-nav): a pill trigger showing the current category opens a floating
   radio-style option list. Hidden on desktop, where .leg-nav shows instead. */
.svc-catselect{ display:none; position:relative; }
@media (max-width:900px){
  .svc-catselect{ display:block; }
  .leg-aside .leg-nav{ display:none; }
}
.svc-catselect__trigger{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 20px; text-align:start; cursor:pointer; font-family:var(--font-sans);
  background:var(--surface-subtle); border:2px solid transparent;
  border-radius:var(--radius-lg); color:var(--text-primary);
}
/* Closed: filled surface, no border. Open: gains the black outline. */
.svc-catselect__trigger.is-open{ border-color:var(--border-strong); }
.svc-catselect__text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.svc-catselect__label{ font-size:var(--fs-text-sm); line-height:1.2; color:var(--text-tertiary); }
.svc-catselect__value{ font-size:var(--fs-text-lg); line-height:1.3; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-catselect__chev{ flex:0 0 auto; display:inline-flex; color:var(--text-primary); }
.svc-catselect__list{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  margin:0; padding:8px; list-style:none; max-height:min(60vh,420px); overflow-y:auto;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.svc-catselect__opt{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:12px 16px; text-align:start; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--fs-text-lg); color:var(--text-primary);
  background:transparent; border:0; border-radius:var(--radius-md);
}
.svc-catselect__opt:hover,
.svc-catselect__opt.is-active{ background:var(--surface-subtle); }
.svc-catselect__radio{ position:relative; flex:0 0 auto; width:22px; height:22px; border-radius:var(--radius-circle); border:1.5px solid var(--gray-350); }
.svc-catselect__opt:hover .svc-catselect__radio,
.svc-catselect__opt.is-active .svc-catselect__radio{ border-color:var(--text-primary); border-width:2px; }
/* Selected option: filled dot inside the ring. */
.svc-catselect__opt.is-active .svc-catselect__radio::after{ content:""; position:absolute; inset:4px; border-radius:var(--radius-circle); background:var(--text-primary); }
.svc-catselect__optlabel{ min-width:0; }
.svc-detail{ display:flex; flex-direction:column; gap:28px; padding-block:4px; }
/* Each block is a small heading with a brand accent bar and its content. */
.svc-block__title{ font-size:var(--fs-text-sm); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin:0 0 8px; padding-inline-start:12px; border-inline-start:3px solid var(--color-brand); }
.svc-block__text{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-primary); max-width:70ch; }
.svc-reqs{ margin:0; padding-inline-start:20px; font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-primary); max-width:70ch; }
.svc-reqs li + li{ margin-top:8px; }
/* Item 0 — a fixed promo card above the service accordions that routes people
   to RAK Digital. Set apart from the accordions with a subtle surface and a
   brand accent bar; the CTA wraps below the text on narrow panels. */
.svc-promo{ display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; background:var(--gray-50); border:1px solid var(--gray-150); border-inline-start:3px solid var(--color-brand); border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:16px; }
.svc-promo__body{ min-width:0; }
.svc-promo__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-semibold); color:var(--text-primary); margin:0; }
.svc-promo__text{ margin:8px 0 0; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); max-width:60ch; }
.svc-promo__cta{ flex:0 0 auto; }
.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); }
.leg-doc__main{ min-width:0; }
.leg-doc__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-medium); color:var(--text-primary); }
.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; 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:500px; } .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; }
/* Home split images sit slightly shorter (height reduced by 0.9): 2.7 -> 2.43. */
.split:not(.split--vision) .split__media{ aspect-ratio:4/2.43; }
.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); }
/* Home split sections (Who We Are / What We Do / What You Can Do) use a natural
   ragged edge rather than justified body copy. */
.split .split__body p{ text-align:start; }
.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; }
.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-start:30px;
  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); }
.news-search__input:hover{ border-color:var(--gray-400); }
.news-search__input:focus{ outline:0; border-color:var(--color-black); }
.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-100); 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(--text-primary); 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(--text-primary); font-size:var(--fs-text-lg); }
.about-quote__role{ display:block; margin-top:2px; color:var(--text-secondary); 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:center; order:-1; max-width:280px; margin-inline:auto; }
  .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-lg); line-height:var(--lh-text-lg); text-align:start; }
@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{ text-align:start; }
.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/4; 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/3; }
}

/* ---- 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; left:32px; bottom:32px; max-width:420px; background:var(--surface-page); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-md); }
[dir="rtl"] .wide-carousel__card{ left:auto; right:32px; }
.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; }
@media (max-width:900px){
  .wide-carousel__stage{ aspect-ratio:3/4; }
  .wide-carousel__card{ left:16px; right:16px; bottom:16px; max-width:none; padding:20px; }
  [dir="rtl"] .wide-carousel__card{ right:16px; }
}

/* ---- 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__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; }
.about-detail__hero{ margin-top:32px; 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-primary); text-align:justify; text-justify:inter-word; }
.about-detail__body > p + p{ margin-top:20px; }
.about-detail__figure{ margin:36px 0; 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-primary); text-align:justify; text-justify:inter-word; }
.about-detail__section p + p{ margin-top:20px; }
/* About detail pages opt out of justified body copy. */
.about-detail--vision .about-detail__body > p,
.about-detail--vision .about-detail__section p,
.about-detail--values .about-detail__body > p,
.about-detail--values .about-detail__section p,
.about-detail--objectives .about-detail__body > p,
.about-detail--objectives .about-detail__section p{ text-align:start; text-justify:auto; }
/* The closing outro paragraph follows a section block (not another <p>), so the
   p+p rhythm doesn't reach it — give it the same gap so the two lines breathe. */
.about-detail--vision .about-detail__section + 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; }
/* Pinned to 20px (not the --fs-text-xl token, which scales to 23px at >=1440px)
   so the CTA heading matches the HR site's fixed size at every width. */
/* Prefer a single line; when width forces a wrap, greedy wrapping fills line 1
   and drops the (nbsp-glued) "with you." to line 2 as a unit. */
.about-detail__cta h2{ font-weight:var(--fw-medium); font-size:20px; line-height:28px; letter-spacing:var(--tracking-display); text-wrap:wrap; }
.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 ---- */
/* Our Leadership section carries the same warm background as the message quote. */
#leadership{ background:var(--gray-100); }
.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; }
.lead-intro__body--justify p{ text-align:justify; }
@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; } }
/* 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:24px; }
.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:start; background:#EFEDE9; 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); }
/* Portrait matches the left quote card's height (the quote drives the row) and
   the message body's width (both share column 2). The image is absolutely
   positioned so it fills that height without inflating the grid row. */
.msg-portrait{ grid-column:2; grid-row:1; position:relative; align-self:stretch; min-height:0; border-radius:var(--radius-xl); overflow:hidden; background:var(--gray-300); }
.msg-portrait img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* 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-primary); }
.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 ---- */
/* Services intro copy: constrained + justified on desktop, full width on mobile. */
.svc-intro{ max-width:60%; text-align:justify; }
@media (max-width:900px){ .svc-intro{ max-width:100%; } }
/* 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. */
.svc-search .rak-control{ padding:12px 8px 12px 36px; 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-black); }
.svc-search__ico{ position:absolute; left: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; }
.svc-cat{ position:relative; text-align:start; background:transparent; border:0; cursor:pointer; padding:12px 0 12px 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; left:0; top:8px; bottom:8px; width:2px; background:var(--color-brand); border-radius:2px; }
.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); }
.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); }
.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,transform .15s ease; }
.svc-item:hover .svc-item__chev{ background:var(--color-brand); color:var(--color-white); transform:translateX(2px); }
[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:pretty; }
/* 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; }
.article__body p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-primary); }
/* Inline email link in legal/prose copy: uses the site link colour (--text-link,
   theme-aware) and stays underlined so it reads as clickable within the text. */
.article__mail{ color:var(--text-link); text-decoration:underline; word-break:break-word; }
.article__body p + p{ margin-top:20px; }
/* Legal pages (Terms, Privacy) justify their prose; News articles stay ragged. */
.article--legal .article__body p,
.article--legal .article__body li,
.article--news .article__body p,
.article--news .article__body li{ text-align:justify; text-justify:inter-word; }
.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); }
@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 10px 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; left: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-map img{ width:100%; height:100%; object-fit:cover; display:block; }
.contact-figure{ margin:0 0 20px; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.contact-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Address caption directly under the head-office image. */
.contact-figure + .contact-kv{ padding-top:8px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.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; }
/* Each customs centre is a rak-expand row; inset it and drop the last divider
   so the rows sit cleanly inside the grey card. */
.contact-centers .rak-expand{ padding-inline:24px; }
.contact-centers .rak-expand:last-child{ border-bottom:0; }
.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; }

/* ---- 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);
}

/* ============================================================
   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 44px; 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); }
.gsearch-field__input:hover{ border-color:var(--gray-400); }
.gsearch-field__input:focus{ outline:0; border-color:var(--color-black); }
.gsearch-field__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.gsearch-field__clear{
  position:absolute; inset-inline-end:0; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-circle);
  background:transparent; color:var(--text-tertiary); cursor:pointer; transition:color .12s ease,background-color .12s ease;
}
.gsearch-field__clear:hover{ color:var(--text-primary); background:var(--gray-100); }

/* 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;
}
.gsearch-cats__item:hover{ color:var(--text-primary); }
.gsearch-cats__item.is-active{ color:var(--text-primary); font-weight:var(--fw-medium); border-inline-start-color:var(--color-black); }

.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); }
.gsearch-row__more:hover{ background:var(--gray-200); color:var(--text-primary); 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: list first, categories below (design stacks them in that order). */
@media (max-width:900px){
  .gsearch-results .svc-layout{ display:flex; flex-direction:column-reverse; }
}
@media (max-width:560px){
  .gsearch-row{ flex-direction:column-reverse; align-items:stretch; }
  .gsearch-row__thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}