/* ============================================================
   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 — the 96px bar plus a little breathing room. */
.rak-section[id]{ scroll-margin-top:108px; }
.rak-section--subtle{ background:var(--gray-50); }
.rak-section--tight{ padding-top:48px; padding-bottom:0; }
.rak-section--pb{ padding-bottom:72px; }
.about-intro{ padding-bottom:0; }
.rak-divider{ height:1px; background:var(--gray-150); border:0; margin:0; }
@media (max-width:900px){
  .rak-container{ padding-left:var(--gutter-mobile); padding-right:var(--gutter-mobile); }
  .rak-section{ padding-top:48px; padding-bottom:48px; }
  /* The About page header keeps its zero bottom padding on mobile too, so the
     quote below sits close (the .rak-section rule above would otherwise add 48px). */
  .about-head{ padding-bottom:0; }
  /* Same for the Legislation & Policies title, so the section list sits close. */
  .leg-head{ padding-bottom:0; }
  /* Same for the News title, so the filters/list sit close beneath it. */
  .news-head{ padding-bottom:0; }
  /* Same for the Contact title, so the sidebar/content sits close beneath it. */
  .contact-head{ padding-bottom:0; }
  /* The Contact body keeps its zero bottom padding too: .contact-layout owns the
     gap below the last block, so letting this back in stacked a second gap
     under the social chips. */
  .contact-body{ padding-bottom:0; }
}
/* A page's opening section: 40px of visible space from the sticky header down to
   the top of the H1's capitals, at every width. The H1 (40px text in a 48px line
   box, ABC Diatype: 968/-268 ascent/descent, 700 cap height) carries 10px of
   leading above its capitals, so the padding is 30px and the leading makes up the
   rest. Declared after the media block above so it wins on mobile too. */
.rak-section--pagehead{ padding-top:30px; }

/* ---------------- 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 72px logo centres within it (72 + 2×10 padding < 96),
     so the bar's height is the min-height alone — nothing inside drives it. The
     sticky-clearance offsets below (scroll-margin-top, .leg-nav's sticky top)
     are measured from this number. */
  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; }
/* Sized to carry the same optical weight as the HR navbar logo. Do NOT copy HR's
   `height:96px`: its asset is over half transparent padding (ink spans 501–1334
   of 1835px), so 96px there renders 238x44px of ink. Matching that 44px height
   here is the wrong reading — HR's mark is a single-row wordmark at 5.46:1 while
   this one is a stacked lockup at 1.89:1, so equal height splits between the
   emblem and text rows and lands at 83x44, a third of HR's mass. Matching ink
   AREA (10,376px2) is the like-for-like figure and gives 74px; 72px is that,
   rounded to sit inside the bar's 76px content line (96 - 2x10 padding), so the
   navbar height and every other item in it stay put. Footer logo keeps its 64px. */
.rak-header__brand img{ height:72px; width:auto; transition:opacity .2s ease; }
/* Logo theme swap: the light logo has dark text that vanishes on the dark
   surface, so dark mode shows a variant with the text lightened (emblem kept). */
.rak-brand-logo--dark{ display:none; }
:root[data-theme="dark"] .rak-brand-logo--light{ display:none; }
:root[data-theme="dark"] .rak-brand-logo--dark{ display:initial; }
/* Crest-only mark: hidden on desktop (both theme variants), swapped in for the
   lockup on mobile — see the max-width:960px block. */
.rak-brand-crest{ display:none; }
.rak-header__nav{ display:flex; align-items:center; justify-content:flex-start; gap:32px; flex:1 1 auto; }
.rak-header__link{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; padding:8px 0;
  font-family:var(--font-sans); font-size:var(--fs-text-md); line-height:1;
  color:var(--text-primary); text-decoration:none;
}
.rak-header__link::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--color-brand); opacity:0; transition:opacity .15s ease; }
.rak-header__link:hover{ color:var(--text-primary); text-decoration:none; }
.rak-header__link:hover::after{ opacity:1; }
.rak-header__link.is-active{ font-weight:var(--fw-medium); color:var(--color-brand); }
.rak-header__link.is-active::after{ background:var(--color-brand); opacity:1; }
.rak-header__utils{ display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.rak-header__lang{ background:transparent; border:0; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary); padding:6px 8px; border-radius:var(--radius-pill); transition:color .15s ease, background-color .15s ease; }
/* Every header action (language, accessibility, theme, search, burger) picks up
   the brand colour on hover — same accent the active state already uses. */
.rak-header__lang:hover{ background:var(--gray-100); color:var(--color-brand); }
.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; }
.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);
  /* Sized to the longest label (min 220px) so "Our Strategic Objectives" stays on
     one line. Without this the box shrink-to-fits against the narrow trigger it's
     positioned in, lands on the 220px floor, and wraps. */
  min-width:220px; width:max-content; 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; transition:background-color .12s ease,color .12s ease; }
.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){
  /* Mobile/tablet bar: [ العربية · search ] … [ crest · burger ].
     Left group = language toggle + search; right group = crest logo + menu. */
  .rak-header{ padding:10px var(--gutter-mobile); gap:16px; }
  .rak-header__nav{ display:none; }

  /* Left group: keep only the language toggle and search icon. */
  .rak-header__utils{ order:1; gap:8px; }
  /* Language toggle is plain clickable text here — no pill box, no hover
     overlay (matches HR's compact bar). */
  .rak-header__lang{ display:inline-flex; padding-inline:0; border-radius:0; }
  .rak-header__lang:hover{ background:transparent; }
  .rak-header__search{ display:inline-flex; }
  /* Accessibility panel and theme toggle move into the burger menu here. */
  .rak-header__utils .rak-a11y{ display:none; }
  .rak-header__theme{ display:none; }

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

  /* Swap the wordmark lockup for the emblem-only mark. */
  :root .rak-header__brand .rak-brand-logo{ display:none; }
  /* Deliberately well below the desktop lockup's ink height: the crest's
     wide 273:205 ratio reads heavier than the old PNG at any given height, so
     32px is what sits comfortably beside the 38px burger. */
  .rak-header__brand .rak-brand-crest{ height:32px; width:auto; margin-block:0; }
  /* Same light/dark swap as the desktop lockup: the crest's grey text goes
     white in dark mode. Only one of the pair is ever displayed. */
  .rak-header__brand .rak-brand-crest--light{ display:block; }
  :root[data-theme="dark"] .rak-header__brand .rak-brand-crest--light{ display:none; }
  :root[data-theme="dark"] .rak-header__brand .rak-brand-crest--dark{ display:block; }
}

