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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------- FULLSCREEN MENU ---------------- */
.rak-menu{ position:fixed; inset:0; z-index:1000; background:var(--surface-page); display:none; flex-direction:column; font-family:var(--font-sans); overflow:auto; }
.rak-menu.is-open{ display:flex; }
.rak-menu__bar{ display:flex; justify-content:flex-end; padding:20px var(--gutter-mobile) 8px; }
.rak-menu__close{ width:44px; height:44px; border-radius:var(--radius-circle); background:var(--gray-100); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary); }
.rak-menu__close:hover{ background:var(--gray-200); }
.rak-menu__inner{ flex:1 1 auto; width:100%; max-width:520px; margin:0 auto; padding:8px var(--gutter-mobile) 0; box-sizing:border-box; }
.rak-menu__section{ margin-bottom:28px; }
.rak-menu__heading{ font-size:var(--fs-text-md); color:var(--text-secondary); margin:0 4px 12px; }
.rak-menu__group{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
.rak-menu__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 20px; background:transparent; border:0; cursor:pointer; text-align:start; font-family:var(--font-sans); font-size:var(--fs-text-lg); color:var(--text-primary); text-decoration:none; }
.rak-menu__row + .rak-menu__row{ border-top:1px solid var(--gray-150); }
/* Same brand-colour hover as the desktop nav links and header actions. */
.rak-menu__row:hover{ background:var(--gray-100); color:var(--color-brand); text-decoration:none; }
.rak-menu__row:hover .rak-menu__chev{ color:var(--color-brand); }
.rak-menu__row[aria-current="page"]{ position:relative; color:var(--color-brand); font-weight:var(--fw-medium); }
.rak-menu__row[aria-current="page"] .rak-menu__chev{ color:var(--color-brand); }
.rak-menu__row[aria-current="page"]::before{ content:""; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:3px; background:var(--color-brand); border-radius:0 2px 2px 0; }
.rak-menu__row-label{ display:inline-flex; align-items:center; gap:14px; }
.rak-menu__chev{ color:var(--gray-500); flex:0 0 auto; }
/* The row chevron points the way the language reads: it sits at the row's
   trailing edge, so in Arabic it must flip to point left. */
[dir="rtl"] .rak-menu__chev svg{ transform:scaleX(-1); }
.rak-menu__foot{ padding:28px var(--gutter-mobile) 48px; max-width:520px; width:100%; margin:0 auto; box-sizing:border-box; }
/* Same 96px height the page footer uses for this lockup, so the drawer's sign-off
   reads at the same weight instead of the half-size 48px it had. width:auto keeps
   the artwork's own proportions (the asset is 4783x1835). */
.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:20px var(--gutter-desktop); min-height:85px; max-width:var(--container-max); margin:0 auto; box-sizing:border-box; flex-wrap:wrap; }
.rak-footer__brand{ flex:0 0 auto; display:inline-flex; align-items:center; text-decoration:none; }
.rak-footer__brand:hover{ text-decoration:none; }
.rak-footer__brand img{ height:96px; width:auto; margin-block:-22px; }
/* Nav pushed to the inline end (right in LTR, left in RTL); copyright follows
   it at the far edge — see footer design. */
.rak-footer__nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-inline-start:auto; }
.rak-footer__link{ display:inline-flex; align-items:center; gap:4px; background:transparent; border:0; padding:0; cursor:pointer; color:var(--text-primary); text-decoration:none; font-family:var(--font-sans); font-size:var(--fs-text-md); }
.rak-footer__link{ transition:color .15s ease; }
.rak-footer__link:hover{ color:var(--color-brand); text-decoration:none; }
.rak-footer__copy{ color:var(--text-secondary); font-size:var(--fs-text-sm); }
@media (max-width:900px){
  /* Stack vertically, aligned to the inline start: brand · nav · copyright. */
  .rak-footer__bar{ padding:24px var(--gutter-mobile); gap:20px; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; min-height:0; }
  .rak-footer__brand img{ margin-block:0; }
  .rak-footer__nav{ margin-inline-start:0; gap:8px 20px; }
}

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

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

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

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

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

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

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

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

