@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");
/* ============================================================
   rhm.ae inner pages, in the home page's world: the working file (11 Nov 2026,
   Abbu: "don't forget to polish the website").

   Loaded LAST on every inner page (services, the nine service pages, the assessment,
   guides, careers, legal, 404), after design-system.css and each page's own <style>.
   It resets the shared tokens to the home page's (assets/file/file.css): one serif
   (Newsreader), a paper ground, one ink, RHM blue only on the action, surfaces that
   step in tone, square corners, no shadows, no gradients, no monospace labels; and
   the same plain bar and the blue footer field.
   ============================================================ */

:root {
  /* the RHM brand (11 Nov 2026, Abbu: "be'te apply the new branding on live"): dark-leading, from the RHM design system */
  --bg: #0A0F1E;  --bg-soft: #121A30;
  --surface: #121A30;  --surface-2: #18223D;  --surface-3: #121A30;
  --border: #263152;  --border-subtle: #1E2844;
  --text: #E9EDF8;  --text-2: #C9D0E2;  --text-3: #9AA3B8;  --text-4: #9AA3B8;
  --accent: #6A86F0;  --accent-dim: #8299F4;  --accent-soft: #6A86F0;
  --accent-bg: #18223D;  --accent-on-bg: #C9D3FA;
  --ink: #E9EDF8;  --ink-2: #C9D3FA;
  --radius-sm: 4px;  --radius: 8px;  --radius-lg: 8px;  --radius-xl: 8px;
  --shadow-sm: none;  --shadow: none;  --shadow-lg: none;
  --lift-1: none;  --lift-2: none;  --lift-3: none;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif: "Inter", "Segoe UI", system-ui, sans-serif;
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --n-ink: #E9EDF8;  --n-text: #C9D0E2;  --n-label: #6A86F0;
}