/* ---------------- ACCESSIBILITY DIALOG ---------------- */
/* A centred modal opened from the header "Aa" control; lets visitors bump the
   text size and switch to high-contrast colours before resorting to browser
   zoom. */
.rak-a11y{ display:inline-flex; }
.rak-a11y__overlay{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter-mobile);
  background:var(--surface-overlay);
  animation:rak-a11y-fade .16s ease;
}
.rak-a11y__card{
  position:relative; box-sizing:border-box;
  width:396px; height:312px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);
  padding:28px 24px; font-family:var(--font-sans);
  animation:rak-a11y-in .18s ease;
}
@keyframes rak-a11y-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes rak-a11y-in{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
.rak-a11y__close{
  position:absolute; top:16px; inset-inline-end:16px;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:var(--radius-circle);
  background:var(--gray-100); color:var(--text-primary);
}
.rak-a11y__close:hover{ background:var(--gray-150); }
.rak-a11y__title{ margin:0 0 14px; font-size:30px; line-height:1.2; font-weight:var(--fw-bold); color:var(--text-primary); }
.rak-a11y__title:not(:first-of-type){ margin-top:30px; }
.rak-a11y__sizes{ display:flex; gap:12px; }
.rak-a11y__size{
  min-width:96px; padding:10px 20px; border:0; cursor:pointer;
  border-radius:var(--radius-pill); line-height:1;
  background:var(--action-soft-bg-hover); color:var(--text-primary);
  font-family:var(--font-sans);
}
.rak-a11y__size:hover{ background:var(--action-soft-bg-active); }
.rak-a11y__size.is-active{ background:var(--action-solid-bg); color:var(--action-solid-fg); }
.rak-a11y__contrast{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px 20px; }
.rak-a11y__radio{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-text-md); color:var(--text-primary); }
.rak-a11y__radio input{ width:20px; height:20px; accent-color:var(--color-brand); cursor:pointer; }

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

/* ---------------- FULLSCREEN MENU ---------------- */
.rak-menu{ position:fixed; inset:0; z-index:1000; background:var(--surface-page); display:none; flex-direction:column; font-family:var(--font-sans); overflow:auto; }
.rak-menu.is-open{ display:flex; }
.rak-menu__bar{ display:flex; justify-content:flex-end; padding:20px var(--gutter-mobile) 8px; }
.rak-menu__close{ width:44px; height:44px; border-radius:var(--radius-circle); background:var(--gray-100); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary); }
.rak-menu__close:hover{ background:var(--gray-200); }
.rak-menu__inner{ flex:1 1 auto; width:100%; max-width:520px; margin:0 auto; padding:8px var(--gutter-mobile) 0; box-sizing:border-box; }
.rak-menu__section{ margin-bottom:28px; }
.rak-menu__heading{ font-size:var(--fs-text-md); color:var(--text-secondary); margin:0 4px 12px; }
.rak-menu__group{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
.rak-menu__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 20px; background:transparent; border:0; cursor:pointer; text-align:start; font-family:var(--font-sans); font-size:var(--fs-text-lg); color:var(--text-primary); text-decoration:none; }
.rak-menu__row + .rak-menu__row{ border-top:1px solid var(--gray-150); }
.rak-menu__row:hover{ background:var(--gray-100); color:var(--color-brand); text-decoration:none; }
/* The chevron follows the label into the brand colour. */
.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; }
/* Mirror the row chevron in RTL so it points toward the reading direction. */
[dir="rtl"] .rak-menu__chev svg{ transform:scaleX(-1); }
.rak-menu__foot{ padding:28px var(--gutter-mobile) 48px; max-width:520px; width:100%; margin:0 auto; box-sizing:border-box; }
/* Matches the footer lockup's 64px ink height. */
.rak-menu__foot img{ height:64px; width:auto; }

/* ---------------- FOOTER ---------------- */
.rak-footer{ background:var(--gray-100); border-top:1px solid var(--border-subtle); font-family:var(--font-sans); }
/* Block padding matches the header's 10px so the 64px stacked lockup fits inside
   this bar's own 85px height (64 + 20 < 85). Deliberately not the header's 96px:
   the footer bar keeps the height it was designed at. */
.rak-footer__bar{ display:flex; align-items:center; gap:40px; padding:10px 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:64px; width:auto; }
/* 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); transition:color .12s ease; }
/* Brand accent rather than greying out, matching every other hover. */
.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__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; transition:color .12s ease; }
/* Brand accent on hover — label and arrow together — instead of greying out. */
.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; }
/* Page H1: pinned to 40px rather than tracked to a token — it equals
   --fs-display-md2 today and stays fixed if that token is ever re-scaled. The
   one exception is phones, which step it down to 32px. */