/* checkbox / radio */
.rak-choice{ display:inline-flex; align-items:flex-start; gap:12px; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary); }
.rak-choice input{ position:absolute; opacity:0; width:0; height:0; }
.rak-choice__box{ flex:0 0 auto; width:24px; height:24px; box-sizing:border-box; border:1.5px solid var(--gray-400); background:var(--surface-page); display:inline-flex; align-items:center; justify-content:center; color:var(--color-white); transition:background-color .12s ease,border-color .12s ease; }
.rak-choice--checkbox .rak-choice__box{ border-radius:var(--radius-sm); }
.rak-choice--radio .rak-choice__box{ border-radius:var(--radius-circle); }
.rak-choice:hover .rak-choice__box{ border-color:var(--gray-600); }
.rak-choice input:checked + .rak-choice__box{ background:var(--surface-inverse); border-color:var(--surface-inverse); }
/* A selected radio reads brand rather than black, like the carousel dots. Must
   follow the rule above — same specificity, so source order is what wins. The
   dot keeps --text-inverse, which stays legible on the brand red in both themes
   (white on #A9001A; near-black on the lightened #DB3C55). Scoped to the radio
   variant: the only .rak-choice checkbox is on the volunteering form. */
.rak-choice--radio input:checked + .rak-choice__box{ background:var(--color-brand); border-color:var(--color-brand); }
/* Hover and keyboard focus are brand too, so no state in the control falls back
   to grey or black. Both follow the rules above — equal specificity, source order
   decides. The focus ring is the one the carousel dots use; it is drawn on the
   box because the real <input> is visually hidden (opacity:0), which until now
   left keyboard focus with nothing visible at all. */
.rak-choice--radio:hover .rak-choice__box{ border-color:var(--color-brand); }
.rak-choice--radio input:focus-visible + .rak-choice__box{
  border-color:var(--color-brand); outline:2px solid var(--color-brand); outline-offset:3px;
}
/* The caption turns brand with the control, in the same three states, so the
   option reads as one thing rather than a brand dot beside grey text. All three
   set the colour ON the caption rather than letting it inherit from the label:
   .news-facet__list .rak-choice paints the label the secondary grey at equal
   specificity but later in the file, so an inherited value would lose to it. */
.rak-choice--radio:hover .rak-choice__label,
.rak-choice--radio input:checked ~ .rak-choice__label,
.rak-choice--radio input:focus-visible ~ .rak-choice__label{ color:var(--color-brand); }
.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; }
/* The dots are brand throughout — the selected one included; it was black
   (--surface-inverse) before. Hover and focus match it, so no state anywhere in
   the control falls back to black. --color-brand lightens itself under
   [data-theme="dark"], so both themes are covered by the one value. */
.rak-dots__dot.is-active{ background:var(--color-brand); }
.rak-dots__dot:hover,
.rak-dots__dot.is-active:hover{ background:var(--color-brand); }
.rak-dots__dot:focus-visible,
.rak-dots__dot.is-active:focus-visible{
  background:var(--color-brand); outline:2px solid var(--color-brand); outline-offset:3px;
}

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

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

/* HERO (home) */
/* Hero height is proportional to the viewport (not a fixed pixel value) so the
   next section peeks in by the same amount on every screen size, large or small.
   ~80dvh with a pixel floor; vh fallback for browsers without dvh/max(). */
.hero{ position:relative; width:100%; min-height:500px; height:500px; display:flex; align-items:flex-end; overflow:hidden; color:var(--color-white); }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,25,24,0) 40%,rgba(26,25,24,.72) 100%); z-index:1; }
.hero__inner{ position:relative; z-index:2; max-width:var(--container-max); margin:0 auto; width:100%; padding:0 var(--gutter-desktop) 64px; box-sizing:border-box; }
.hero__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--tracking-display); text-wrap:balance; }
.hero__title-line{ display:block; }
/* Second line runs longer — let it span up to 75% of the hero for a stronger,
   wrapping "liner" beneath the short first line. */