html, body { background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--serif) !important;
  font-optical-sizing: auto;
  font-size: 1.1rem; line-height: 1.6;
}
h1, h2, h3, h4, .display, .h1, .h2, .h3 {
  font-family: var(--serif) !important; color: var(--ink);
  font-weight: 400; letter-spacing: -0.025em;
}
h1, .page-hero h1, .svc-hero h1 { font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
input, select, textarea, button { font-family: var(--serif); }
::selection { background: var(--accent); color: #0A0F1E; }

/* ---------- the bar: plain, like the home page ---------- */
.nav-marketing {
  background: var(--bg) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important; box-shadow: none !important;
}
.nav-links a { font-family: var(--serif); }
.nav-links a[aria-current], .nav-links a.active, .nav-links a.is-active {
  background: none; box-shadow: none; text-decoration: underline; text-underline-offset: .2em;
}

/* ---------- the top band: paper, no snow, no veil ---------- */
.page-hero, .svc-hero { background: var(--bg) !important; border-bottom: 0; }
.page-hero::before, .page-hero::after, .svc-hero::before, .svc-hero::after { display: none !important; }

/* headlines speak in one colour; the words carry the emphasis */
.mark-underline em, .mark-underline .thin, h1 em, h2 em, h3 em, .display em, .sc-head em {
  color: inherit !important; background: none !important; font-style: normal !important;
}
.mark-underline em::after { display: none !important; }
.page-hero h1 .thin, .svc-hero h1 .thin, h1.mark-underline .thin, h2 .thin {
  color: var(--ink) !important; font-weight: inherit !important; opacity: 1;
}

/* labels above headings: the text face, sentence case */
.eyebrow-c, .page-hero .eyebrow-c, .svc-hero .eyebrow-c {
  font-family: var(--serif) !important; font-size: 16px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--n-label) !important;
}
.eyebrow-c::before, .eyebrow-c::after { display: none !important; }

/* anything the old pages set in monospace or tiny tracked capitals reads as text */
.svc-toc-label, .guide-meta, .tag, .badge, .chip, .pill, .kicker, .label-mono, .meta, .eyebrow {
  font-family: var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important;
}

/* ---------- sections sit on the paper ground ---------- */
.svc-section, .svc-prose, .svc-capabilities, .svc-use-cases, .svc-related, .svc-faq,
.svc-detail-section, .pillar-prose, .faq-band, .offer-section, .prose-section,
.guides-section, .self-check, .cta-band { background: transparent !important; border: 0 !important; }

/* the in-page contents bar: a plain strip on the paper */
.svc-toc {
  background: var(--bg) !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ---------- cards: a step in tone, square, no lines, no resting shadows ---------- */
.svc-detail-card, .svc-cap, .svc-related-card, .offer-card, .offer-fact,
.cta-band-card, .sc-shell, .card, .guide-card, .tile {
  background: var(--surface) !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.svc-detail-card:hover, .svc-related-card:hover, .svc-cap:hover, .guide-card:hover, .card:hover {
  box-shadow: none !important; transform: none !important; background: #18223D !important;
}

/* questions and answers: rows in the surface tone */
.faq-item, .svc-faq-item {
  background: var(--surface); border: 0 !important; border-radius: 0 !important;
  margin-bottom: 8px; padding-left: 20px; padding-right: 20px;
}

/* buttons: square, flat, one fill */
.btn, .btn-ink, .btn-primary, .btn-soft, .btn-ghost {
  border-radius: 0 !important; box-shadow: none !important; font-family: var(--serif) !important; font-weight: 500;
}
.btn-primary, .btn-accent { background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.btn-primary:hover, .btn-accent:hover { background: var(--accent-dim) !important; }
.btn-ink { background: var(--ink) !important; color: #fff !important; border: 0 !important; }

/* form fields: square, no shadow */
.input, .select, .textarea, input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border-radius: 0 !important; box-shadow: none !important;
}

/* ---------- footer: the home page's blue field ---------- */
.foot { background: #1d2f86 !important; color: rgba(255, 255, 255, 0.86) !important; }
.foot a { color: rgba(255, 255, 255, 0.86); }
.foot a:hover { color: #fff; }
.foot-col h4 { font-family: var(--serif) !important; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; }
.foot-base { border-top: 0 !important; background: rgba(0, 0, 0, 0.12) !important; }
.foot-base-inner { font-size: 14px; }

/* running text in the full ink, readable */
.svc-prose p, .pillar-prose p, .prose p, .svc-prose li, .prose li, .lead, .sublead { color: var(--n-text); }

/* decorative glows and patterns from the old pages are switched off */
.page-hero .glow, .svc-hero .glow, .hero-glow, .blob, .orb, .grid-bg, .dots-bg { display: none !important; }

/* the accent word in a headline takes the headline's own weight */
h1 em, h1 .thin, h2 em, .mark-underline em { font-weight: inherit !important; }
/* the active link is underlined, nothing glows above it */
.nav-links a::before, .nav-links a::after { display: none !important; }
/* no icons in tinted squares on cards: the heading carries the card */
.icon-wrap, .svc-icon, .card-icon, .cap-icon { display: none !important; }
/* headings in the home page's weights: large ones light, small ones medium */
h2, .h2 { font-weight: 400 !important; }
h3, h4, .h3 { font-weight: 500 !important; }
.nav-links .active, .nav-links [aria-current], .nav-links li.active > a { background: none !important; box-shadow: none !important; }
/* the assessment's fact labels in sentence case */
.offer-fact .l { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; }
/* the trust box on service pages and guides: square, like every surface */
.trust { border-radius: 0 !important; box-shadow: none !important; }
/* table headings in sentence case */
th { text-transform: none !important; letter-spacing: 0 !important; }
/* emphasis inside card titles reads as plain words */
.svc-related-card em, .svc-detail-card em, .guide-card em, .card em { font-style: normal !important; font-weight: inherit !important; color: inherit !important; }

/* the RHM brand, continued: Sora for headings, buttons with surface text on RHM blue (5.7:1), the navy footer */
h1, h2, h3, h4, .h2, .h3, .page-hero h1, .svc-hero h1, .foot-col h4 { font-family: var(--display) !important; letter-spacing: -0.025em; }
h1, .page-hero h1, .svc-hero h1 { font-weight: 600 !important; letter-spacing: -0.035em; }
.btn-primary, .btn-accent { color: #0A0F1E !important; border-radius: 8px !important; }
.btn-ink { background: var(--surface-2) !important; color: var(--ink) !important; }
.foot { background: #16213A !important; color: #C9D0E2 !important; }
.brand-mark { color: #6A86F0 !important; }
html { color-scheme: dark; }
/* the lockup on every page: the exact mark, RHM in Sora, IT Simplified beneath (11 Nov, "go the whole nine yards") */
.brand { display: inline-flex !important; align-items: center; gap: 12px; text-decoration: none; }
.brand-img { width: 30px; height: 30px; display: block; }
.brand-word b { display: block; font: 700 22px/22px var(--display); letter-spacing: .03em; color: var(--ink); }
.brand-word small { display: block; font: 400 13px/16px "Inter", system-ui, sans-serif; color: var(--text-3); margin-top: 2px; }
.foot .brand-word small { color: #9AA3B8; }
@media (max-width: 600px) { .brand-word small { display: none; } }

/* ======================================================================================
   THE WHOLE NINE YARDS (11 Nov 2026): the older pages read like the home.
   Reading text 17px, card text 15px, labels 13px and nothing smaller; a picture of RHM's own 3D on every first screen.
   ====================================================================================== */
body { font-size: 17px; }
main p, main li, main dd, .svc-prose p, .prose p, .svc-prose li, .prose li, .lead, .sublead, .faq-a, .faq-answer, details p { font-size: 17px !important; line-height: 1.65 !important; }
.page-hero .lead, .svc-hero .lead { font-size: clamp(18px, 1.1rem + .3vw, 21px) !important; color: #C9D0E2 !important; }
[class*="card"] p, [class*="card"] li, [class*="tile"] p, [class*="tile"] li { font-size: 15px !important; line-height: 1.55 !important; }
[class*="eyebrow"], .breadcrumb, .breadcrumb a, .breadcrumb span, .toc a, .toc span, [class*="otp"] a, small, .label, .badge, .tag, [class*="-meta"], [class*="kicker"] { font-size: 13px !important; }
.foot, .foot a, .foot p, .foot li { font-size: 15px !important; }
.foot-base, .foot-base a, .foot-base-inner { font-size: 14px !important; }
.nav-links a, .btn { font-size: 15px !important; }
summary, .faq-q, details summary { font-size: 17px !important; }
/* the first screen holds a picture */
.svc-hero.has-pic { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); }
.svc-hero.has-pic .svc-hero-inner { max-width: none; padding: 0; margin: 0; }
.hero-pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.hero-band { display: block; width: min(1120px, calc(100% - 32px)); aspect-ratio: 21 / 9; object-fit: cover; border-radius: 8px; margin: 48px auto 0; }
@media (max-width: 860px) { .svc-hero.has-pic { grid-template-columns: 1fr; } .hero-pic { max-width: 560px; } .hero-band { aspect-ratio: 16 / 9; } }
.hero-pic, .hero-band { height: auto; }
/* labels never under 13px; the on-this-page rail reads at 14px */
.svc-toc a, .svc-toc-label { font-size: 14px !important; }
.label-mono { font-size: 13px !important; }
/* the first screen is anchored by its heading: display size on the inner pages too */
.page-hero h1, .svc-hero h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem) !important; line-height: 1.04 !important; }
/* on a phone, section headings stay within two lines */
@media (max-width: 600px) { main h2, .cta-band h2, section h2 { font-size: clamp(22px, 6vw, 26px) !important; line-height: 1.2 !important; } }
/* the phone menu drawer on the older pages: dark like the bar, readable links, the sign-in in RHM blue (Codex review) */
.nav-drawer { background: rgba(10, 15, 30, .97) !important; border-bottom-color: var(--border) !important; box-shadow: none !important; }
.nav-drawer a { color: var(--text) !important; border-bottom-color: var(--border) !important; }
.nav-drawer .drawer-signin { background: var(--accent) !important; color: #0A0F1E !important; border-radius: 6px !important; }
.nav-hamburger { color: var(--text) !important; }