.rak-pagehead__title{ font-size:40px; line-height:48px; font-weight:var(--fw-bold); letter-spacing:var(--tracking-display); color:var(--text-primary); text-wrap:balance; padding-bottom:0!important; }
@media (max-width:640px){
  .rak-pagehead__title{ font-size:32px; line-height:40px; }
}
.rak-pagehead__desc{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:60ch; }
.leg-head__intro{ margin-top:16px; }
/* About intro lede: heading left, paragraphs right; two-column on desktop. */
.about-intro-lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-intro-lead h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); color:var(--text-primary); margin:0; }
.about-intro-lead p{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); }
.about-intro-lead p + p{ margin-top:20px; }
@media (max-width:900px){ .about-intro-lead__grid{ grid-template-columns:1fr; gap:24px; } }
/* Lede paragraph: constrained + justified on desktop, full width on mobile. */
.lede-justify{ max-width:60%; text-align:justify; }
@media (max-width:900px){ .lede-justify{ max-width:100%; } }

/* ---------------- 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 — clears the
   96px bar. */
.rak-expand[id]{ scroll-margin-top:100px; }
.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, color .15s ease; }
.rak-expand__head:hover .rak-expand__toggle{ background:var(--gray-800); }
/* The head is a button but is not in the shared black-ring list below, so its
   keyboard focus is branded here — matching the toggle fills each accordion
   variant applies on focus. */
.rak-expand__head:focus-visible{ outline:2px solid var(--color-brand); outline-offset:3px; border-radius:var(--radius-sm); }
.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:112px; }
.leg-nav__title{ font-size:var(--fs-display-xs); font-weight:var(--fw-medium); margin-bottom:16px; }
/* No padding override here: .svc-cat's own logical padding already matches, and
   a physical `padding-left` would collapse the RTL gap between the active
   indicator bar and the label. */
.rak-expand[id]{ scroll-margin-top:112px; }
@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; transition:border-color .15s ease; }
.leg-panel .rak-expand + .rak-expand{ margin-top:16px; }
/* Title sits centred against the 36px +/- toggle — the base head top-aligns
   them, which left single-line labels riding high in the card. */
.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); }
/* Hovering the card brings its border to the brand colour too, so the outline
   and the +/- toggle light up together. */
.leg-panel .rak-expand:hover{ border-color:var(--color-brand); }
.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__head:focus-visible .rak-expand__toggle,
.leg-panel .rak-expand.is-open .rak-expand__toggle{ border-color:var(--color-brand); color:var(--color-brand); }
.law-article + .law-article{ margin-top:24px; padding-top:24px; border-top:1px solid var(--gray-150); }
.law-article__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-medium); margin-bottom:8px; }
.law-article__content{ 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; }
/* Services reuse .leg-aside/.leg-panel: search sits above the category nav, and
   each service accordion opens into plain labelled detail blocks (description,
   delivery requirements, requirements, fee). */
.leg-aside .svc-search{ margin-bottom:24px; }
/* Intro-to-sidebar spacing on Services and Legal Resources: preserve the roomy
   gap on desktop, but on mobile/tablet the intro and the category picker stack,
   so pull them close together. */
.svc-head{ padding-bottom:48px; }
@media (max-width:900px){
  .svc-head{ padding-bottom:0; }
  .svc-body{ padding-top:24px; }
}
/* Mobile/tablet category picker (≤900px). Replaces the desktop left nav
   (.leg-nav): a pill trigger showing the current category opens a floating
   radio-style option list. Hidden on desktop, where .leg-nav shows instead. */
.svc-catselect{ display:none; position:relative; }
@media (max-width:900px){
  .svc-catselect{ display:block; }
  .leg-aside .leg-nav{ display:none; }
}
.svc-catselect__trigger{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 20px; text-align:start; cursor:pointer; font-family:var(--font-sans);
  background:var(--surface-subtle); border:2px solid transparent;
  border-radius:var(--radius-lg); color:var(--text-primary);
}
/* Closed: filled surface, no border. Open: gains the black outline. */
.svc-catselect__trigger.is-open{ border-color:var(--border-strong); }
.svc-catselect__text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.svc-catselect__label{ font-size:var(--fs-text-sm); line-height:1.2; color:var(--text-tertiary); }
.svc-catselect__value{ font-size:var(--fs-text-lg); line-height:1.3; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-catselect__chev{ flex:0 0 auto; display:inline-flex; color:var(--text-primary); }
.svc-catselect__list{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  margin:0; padding:8px; list-style:none; max-height:min(60vh,420px); overflow-y:auto;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.svc-catselect__opt{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:12px 16px; text-align:start; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--fs-text-lg); color:var(--text-primary);
  background:transparent; border:0; border-radius:var(--radius-md);
}
.svc-catselect__opt:hover,
.svc-catselect__opt.is-active{ background:var(--surface-subtle); }
.svc-catselect__radio{ position:relative; flex:0 0 auto; width:22px; height:22px; border-radius:var(--radius-circle); border:1.5px solid var(--gray-350); }
.svc-catselect__opt:hover .svc-catselect__radio{ border-color:var(--text-primary); border-width:2px; }
/* Selected option: filled dot inside the ring, both in brand — the same brand
   selection the news date filter uses. Declared after the hover rule (equal
   specificity) so the chosen row keeps reading as chosen under the pointer. */
.svc-catselect__opt.is-active .svc-catselect__radio{ border-color:var(--color-brand); border-width:2px; }
.svc-catselect__opt.is-active .svc-catselect__radio::after{ content:""; position:absolute; inset:4px; border-radius:var(--radius-circle); background:var(--color-brand); }
.svc-catselect__optlabel{ min-width:0; }
.svc-detail{ display:flex; flex-direction:column; gap:28px; padding-block:4px; }
/* Each block is a small heading with a brand accent bar and its content. */
.svc-block__title{ font-size:var(--fs-text-sm); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); margin:0 0 8px; padding-inline-start:12px; border-inline-start:3px solid var(--color-brand); }
.svc-block__text{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:70ch; }
.svc-reqs{ margin:0; padding-inline-start:20px; font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:70ch; }
.svc-reqs li + li{ margin-top:8px; }
/* CMS-authored service copy. It arrives as WordPress HTML — paragraphs, nested
   requirement lists, and a fee list of label + amount — so this styles the
   elements themselves rather than adding a class per block. Matches the type and
   measure of .svc-block__text / .svc-reqs above, which the seeded copy uses. */