.hero__title-line:last-child{ max-width:75%; text-wrap:balance; }
.hero__sub{ margin-top:20px; font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:rgba(255,255,255,.9); max-width:52ch; }
@media (max-width:900px){ .hero{ min-height:400px; height:400px; } .hero__inner{ padding:0 var(--gutter-mobile) 40px; } .hero__title{ font-size:var(--fs-display-md); line-height:var(--lh-display-md); } .hero__title-line:last-child{ max-width:100%; } }
/* On phones the hero crops hard horizontally, and centred (the object-position
   default) cut the leftmost colleague in half — a bisected face right at the
   edge. Shifting the crop window right drops him out of frame entirely and lands
   on the three-person group instead. 62% is the most it can move before the next
   person along starts getting sliced in turn; verified 360-540px.
   Only below 601px does the image overflow horizontally at all, so this is inert
   at the wider end of the breakpoint and desktop keeps the centred crop. */
@media (max-width:900px){ .hero__img{ object-position:62% 50%; } }

/* Two-column media+text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--top{ align-items:start; }
.split--text-first{ direction:ltr; }
.split__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/2.7; }
.split__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split__body h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
/* Consistent 20px top margin between heading and body across every home section. */
.split__body p{ margin-top:20px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); }
/* Body copy keeps its natural ragged edge — no justification anywhere in the
   home split sections. */
.split__body .rak-btn{ margin-top:28px; }
.split__body .vision-note{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
/* Stacked (mobile) reading order: heading, image, copy, then the CTA — rather
   than the whole text column on one side of the photo. .split__body is flattened
   with display:contents so its parts become grid items of .split alongside the
   image and can be ordered around it; the grid gap is dropped to zero so the
   parts keep carrying their own top margins (20px between paragraphs, 28px
   before the button) instead of a single uniform gap.
   `> *{order:3}` is the base so any child not named below lands with the copy
   rather than jumping to the front on order:0. The button is inline-flex, which
   a grid item would blockify to full width — justify-self keeps it its own size.
   Desktop is untouched. */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:0; }
  .split__body h2{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
  .split__body{ display:contents; }
  .split__body > *{ order:3; }
  .split__body > .eyebrow{ order:0; }
  .split__body > h2{ order:1; }
  .split > .split__media{ order:2; margin-top:28px; }
  .split__body > .rak-btn{ order:4; justify-self:start; }
}

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

/* Home news teaser: stacked, "View all" reads as a next step AFTER the three
   cards rather than sitting under the heading. The button lives in .sec-head
   beside the heading, so the head is flattened here and the container ordered —
   heading, cards, button. .sec-head's own 36px bottom margin goes with its box,
   so the spacing is re-hung on the two parts. */
@media (max-width:820px){
  .home-news{ display:flex; flex-direction:column; }
  .home-news > .sec-head{ display:contents; }
  .home-news .sec-head__left{ order:1; margin-bottom:36px; }
  .home-news > .feature-grid{ order:2; }
  .home-news .sec-head__right{ order:3; margin-top:36px; }
}

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

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

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

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

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

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

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

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

.news-pager{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:48px; margin-bottom:72px; flex-wrap:wrap; }
/* Tabular figures so "1" and "9" occupy the same advance width. Pager.jsx keeps
   the number of slots constant as you page; this keeps each slot's width constant
   too, so the strip doesn't shift by a pixel or two per digit. */
.news-pager__num{
  font-variant-numeric:tabular-nums;
  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;
}
/* The current page and any hovered page both fill brand — they were black
   (--surface-inverse) and grey respectively. Unvisited numbers keep their
   transparent resting state, so brand marks only the current position and
   whatever the pointer is on. */
.news-pager__num:hover,
.news-pager__num.is-active,
.news-pager__num.is-active:hover{ background:var(--color-brand); color:var(--color-white); }
/* Same slot width as a number, not 24px. Pager.jsx guarantees a constant number
   of slots, but a narrower ellipsis meant a strip with two of them was 16px
   shorter than one with a single ellipsis — so the control still resized as you
   paged. Equal slots make the width genuinely fixed. */
.news-pager__gap{ min-width:40px; text-align:center; color:var(--text-tertiary); }
/* The prev / next arrows fill with the brand colour on hover — the same
   treatment as the carousel arrows and the news-card CTA.
   Disabled arrows are already pinned by .rak-iconbtn:disabled. */
.news-pager .rak-iconbtn:hover:not(:disabled){
  background:var(--color-brand); color:var(--color-white);
}
/* Keyboard focus is branded to match that hover rather than falling back to the
   global black ring, so tabbing through the pager gives the same signal as
   pointing at it. Specificity here has to beat the shared black-ring rule that
   .rak-iconbtn:focus-visible sets further down. */
.news-pager .rak-iconbtn:focus-visible,
.news-pager__num:focus-visible{
  outline:2px solid var(--color-brand); outline-offset:3px;
}
/* The arrows also take the brand fill on focus, so a keyboard user sees the same
   filled state a mouse user gets on hover. Numbers keep their grey fill — the
   ring alone marks them, exactly as their grey hover does. */
.news-pager .rak-iconbtn:focus-visible:not(:disabled){
  background:var(--color-brand); color:var(--color-white);
}
/* Pager.jsx drops to a 5-slot strip at this width (see COMPACT_QUERY). Tightening
   the flex gap buys back the room that the now-full-width ellipsis slots take, so
   5 slots plus both arrows still fit one row without shrinking the 40px tap
   targets. */
@media (max-width:560px){
  .news-pager{ gap:6px; }
}
/* Genuinely tiny viewports (old 320px phones) cannot fit five 40px slots plus two
   arrows on one line however tight the gap. Shrink the controls here only — a
   smaller target beats a wrapped, two-row pager. */
@media (max-width:340px){
  .news-pager{ gap:4px; }
  .news-pager__num,
  .news-pager__gap{ min-width:34px; }
  /* Trimmed so a two-digit page still fits inside the 34px slot rather than
     pushing past it, which would reintroduce a few pixels of drift. */
  .news-pager__num{ padding:0 4px; }
  .news-pager .rak-iconbtn--small{ width:34px; height:34px; }
}

/* 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; }
/* The card frame is 16/7 but these photos are 3:2, so `cover` shows only the
   middle ~700px of a 1066px-tall image. On the university-training shot the
   standing woman's head sits near the top of that band and was being clipped, so
   bias its framing upward — the subject comes down into the frame. Keyed to the
   photo rather than the card position: the two cards come from a CMS repeater
   whose order can change, and in Arabic the visual sides swap. A replacement
   upload drops this rule and gets framed on its own merits. */
.program-card__media img[src*="career-university-training"]{ object-position:50% 30%; }
.program-card__body{ padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.program-card__body h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); color:var(--text-primary); }
.program-card__body p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
/* CTA uses the design-system soft button, but with a translucent white fill for
   a lighter, more modern look; it adopts the brand accent on card hover. */
.program-card__cta{ margin-top:14px; --_bg:rgba(255,255,255,0.55); --_bgh:rgba(255,255,255,0.8); backdrop-filter:blur(4px); }
.program-card:hover .program-card__cta{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
.program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(3px); }
[dir="rtl"] .program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(-3px); }

/* ---- ABOUT: leadership pull-quote (top of the About page) ---- */
.about-quote{ margin:0; background:var(--gray-600); padding-block:72px; }
/* The portrait is fixed at 568x452, so the column is that width outright and the
   quote takes the remainder (it was a 44% share, which came out a few pixels
   short of the spec and drifted with the viewport). 1136x904 is exactly twice
   568x452, so the upload lands at half scale with nothing cropped. */