.svc-block__rich{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); max-width:70ch; }
.svc-block__rich > :first-child{ margin-top:0; }
.svc-block__rich > :last-child{ margin-bottom:0; }
.svc-block__rich p{ margin:0 0 10px; }
/* The editor's saved markup carries stray </p> tags inside its lists, and the
   HTML parser turns those into empty paragraphs that no amount of string
   cleaning upstream can catch — they don't exist until the browser builds the
   tree. Collapse them so the copy isn't shot through with blank lines. */
.svc-block__rich p:empty{ display:none; }
.svc-block__rich ul{ margin:0 0 10px; padding-inline-start:20px; }
.svc-block__rich li + li{ margin-top:8px; }
.svc-block__rich ul ul{ margin-top:8px; }
.svc-block__rich strong{ font-weight:var(--fw-medium); color:var(--text-primary); }
/* Two classes the editor puts on the requirement lists: a run-in sub-heading and
   the emphasised lead-in above it. */
.svc-block__rich .requirement-head{ font-weight:var(--fw-medium); color:var(--text-primary); margin-top:10px; }
.svc-block__rich .requirement-important{ margin-top:8px; }
/* Fee rows are "<label><strong>amount</strong>" with nothing between them, so
   space them apart instead of letting the amount butt against the label. */
.svc-block__rich .servicelist-fee{ list-style:none; padding-inline-start:0; }
.svc-block__rich .servicelist-fee li{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.svc-block__rich .servicelist-fee strong{ flex:0 0 auto; white-space:nowrap; }
/* Item 0 — a fixed promo card above the service accordions that routes people
   to RAK Digital. Set apart from the accordions with a subtle surface and a
   brand accent bar; the CTA wraps below the text on narrow panels. */
.svc-promo{ display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; background:var(--gray-50); border:1px solid var(--gray-150); border-inline-start:3px solid var(--color-brand); border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:16px; }
.svc-promo__body{ min-width:0; }
.svc-promo__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-semibold); color:var(--text-primary); margin:0; }
.svc-promo__text{ margin:8px 0 0; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); max-width:60ch; }
.svc-promo__cta{ flex:0 0 auto; }
.leg-docs{ list-style:none; margin:0; padding:0; }
/* The whole row is clickable (see LegislationList), so it takes the pointer
   cursor rather than leaving it on the preview button alone. */
.leg-doc{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 0; border-bottom:1px solid var(--gray-150); cursor:pointer; }
.leg-doc__main{ min-width:0; }
.leg-doc__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); font-weight:var(--fw-medium); color:var(--text-primary); transition:color .15s ease; }
/* Hovering anywhere on the row takes the title to the brand colour, so the whole
   item reads as one target (the preview button's own state is below). */
.leg-doc:hover .leg-doc__title{ color:var(--color-brand); }
.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; }
/* Row hover gives the preview button the exact same state as hovering the button
   itself — brand fill, lift and shadow. */
.leg-doc__dl.rak-iconbtn:hover,
.leg-doc:hover .leg-doc__dl.rak-iconbtn{ background:var(--color-brand); color:var(--color-white); transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.leg-doc__dl.rak-iconbtn:active{ transform:translateY(0) scale(.94); box-shadow:none; }

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

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

/* ---------------- CAROUSEL DOTS ---------------- */
.rak-dots{ display:inline-flex; align-items:center; gap:16px; }
.rak-dots__track{ display:flex; align-items:center; gap:8px; }
.rak-dots__dot{ width:10px; height:10px; border-radius:var(--radius-circle); background:var(--gray-200); border:0; padding:0; cursor:pointer; transition:background-color .2s ease,transform .2s ease; }
/* 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;
}
/* The prev/next arrows flanking the dots fill brand on hover and on keyboard
   focus, so no control in the carousel falls back to black. Scoped to .rak-dots
   because all three carousels (Carousel, FadeCarousel, WideCarousel) nest their
   arrows there alongside the dot track. The brand outline has to beat the shared
   black ring .rak-iconbtn:focus-visible sets further down. */
.rak-dots .rak-iconbtn:hover:not(:disabled),
.rak-dots .rak-iconbtn:focus-visible:not(:disabled){
  background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white);
}
.rak-dots .rak-iconbtn:focus-visible{ 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; 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; }
/* Two washes. The vertical one beds the headline against the foot of the frame;
   the horizontal one darkens the reading-start edge, where the headline
   actually sits. English starts at the left, over the road and the sea, and
   reads fine on the vertical wash alone — but Arabic starts at the right, which
   on the current banner is the officer and the white kandura, and the title was
   running white-on-white there. Keying the wash to the text direction fixes the
   Arabic without dimming the English side of the picture. */
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,25,24,0) 40%,rgba(26,25,24,.72) 100%),linear-gradient(to right,rgba(26,25,24,.5),rgba(26,25,24,0) 60%); z-index:1; }
[dir="rtl"] .hero__scrim{ background:linear-gradient(180deg,rgba(26,25,24,0) 40%,rgba(26,25,24,.72) 100%),linear-gradient(to left,rgba(26,25,24,.5),rgba(26,25,24,0) 60%); }
.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; }
/* A phone sees only a narrow column of the 3.2:1 banner, and how narrow depends
   on the band's height: the taller the band, the harder `cover` zooms and the
   less of the picture is left. At 500px only about a quarter of the width
   survives — centred it lands between the two figures, on the truck and the
   empty apron; pushed right it holds the officer alone. Taking the band to
   420px and dropping the parallax zoom widens that column enough to frame BOTH
   men, at 76% — the Emirati visitor's face, the officer, the RAK Customs
   insignia. Physical percentage, not a logical edge: the picture does not
   mirror, so Arabic and English want the same crop. */