.about-quote__inner{ display:grid; grid-template-columns:minmax(0,1fr) 568px; 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; background:var(--gray-300); align-self:center; width:568px; height:452px; }
.about-quote__media img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:var(--radius-xl); }
.about-quote__body blockquote{ margin:0; font-size:var(--fs-display-xs); line-height:var(--lh-display-xs);
  color:var(--color-white); font-weight:var(--fw-regular); letter-spacing:var(--tracking-display); }
.about-quote figcaption{ margin-top:64px; }
.about-quote__author{ display:block; font-weight:var(--fw-medium); color:var(--color-white); font-size:var(--fs-text-lg); }
.about-quote__role{ display:block; margin-top:2px; color:var(--color-white); font-size:var(--fs-text-sm); }
/* Below this a fixed 568px portrait would crowd the quote beside it, so the two
   go back to sharing the width and the portrait keeps its proportions. */
@media (max-width:1139px){
  .about-quote__inner{ grid-template-columns:1fr minmax(0,44%); }
  .about-quote__media{ width:100%; height:auto; aspect-ratio:1136/904; }
}
@media (max-width:820px){
  .about-quote{ padding-block:48px; }
  .about-quote__inner{ grid-template-columns:1fr; gap:28px; }
  /* Full container width, so the portrait's edges line up with the quote and
     caption below it. The scale(.9) that used to sit here left it inset by ~18px
     a side against text that ran to the gutter. Width plus the aspect-ratio
     above keeps the proportions — no stretching. */
  .about-quote__media{ align-self:stretch; order:-1; width:100%; }
  .about-quote figcaption{ margin-top:28px; }
  .about-quote__body blockquote{ font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
}

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

/* ---- ABOUT: values accordion + media ---- */
.about-values{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-values__heading{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); margin-bottom:8px; }
.about-values__list{ margin-top:16px; }
.about-values__list .rak-expand{ padding:20px 0; }
.about-values__list .rak-expand:first-child{ border-top:1px solid var(--gray-150); }
.about-values__list .rak-expand__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.about-values__list .rak-expand__text{ }
.about-values__list .rak-expand__toggle{ width:32px; height:32px; }
.about-values__cta{ margin-top:28px; }
.about-values__cta.rak-btn--solid:hover{ background:var(--color-brand); }
.about-values__list .rak-expand__head:hover .rak-expand__toggle{ background:var(--color-brand); }
/* The open row's minus toggle carries the brand colour, matching the hover state
   above and the Legislation panel's open styling. */
.about-values__list .rak-expand.is-open .rak-expand__toggle{ background:var(--color-brand); }
/* Height comes from aspect-ratio alone: align-self:start keeps the box out of
   the grid row's stretch, so opening an accordion grows the left column and
   leaves the image untouched.
   Not sticky. When the accordion column ends up taller than the image (narrow
   desktop widths, or longer CMS copy than the seed), a sticky image slides down
   as you scroll past — which reads as the expansion moving the image. Anchoring
   it keeps the two genuinely independent. */
.about-values__media{ align-self:start; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:3/3.6; background:var(--gray-300); }
.about-values__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Stacked (mobile) reading order: heading, image, the accordion, then the CTA.
   Same technique as .split above — __main is flattened so its parts order around
   the image, with a uniform 32px gap standing in for their own margins. */
@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{ aspect-ratio:4/2.7; }
  .about-values__main{ display:contents; }
  .about-values__main > *{ order:3; }
  .about-values__heading{ order:1; margin-bottom:0; }
  .about-values__media{ order:2; }
  .about-values__list{ order:3; margin-top:0; }
  .about-values__cta{ order:4; margin-top:0; justify-self:start; }
}

/* Strategic Objectives head: stacked, the CTA reads better after the description
   it belongs to than wedged between it and the heading. The heading and button
   share .sec-head__left, so flattening it lets the description (.sec-head__right)
   slot between them. Scoped to #objectives — the other .sec-head instances keep
   their own order. */
@media (max-width:820px){
  #objectives .sec-head__left{ display:contents; }
  #objectives .sec-head__left > *{ order:1; }
  #objectives .sec-head__right{ order:2; }
  #objectives .sec-head__left > .rak-btn{ order:3; margin-top:0; justify-self:start; }
}

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

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

/* ---- LEADERSHIP ---- */
.lead-intro{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.lead-intro h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
.lead-intro p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.lead-intro__body p + p{ margin-top:20px; }
@media (max-width:820px){ .lead-intro{ grid-template-columns:1fr; gap:24px; } }
.lead-layout{ display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:start; }
.lead-aside h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); }
.lead-aside p{ margin-top:12px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
@media (max-width:900px){ .lead-layout{ grid-template-columns:1fr; gap:32px; } }
/* Our Leadership section carries the same warm background as the message quote. */
#leadership{ background:var(--gray-100); }
/* Featured leader: the image fills the full width of the right-hand column. */
.lead-featured{ display:block; text-decoration:none; color:inherit; margin-bottom:12px; }
.lead-featured:hover{ text-decoration:none; color:inherit; }
.lead-featured__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/11; background:var(--gray-300); }
/* Fill the frame, like every other media box on the site. Without this the
   portrait kept its own height inside a box the grid stretches taller, leaving
   a band of the container's background under the subject. */
.lead-featured__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.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 sits in the right
   column across both rows, at the fixed 490×400 of the design (the Ruler's
   portrait above it is the larger 568×452 — see .about-quote__media).
   The right track is that same fixed width and the left takes the remainder —
   previously both were fractions, which let the portrait's aspect-ratio size it
   off the text height: it grew wider than its own column and pushed the page
   into horizontal scroll between 820px and 1100px. */
.lead-featured--row{ display:grid; grid-template-columns:minmax(0,1fr) 490px; column-gap:56px; align-items:start; }
.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:start; width:490px; height:400px; aspect-ratio:auto; }
.lead-featured--row .lead-featured__name{ margin-top:56px; }
/* Padding rather than margin for the gap under the title: the margin is pinned
   to 0 to beat the global h2 rule, and in the grid layout the row it sits in is
   sized by its content. */
.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; padding-bottom:24px; }
.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; }
/* Narrower than this and a fixed 490px portrait would leave the quote beside it
   too narrow to read, so the two columns go back to sharing the width and the
   portrait scales within its own track (16/11, as it did before). Same cutoff as
   the Ruler's portrait, so both stop being fixed at the same width. */
@media (max-width:1139px){
  .lead-featured--row{ grid-template-columns:2fr 3fr; }
  .lead-featured--row .lead-featured__media{ width:100%; height:auto; aspect-ratio:16/11; }
}
@media (max-width:720px){
  /* Stack in source order: heading, then portrait, then quote/name. */
  .lead-featured--row{ grid-template-columns:1fr; gap:20px; }
  .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; }
  /* Stacked, the blocks below the portrait read quote → name/title → CTA, so the
     quote runs straight into who said it and the button closes the card. Only
     the visual order changes: the markup keeps the CTA before the name, which is
     the reading order the two-column desktop card wants. align-items keeps the
     pill hugging its label rather than stretching to the column, and nothing
     here is direction-specific, so RTL mirrors on its own.
     One 24px step between all three: the desktop values differ per block (28px
     over the button, 56px over the name to clear it) and stacked they read as an
     uneven ladder. */
  .lead-featured--row .lead-featured__info{ display:flex; flex-direction:column; align-items:flex-start; }
  .lead-featured--row .lead-featured__info .rak-btn{ order:1; margin-top:24px; }
  .lead-featured--row .lead-featured__name{ margin-top:24px; }
}
.lead-row{ display:flex; align-items:center; gap:24px; padding:24px 0; border-top:1px solid var(--gray-150); text-decoration:none; color:inherit; }
.lead-row:hover{ text-decoration:none; color:inherit; }
.lead-row__body{ flex:1 1 auto; }
.lead-row__name{ font-weight:var(--fw-medium); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); }
.lead-row__role{ margin-top:4px; color:var(--text-secondary); font-size:var(--fs-text-md); }
.lead-row .rak-btn{ margin-top:14px; }
.lead-row__media{ flex:0 0 auto; width:120px; height:96px; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-300); }
@media (max-width:520px){ .lead-row__media{ width:88px; height:72px; } }

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

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

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

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

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