@media (max-width:900px){ .hero{ min-height:420px; } .hero__img{ object-position:76% center; } .hero__img--parallax{ transform:none !important; } .hero__inner{ padding:0 var(--gutter-mobile) 40px; } .hero__title{ font-size:var(--fs-display-md); line-height:var(--lh-display-md); } .hero__title-line:last-child{ max-width:100%; } }

/* Two-column media+text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--top{ align-items:start; }
.split--text-first{ direction:ltr; }
.split__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/2.7; }
/* Home split images sit slightly shorter (height reduced by 0.9): 2.7 -> 2.43. */
.split:not(.split--vision) .split__media{ aspect-ratio:4/2.43; }
.split__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.split__body h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
/* Consistent 20px top margin between heading and body across every home section. */
.split__body p{ margin-top:20px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-secondary); }
/* Home split sections (Who We Are / What We Do / What You Can Do) use a natural
   ragged edge rather than justified body copy. */
.split .split__body p{ text-align:start; }
.split__body .rak-btn{ margin-top:28px; }
.split__body .vision-note{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); }
/* Stacked order is title · image · description · button (Home's Who We Are /
   What We Do / What You Can Do, and About's Our Vision). display:contents lifts
   the body's children into the split's own grid so the media can slot between
   the heading and the copy. The grid gap is dropped to zero so the parts keep
   carrying their own top margins — 28px under the heading (on the image), 20px
   between paragraphs, 28px before the button — rather than one uniform gap.
   `> *{order:3}` is the base so any unnamed child lands with the copy instead of
   jumping ahead on order:0. The button is inline-flex, which a grid item would
   blockify to full width — justify-self keeps it its own size. */
@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; } }
/* Stacked, the About objectives head reads title · description · button: the
   left column's children join the (single-column) head grid so the CTA can sit
   after the description that lives in the right column. */
@media (max-width:820px){
  #objectives .sec-head__left{ display:contents; }
  #objectives .sec-head__left h2{ order:1; }
  #objectives .sec-head__right{ order:2; }
  #objectives .sec-head__left .rak-btn{ order:3; margin-top:0; justify-self:start; }
}
/* 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; }
}

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

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

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

/* ---------------- NEWS INDEX (filters + featured + list) ---------------- */
.news-filters{ display:flex; flex-direction:column; gap:32px; position:sticky; top:112px; }
@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{
  /* 56px tall — matches the services search field, so the 44px reset button
     centres with clearance instead of sitting on the underline. */
  box-sizing:border-box; width:100%; min-height:56px; padding:10px 4px;
  padding-inline-start:30px; padding-inline-end:44px; /* room for the reset button */
  border:0; border-bottom:1.5px solid var(--gray-200); border-radius:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-md); color:var(--text-primary);
  transition:border-color .15s ease;
}
.news-search__input::placeholder{ color:var(--text-tertiary); }
.news-search__input:hover{ border-color:var(--gray-400); }
/* Same focus treatment as the global search field: brand underline, placeholder
   steps out of the way. */
.news-search__input:focus{ outline:0; border-color:var(--color-brand); }
.news-search__input:focus::placeholder{ color:transparent; }
.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); }
/* The chosen date filter fills brand instead of the shared inverse (near-black),
   so the active facet reads as brand like the page's other selected states. The
   dot stays white — brand is dark enough to carry it. Scoped to this list: the
   accessibility panel's radios keep the neutral fill. */
.news-facet__list .rak-choice input:checked + .rak-choice__box{ background:var(--color-brand); border-color:var(--color-brand); }
/* Hover and keyboard focus answer in brand as well, so every state of the
   control reads in one colour. Hover is pointer-only: on touch the tapped row
   keeps it after the finger lifts, and a brand ring left on an unchecked row
   reads as a second selection — the trap the Contact nav hit. */
@media (hover:hover){
  /* Set on the label, so its text inherits the colour along with the ring. */
  .news-facet__list .rak-choice:hover{ color:var(--color-brand); }
  .news-facet__list .rak-choice:hover .rak-choice__box{ border-color:var(--color-brand); }
}
/* The focusable element is the input, which is deliberately 0x0 and invisible —
   so the global :focus-visible outline had nothing to draw around. Put the ring
   on the box the input labels instead, at the offset the other brand focus
   rings use. */
.news-facet__list .rak-choice input:focus-visible + .rak-choice__box{ border-color:var(--color-brand); outline:2px solid var(--color-brand); outline-offset:3px; }
/* The label text follows the control into brand. Reached through the sibling
   chain — input, then the box, then the text — because the label's own colour
   would otherwise win over inheritance for the checked and focused rows. */
.news-facet__list .rak-choice input:checked + .rak-choice__box + span,
.news-facet__list .rak-choice input:focus-visible + .rak-choice__box + span{ color:var(--color-brand); }

.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; }
.program-card__body{ padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.program-card__body h3{ font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); color:var(--text-primary); }
.program-card__body p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
/* CTA uses the design-system soft button, but with a translucent white fill for
   a lighter, more modern look; it adopts the brand accent on card hover. */
.program-card__cta{ margin-top:14px; --_bg:rgba(255,255,255,0.55); --_bgh:rgba(255,255,255,0.8); backdrop-filter:blur(4px); }
.program-card:hover .program-card__cta{ background:var(--color-brand); border-color:var(--color-brand); color:var(--color-white); }
.program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(3px); }
[dir="rtl"] .program-card:hover .program-card__cta .rak-btn__ico{ transform:translateX(-3px); }

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

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