/* ---- ARTICLE (news / people hub) ---- */
.article{ max-width:760px; margin:0 auto; }
.article__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--tracking-display); text-wrap:balance; }
/* News article headlines read smaller than the display-lg used elsewhere. */
.article--news .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
.article__meta{ margin-top:16px; color:var(--text-secondary); font-size:var(--fs-text-sm); }
.article__hero{ margin-top:32px; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.article__body{ margin-top:40px; }
/* Body copy — paragraphs and list items alike — uses the one shared prose
   colour (--text-secondary); headings and the pull quote stay near-black. */
.article__body p,
.article__body li{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-secondary); }
.article__body p + p{ margin-top:20px; }
/* Bullet lists inside legal/policy prose (Terms, Privacy). Logical padding so the
   markers sit inside the text column in both LTR and RTL. Replaces the inline
   styles LegalPage used to set, now that lists render from parsed blocks. */
.article__list{ margin:12px 0 0; padding-inline-start:24px; }
.article__list li + li{ margin-top:6px; }
/* A list closes one thought and the next paragraph opens another — without this
   the paragraph after a list sits tighter than one after a paragraph. */
.article__list + p{ margin-top:20px; }
.article__body h2{ margin-top:40px; margin-bottom:4px; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.article__body blockquote{ margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid var(--color-brand); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:var(--text-primary); }
.article__link{ color:var(--text-brand); text-decoration:underline; text-underline-offset:2px; }
.article__link:hover{ text-decoration:none; }
@media (max-width:640px){ .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } }

/* ---- CONTACT ---- */
.contact-layout{ display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:32px; } }
.contact-aside{ position:sticky; top:96px; display:flex; flex-direction:column; }
@media (max-width:900px){ .contact-aside{ position:static; top:auto; } }
.contact-aside .svc-search{ margin-bottom:24px; }
.contact-nav a{ position:relative; display:block; padding:10px 0; padding-inline-start:16px; color:var(--text-secondary); font-size:var(--fs-text-md); text-decoration:none; }
.contact-nav a:hover{ color:var(--color-brand); }
.contact-nav a.is-active{ color:var(--color-brand); font-weight:var(--fw-medium); }
.contact-nav a.is-active::before{ content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:2px; background:var(--color-brand); }
/* 64px between the blocks — on the spacing scale, so it takes the token. The
   space below the LAST block is the 76px asked for separately; it is this same
   margin, hence the override rather than a second value added to it. */
.contact-block{ margin-bottom:var(--space-16); }
.contact-block:last-child{ margin-bottom:76px; }
/* Anchored blocks stop level with the sticky aside nav (which sits at top:96px,
   right under the 96px header) instead of sliding under the header and losing
   their heading. Contact.jsx uses the same 96px for its scroll-spy line. */
.contact-block[id]{ scroll-margin-top:96px; }
.contact-block > h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); margin-bottom:20px; }
.contact-kv{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-primary); }
.contact-kv .lbl{ color:var(--text-secondary); }
.contact-kv + .contact-kv{ margin-top:16px; }
.contact-map{ margin:20px 0; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/6; background:var(--gray-200); }
.contact-hours{ margin-top:12px; color:var(--text-secondary); font-size:var(--fs-text-md); line-height:var(--lh-text-lg); }
.contact-centers{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
.social-row{ display:flex; gap:12px; flex-wrap:wrap; }
.social-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--gray-200); border-radius:var(--radius-pill); color:var(--text-primary); font-size:var(--fs-text-sm); text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease; }
/* Fills brand on hover, matching the Google Maps button above it and the
   --brand-hover CTAs elsewhere. The border moves with the fill so the chip reads
   as one solid pill, and the trailing icon follows via currentColor. */