/* ---- ABOUT: values accordion + media ---- */
.about-values{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-values__heading{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); margin-bottom:8px; }
.about-values__list{ margin-top:16px; }
.about-values__list .rak-expand{ padding:20px 0; }
.about-values__list .rak-expand:first-child{ border-top:1px solid var(--gray-150); }
.about-values__list .rak-expand__title{ font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.about-values__list .rak-expand__text{ text-align:start; }
.about-values__list .rak-expand__toggle{ width:32px; height:32px; }
.about-values__list .rak-expand__head:hover .rak-expand__toggle,
.about-values__list .rak-expand__head:focus-visible .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); }
/* Fixed by aspect-ratio and pinned to the top so opening accordions grows the
   left column without stretching the image. The ratio is the design's 528x633:
   a column is exactly 528 wide at the 1280 container (1120 inner, 64 gap). */
.about-values__media{ align-self:start; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:528/633; background:var(--gray-300); position:sticky; top:112px; }
.about-values__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .about-values{ grid-template-columns:1fr; gap:32px; }
  .about-values__heading{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
  .about-values__media{ position:static; top:auto; aspect-ratio:4/3; }
  /* Stacked order is title · image · accordion — the main column's children
     join the section grid so the media can slot in after the heading. The
     grid's row gap replaces their desktop margins. */
  .about-values__main{ display:contents; }
  .about-values__heading{ order:1; margin-bottom:0; }
  .about-values__media{ order:2; }
  .about-values__list{ order:3; margin-top:0; }
}

/* ---- 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; }
/* Inset logically, not left/right: the card hangs off the start edge in both
   directions with one declaration. The old physical pair needed a [dir="rtl"]
   override, and that override — being more specific than the mobile rule below
   and living outside its media query — kept forcing left:auto on Arabic phones,
   stretching the card to the image's left edge. */
.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 instead of the default
   grey wash, matching the section's "Learn more" CTA. */
.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; }
  /* Full width of the stage less a 16px margin each side, in either direction. */
  .wide-carousel__card{ inset-inline:16px; bottom:16px; max-width:none; padding:20px; }
}

/* ---- LEADERSHIP ---- */
/* Our Leadership section carries the same warm background as the message quote. */
#leadership{ background:var(--gray-100); }
.lead-intro{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.lead-intro h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-md); line-height:var(--lh-display-md); letter-spacing:var(--tracking-display); }
.lead-intro p{ font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
.lead-intro__body p + p{ margin-top:20px; }
.lead-intro__body--justify p{ text-align:justify; }
@media (max-width:820px){ .lead-intro{ grid-template-columns:1fr; gap:24px; } }
.lead-layout{ display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:start; }
.lead-aside h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); }
.lead-aside p{ margin-top:12px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); }
@media (max-width:900px){ .lead-layout{ grid-template-columns:1fr; gap:32px; } }
/* Featured leader: the image fills the full width of the right-hand column. */
.lead-featured{ display:block; text-decoration:none; color:inherit; margin-bottom:12px; }
.lead-featured:hover{ text-decoration:none; color:inherit; }
.lead-featured__media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/11; background:var(--gray-300); }
/* The box's ratio is authoritative, so a CMS portrait of any shape fills it
   instead of overflowing or leaving the rounded corners showing through. */
.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 spans both rows
   of the right column, at the design's 490x400 — a fixed cap rather than a
   share of the row, so it holds that size instead of growing with the
   container, and its own ratio (not the left column's height) sets how tall it
   is. Narrower viewports let it shrink below the cap. */
.lead-featured--row{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,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; aspect-ratio:490/400; }
.lead-featured--row .lead-featured__name{ margin-top:24px; }
.lead-featured__heading{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); margin-bottom:0!important; }
.lead-featured__summary{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-secondary); }
.lead-featured__summary + .lead-featured__summary{ margin-top:12px; }
@media (max-width:720px){
  /* Stack in source order: heading, then portrait, then quote/name. */
  .lead-featured--row{ grid-template-columns:1fr; gap:20px; }
  .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 attribution belongs with the quote it signs, so the name and
     role move above the button and the CTA closes the block. flex-start keeps
     the button hugging its label — a stretched flex item would span the column
     as a full-width bar. */
  .lead-featured--row .lead-featured__info{ display:flex; flex-direction:column; align-items:flex-start; }
  .lead-featured--row .lead-featured__summary{ order:1; }
  .lead-featured--row .lead-featured__name{ order:2; }
  .lead-featured--row .lead-featured__role{ order:3; }
  /* The button's desktop 28px was spacing it from a paragraph of quote; now it
     follows the role line, so it sits closer to the name/role pair it belongs
     with. */
  .lead-featured--row .rak-btn{ order:4; margin-top:16px; }
}
.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; }
/* Panel uses the --gray-100 token (identical to the design's #EFEDE9 in light
   mode) so it flips with the ramp in dark mode instead of staying beige. */
.msg-quote{ grid-column:1; grid-row:1; align-self:start; background:var(--gray-100); border-radius:var(--radius-xl); padding:32px; }
/* One grey across the whole message: the quote is a pull of the body beside it,
   so both read in --text-secondary rather than the quote greying alone. */
.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); }
/* Portrait matches the left quote card's height (the quote drives the row) and
   the message body's width (both share column 2). The image is absolutely
   positioned so it fills that height without inflating the grid row. */
.msg-portrait{ grid-column:2; grid-row:1; position:relative; align-self:stretch; min-height:0; border-radius:var(--radius-xl); overflow:hidden; background:var(--gray-300); }
.msg-portrait img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* Body text sits under the portrait, aligned within the right column. */
.msg-body{ grid-column:2; grid-row:2; max-width:none; }
.msg-body h2{ margin-bottom:24px; }
.msg-body p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-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. Undo the
     desktop stretch: stacked, there is no quote card beside it to match, so its
     own 4/3 ratio has to set the height. Safari in particular gives a
     stretched item the row's height — and since the img is absolutely
     positioned the row has no in-flow content, so the box collapsed to 0 and
     the portrait vanished (Chrome resolved the ratio instead and hid the bug). */
  .msg-portrait{ aspect-ratio:4/3; order:-1; align-self:start; min-height:auto; }
  /* Portrait leads directly under the subtitle on mobile — drop the section's
     top padding so the image sits close beneath the header. */
  .msg-section{ padding-top:0; }
}

/* ---- SERVICES ---- */
/* Services intro copy: constrained + justified on desktop, full width on mobile. */
.svc-intro{ max-width:60%; text-align:justify; }
@media (max-width:900px){ .svc-intro{ max-width:100%; } }
/* min-height keeps the page a stable height across service categories so the
   footer never shifts when the filtered list grows or shrinks. */
.svc-layout{ display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start; min-height:620px; }
@media (max-width:1199px){ .svc-layout{ gap:64px; } }
@media (max-width:900px){ .svc-layout{ grid-template-columns:1fr; gap:48px; min-height:0; } }
.svc-search{ position:relative; margin-bottom:32px; }
/* Search field uses an underline only — no box border, no rounded corners.
   Logical insets: the icon leads the text and the reset button trails it, on the
   correct sides in both LTR and RTL. */
.svc-search .rak-control{ padding:12px 0; padding-inline-start:36px; padding-inline-end:44px; border:0; border-bottom:1.5px solid var(--gray-200); border-radius:0; background:transparent; }
/* Matches the global search field on focus: brand underline, placeholder clears. */
.svc-search .rak-control:focus{ background:transparent; border-bottom-color:var(--color-brand); }
.svc-search .rak-control:focus::placeholder{ color:transparent; }
.svc-search__ico{ position:absolute; inset-inline-start:6px; top:50%; transform:translateY(-50%); color:var(--text-tertiary); pointer-events:none; }
/* Typeahead suggestions dropdown */
.svc-suggest{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; margin:0; padding:6px; list-style:none; background:var(--surface-page); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.svc-suggest__item{ display:block; width:100%; text-align:start; background:transparent; border:0; border-radius:var(--radius-sm); cursor:pointer; padding:10px 12px; font-family:var(--font-sans); font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-primary); }
.svc-suggest__item:hover,.svc-suggest__item.is-active{ background:var(--gray-100); color:var(--color-brand); }
.svc-suggest__cat{ display:block; margin-top:2px; font-size:var(--fs-text-sm); line-height:1.3; color:var(--text-tertiary); }
.svc-suggest__empty{ padding:10px 12px; font-size:var(--fs-text-sm); color:var(--text-tertiary); }
.svc-cats h4{ font-size:var(--fs-display-xs); font-weight:var(--fw-medium); margin-bottom:16px; }
.svc-cats__list{ display:flex; flex-direction:column; }
/* Logical inset + indicator side so the active bar sits on the reading-start
   edge — left in English, right in Arabic (matches .contact-nav). */
.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; }
.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{ transition:color .15s ease; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.svc-tag{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:var(--radius-pill); background:var(--gray-100); color:var(--text-secondary); font-size:var(--fs-text-sm); }
.svc-item__desc{ margin-top:10px; font-size:var(--fs-text-md); line-height:var(--lh-text-md); color:var(--text-secondary); max-width:70ch; }
.svc-item__ext{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; color:var(--text-tertiary); font-size:var(--fs-text-sm); }
.svc-item__chev{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-circle); background:var(--gray-100); display:inline-flex; align-items:center; justify-content:center; color:var(--text-primary); transition:background-color .15s ease,transform .15s ease; }
.svc-item:hover .svc-item__title{ color:var(--color-brand); }
.svc-item:hover .svc-item__chev{ background:var(--color-brand); color:var(--color-white); transform:translateX(2px); }
[dir="rtl"] .svc-item__chev svg{ transform:scaleX(-1); }

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

/* ---- ARTICLE (news / people hub) ---- */
.article{ max-width:760px; margin:0 auto; }
.article__title{ font-weight:var(--fw-bold); font-size:var(--fs-display-lg); line-height:var(--lh-display-lg); letter-spacing:var(--tracking-display); text-wrap:pretty; }
/* News article headlines read smaller than the display-lg used elsewhere. */
.article--news .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); }
.article__meta{ margin-top:16px; color:var(--text-secondary); font-size:var(--fs-text-sm); }
.article__hero{ margin-top:32px; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.article__body{ margin-top:40px; }
.article__body p{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-primary); }
/* Bullets read as the same prose as the paragraphs they sit between. Without
   this they inherit the 16px/20px body default, which shows up as a size drop
   mid-document on the list-carrying legal pages (Privacy Statement). */
.article__body li{ font-size:var(--fs-text-lg); line-height:28px; color:var(--text-primary); }
/* Inline email link in legal/prose copy: uses the site link colour (--text-link,
   theme-aware) and stays underlined so it reads as clickable within the text. */
.article__mail{ color:var(--text-link); text-decoration:underline; word-break:break-word; }
.article__body p + p{ margin-top:20px; }
/* Legal pages (Terms, Privacy) justify their prose; News articles stay ragged. */
.article--legal .article__body p,
.article--legal .article__body li{ text-align:justify; text-justify:inter-word; }
.article__body h2{ margin-top:40px; margin-bottom:4px; font-weight:var(--fw-medium); font-size:var(--fs-display-xs); line-height:var(--lh-display-xs); }
.article__body blockquote{ margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid var(--color-brand); font-size:var(--fs-text-xl); line-height:var(--lh-text-xl); color:var(--text-primary); }
@media (max-width:640px){ .article__title{ font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); } }