.social-chip:hover,
.social-chip:focus-visible{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); text-decoration:none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Mobile: categories first, results below — the filter belongs above the list it
   filters, and it matches how the Services and Legislations listings stack. */
@media (max-width:900px){
  /* align-items:start is inherited from .svc-layout, where it governs the block
     axis of a grid; on a flex column it becomes the inline axis and shrinks the
     category dropdown to its own text width — so stretch is restored here. */
  .gsearch-results .svc-layout{ display:flex; flex-direction:column; align-items:stretch; }
}
@media (max-width:560px){
  .gsearch-row{ flex-direction:column-reverse; align-items:stretch; }
  .gsearch-row__thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}

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

/* ---- 404 / not-found ---------------------------------------------------- */
/* Full-bleed photographic panel that sits between the header and the footer.
   It breaks the usual .rak-container rhythm on purpose: the plate runs edge to
   edge, and only the text block inside is constrained. */
.nf{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* Matches the ~800px content height of the desktop comp, but yields on short
     viewports so the footer is never pushed far below the fold. */
  min-height:clamp(480px, calc(100vh - 180px), 800px);
  padding:var(--space-16) var(--gutter-mobile);
  text-align:center;
}
.nf__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
}
/* Two stacked scrims, both from the comp rather than invented: a strong fade at
   the very top where the sky is palest, and a flat wash over the whole plate.
   They are also what makes the white copy legible — the raw photo is a light
   tan behind the body text, which would leave it near 2:1 against white. With
   the scrims the text band lands comfortably past the 4.5:1 AA threshold. */
.nf::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0,0,0,0.14), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.23) 38%, rgba(0,0,0,0.26) 100%);
}
.nf__inner{
  position:relative; display:flex; flex-direction:column; align-items:center;
  /* Wide enough for the two-line desktop measure in the comp; the body text
     sets its own narrower measure below. */
  max-width:600px;
}
/* Fixed white — this panel is always a dark photograph, so it must not follow
   the light/dark theme tokens the way ordinary page text does. */
.nf__code,
.nf__title,
.nf__body{ color:var(--color-white); }
.nf__code{
  font-size:clamp(64px, 11vw, 96px); line-height:1;
  font-weight:var(--fw-bold); letter-spacing:var(--tracking-display);
}
.nf__title{
  margin:var(--space-8) 0 0;
  font-size:clamp(30px, 5vw, 40px); line-height:1.2;
  font-weight:var(--fw-medium); letter-spacing:var(--tracking-display);
}
.nf__body{
  /* 48ch reproduces the comp's two-line break ("...may have been removed /
     or is temporarily unavailable"). In ch rather than px so the wrap survives
     the a11y panel's text-size steps instead of reflowing to four lines. */
  margin:var(--space-3) auto 0; max-width:48ch;
  font-size:clamp(16px, 2vw, 18px); line-height:var(--lh-text-lg);
  font-weight:var(--fw-regular);
}
.nf__cta{
  margin-top:var(--space-8);
  /* The soft-button tokens flip to a dark fill under [data-theme="dark"], which
     would sink the button into the photo. Pin the comp's white pill instead. */
  --_bg:var(--color-white); --_fg:var(--color-black); --_bd:transparent;
  --_bgh:var(--gray-100); --_bga:var(--gray-200);
}
/* The default focus ring is dark ink, invisible on a dark plate. */
.nf__cta:focus-visible{
  outline:3px solid var(--color-white); outline-offset:3px;
}
@media (max-width:767px){
  .nf{
    min-height:clamp(440px, calc(100vh - 140px), 620px);
    padding:var(--space-12) var(--gutter-mobile);
  }
  /* The portrait crop needs the ridgeline higher in frame to read as mountains
     rather than as an anonymous brown field. */
  .nf__bg{ object-position:center 45%; }
  /* Narrower than desktop so the copy breaks over three lines as the mobile
     comp shows, rather than two long ones. */
  .nf__body{ max-width:24ch; }
}