/* ---- CONTACT ---- */
.contact-layout{ display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:32px; } }
.contact-aside{ position:sticky; top:112px; display:flex; flex-direction:column; }
@media (max-width:900px){ .contact-aside{ position:static; top:auto; } }
.contact-aside .svc-search{ margin-bottom:24px; }
/* Logical inset + indicator side so the active bar sits on the reading-start
   edge — left in English, right in Arabic. */
.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; }
/* Hover only where there is a real pointer: on touch the tapped row keeps the
   hover colour after the finger lifts, so it went on reading as selected
   alongside the row the nav had actually moved to. */
@media (hover:hover){ .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 blocks, matching the HR site's Contact rhythm — and on the
   spacing scale, so it takes the token rather than a literal. */
.contact-block{ margin-bottom:var(--space-16); }
/* That margin is the gap BETWEEN blocks; on the last one it was also the page's
   whole bottom gap, and below 900px it stacked with the section padding that
   .rak-section--tight gives up there — dead space under the social chips. Own
   the tail here instead: one value at every width, and the last block stops
   contributing to it. */
.contact-layout{ padding-bottom:32px; }
.contact-block:last-child{ margin-bottom:0; }
/* Anchored blocks clear the sticky header when the side nav jumps to one — the
   96px bar plus breathing room, the same clearance .rak-expand[id] uses (and the
   HEADER constant in Contact.jsx). Without it the block lands flush with the
   viewport top, so the heading and first line sit hidden behind the bar and the
   section reads as cut off. */
.contact-block[id]{ scroll-margin-top:112px; }
.contact-block > h2{ font-weight:var(--fw-medium); font-size:var(--fs-display-sm); line-height:var(--lh-display-sm); letter-spacing:var(--tracking-display); margin-bottom:20px; }
.contact-kv{ font-size:var(--fs-text-md); line-height:var(--lh-text-lg); color:var(--text-primary); }
.contact-kv .lbl{ color:var(--text-secondary); }
.contact-kv + .contact-kv{ margin-top:16px; }
.contact-map{ margin:20px 0; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/6; background:var(--gray-200); }
.contact-map img{ width:100%; height:100%; object-fit:cover; display:block; }
.contact-figure{ margin:0 0 20px; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; background:var(--gray-200); }
.contact-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Address caption directly under the head-office image. */
.contact-figure + .contact-kv{ padding-top:8px; font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); }
.contact-hours{ margin-top:12px; color:var(--text-secondary); font-size:var(--fs-text-md); line-height:var(--lh-text-lg); }
.contact-centers{ background:var(--gray-50); border-radius:var(--radius-lg); overflow:hidden; }
/* Each customs centre is a rak-expand row; inset it and drop the last divider
   so the rows sit cleanly inside the grey card. */
.contact-centers .rak-expand{ padding-inline:24px; }
.contact-centers .rak-expand:last-child{ border-bottom:0; }
/* The +/- toggle fills with the brand colour on hover, like the Our Values rows. */
.contact-centers .rak-expand__head:hover .rak-expand__toggle,
.contact-centers .rak-expand__head:focus-visible .rak-expand__toggle,
.contact-centers .rak-expand.is-open .rak-expand__toggle{ background:var(--color-brand); color:var(--color-white); }
.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 --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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Global search page ------------------------------------------------- */
/* Search field — underlined, icon leading, clear button trailing. */
.gsearch-field{ position:relative; display:flex; align-items:center; margin-top:28px; }
.gsearch-field__icon{ position:absolute; inset-inline-start:2px; display:inline-flex; color:var(--text-tertiary); pointer-events:none; }
.gsearch-field__input{
  box-sizing:border-box; width:100%; min-height:52px; padding:12px 44px; padding-inline-start:36px;
  border:0; border-bottom:1.5px solid var(--gray-300); border-radius:0; background:transparent;
  font-family:var(--font-sans); font-size:var(--fs-text-lg); line-height:var(--lh-text-lg); color:var(--text-primary);
  transition:border-color .15s ease;
}
.gsearch-field__input::placeholder{ color:var(--text-tertiary); }
.gsearch-field__input:hover{ border-color:var(--gray-400); }
/* Focus underline takes the brand colour instead of plain ink, and the prompt
   text clears so it doesn't compete with what's being typed. */
.gsearch-field__input:focus{ outline:0; border-color:var(--color-brand); }
.gsearch-field__input:focus::placeholder{ color:transparent; }
.gsearch-field__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* Reset button shared by the three search fields (global search, news, services
   sidebar): a 44px circle on the subtle surface token (--gray-50 = #F7F5F3), so
   it reads as a real button and meets the 44px touch target. */
.gsearch-field__clear,
.news-search__clear,
.svc-search__clear{
  position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:var(--radius-circle);
  background:var(--gray-50); color:var(--text-tertiary); 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-100); }
/* Mobile/tablet (where the layouts stack): 32px circle, with the inputs' trailing
   padding pulled in to match so the text doesn't stop short of it. */
@media (max-width:900px){
  .gsearch-field__clear,
  .news-search__clear,
  .svc-search__clear{ width:32px; height:32px; }
  .gsearch-field__input,
  .news-search__input,
  .svc-search .rak-control{ padding-inline-end:32px; }
}

/* 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 accent on hover and while selected — the indicator border included. */
.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 .12s ease,color .12s ease; }
/* Fills brand on hover, like the .rak-btn--brand-hover CTAs. */
.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/tablet: the categories fold into the shared .svc-catselect dropdown
   (rendered inside .gsearch-cats), which sits above the results just as it does
   on Services — so the stacked source order stands and the desktop list hides. */
@media (max-width:900px){
  .gsearch-cats__title,
  .gsearch-cats__list{ display:none; }
}
@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); }
}