/* Measured from MAJ Home v2.dc.html. Tier-C override stylesheet (CLAUDE.md's per-client
   customization table) — apps/sites/scripts/build-overrides.mjs emits this into MAJ's OWN
   dist only, decided purely by this file's existence (apps/sites/src/lib/overrides.ts's
   `hasOverrideStylesheet`), never a slug literal in the engine. Linked at the top of <body>
   after the engine styles (apps/sites/overrides/README.md), so these rules win the same way any
   other tier-C override's do. The engine already emits weights 400/500/700 of Outfit at
   `/fonts/outfit-<weight>.subset.woff2` (apps/sites/src/layouts/Base.astro's own font
   preloads) — those three @font-face rules below are harmless redeclarations kept for the
   800 weight's sibling `font-family: Outfit` (distinct from the engine's own `Site Outfit`
   family name) the design's uppercase display type needs; only the 600 weight
   (`/fonts/outfit-600.woff2`, apps/sites/overrides/maj/fonts/outfit-600.woff2) is a real
   MAJ-only asset build-overrides.mjs copies alongside this file. */
@font-face { font-family: Outfit; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/outfit-400.subset.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/outfit-500.subset.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/outfit-700.subset.woff2') format('woff2'); }
@font-face { font-family: Outfit; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/outfit-800.subset.woff2') format('woff2'); }
html[data-site-font-latin="outfit"] { --ms-font-latin: Outfit, Helvetica, Arial, sans-serif; }
:root { --site-header-block-size: 80px; }
html { scroll-padding-top: 80px; }
html[data-site-header-style="transparentToSolid"] .site-header {
  position: fixed; inset: 0 0 auto; width: 100%; height: 80px; margin: 0;
}
.site-header-inner { height: 80px; min-height: 80px; justify-content: space-between; gap: 20px; }
.site-header-brand { width: 83px; height: 44px; flex-basis: 83px; }
.site-header-logo { width: 83px; height: 28px; object-position: left center; }
html[dir="rtl"] .site-header-logo { object-position: right center; }
.site-header-navigation { flex: 0 0 auto; font-size: 15px; font-weight: 500; }
.site-header-navigation > ul { gap: 34px; }
.site-header-navigation a { display: inline-flex; align-items: center; height: 44px; color: #fff; }
.site-header-languages { flex: 0 0 auto; font-size: 14px; font-weight: 500; }
.site-header-language-compact { display: inline-flex; align-items: center; gap: 8px; height: 44px; color: #9a9a9a; }
.site-header-language-compact .is-current { color: #fff; }

/* Item 7a (round 2 parity fix): the design draws a black circle with a lime ring and the text
   "WA" — the engine's generic expressive-motion WhatsApp float (packages/ui/src/styles or
   apps/sites/src/styles/global.css's own `html[data-site-motion="expressive"]
   .site-whatsapp-float` rule) draws a lime circle with an icon instead. The accessible name
   stays the engine's own `aria-label` on the <a> (unchanged markup) — this only restyles the
   resting circle for MAJ. */
html[data-site-motion="expressive"] .site-whatsapp-float {
  background: #0a0a0a;
  border: 2px solid #c5e81e;
  color: #c5e81e;
}
html[data-site-motion="expressive"] .site-whatsapp-float svg { display: none; }
html[data-site-motion="expressive"] .site-whatsapp-float::before {
  content: 'WA';
  font-family: Outfit, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* ---- W-3h lane A: the assistant launcher is the WhatsApp button's twin. It stands directly above it (the engine
   places it), and here it takes the same black circle with a 2px lime ring; its text mark ("AI", set in the CMS)
   is drawn in the same face, size and weight as the WhatsApp "WA", so the two read as one pair. Nothing here is
   drawn unless the assistant is switched on: these selectors match nothing on a page without the launcher. ---- */
html[data-site-motion="expressive"] .ms-assistant-launcher {
  background: #0a0a0a;
  border: 2px solid #c5e81e;
  color: #c5e81e;
}
html[data-site-motion="expressive"] .ms-assistant-mark {
  font-family: Outfit, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* the mark is Latin letters (AI), set with the same tracking as the WhatsApp "WA" in both directions */
html[dir="rtl"][data-site-motion="expressive"] .ms-assistant-mark { letter-spacing: .02em; }
html[data-site-motion="expressive"] .ms-assistant-teaser { border-color: #c5e81e; }
/* ---- end W-3h lane A ---- */
.site-header-cta { flex: none; height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; }
/* The open menu is a modal dialog, so it sits above every fixed bar. The engine keeps the detached menu at
   z-index 60, while a service page's sticky proposal bar is 80 and the WhatsApp float 70: the bar covered the
   bottom of the fullscreen menu, and with it the language link that lives there. */
.site-mobile-menu[data-site-menu-detached][open] { z-index: 90; }
html[data-site-motion="expressive"] .site-footer-legal-line { color: #b8b8b8; }
html[data-site-header-motion-ready][data-site-header-desktop="hideOnScroll"] .site-header,
html[data-site-header-motion-ready][data-site-header-mobile="hideOnScroll"] .site-header {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
html[data-site-header-motion-ready] .site-header[data-site-header-hidden] { transform: translateY(-100%); }

html[data-site-header-style="transparentToSolid"] main > [data-site-block-root]:first-child {
  padding-block-start: 0 !important; padding-block-end: 0 !important;
}

.hero-extended[data-layout="split"] .hero-main {
  justify-content: space-between; gap: 0; padding: 140px 5vw 56px 6vw;
}
@media (min-width: 901px) {
  .hero-extended[data-layout="split"] { min-height: max(100vh, calc(745px + 22vw)); }
}
.hero-extended[data-layout="split"] .hero-eyebrow { margin: 0; font-size: 13px; font-weight: 500; line-height: normal; letter-spacing: .22em; }
.hero-extended[data-layout="split"] .hero-mark-box {
  width: clamp(180px,22vw,340px); height: clamp(150px,18.333vw,283.333px); block-size: clamp(150px,18.333vw,283.333px); flex: none; margin-bottom: 16px;
}
.hero-extended[data-layout="split"] .hero-mark-box img { width: 100%; height: 100%; block-size: 100%; box-sizing: border-box; padding: 4% 4.6% 2%; object-fit: contain; object-position: left center; }
.hero-extended[data-layout="split"] .hero-display {
  font-size: clamp(48px,7.2vw,124px); font-weight: 800; line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase; overflow-wrap: normal;
}
.hero-extended[data-layout="split"] .hero-subheading {
  max-width: 24em; margin: 0; font-size: clamp(18px,1.5vw,24px);
  line-height: 1.35; color: #fff;
}
.hero-extended[data-layout="split"] .hero-actions { gap: 24px; margin: 0; }
.hero-extended[data-layout="split"] .hero-primary {
  height: 56px; min-height: 56px; padding: 0 30px; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: normal;
}
.hero-extended[data-layout="split"] .hero-secondary {
  height: 44px; min-height: 44px; padding: 0; border-bottom: 1px solid rgb(255 255 255 / .3);
  color: #fff; font-size: 16px; font-weight: 600; line-height: normal; text-decoration: none;
}
.hero-extended[data-layout="split"] .hero-meta { font-size: 12px; line-height: normal; letter-spacing: .2em; text-transform: uppercase; }
.hero-extended[data-layout="split"] .hero-panel {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 120px 6vw 48px 4vw;
}
.hero-extended[data-layout="split"] .hero-stats-eyebrow,
.hero-extended[data-layout="split"] .hero-services-heading {
  margin: 0 0 22px; font-size: 12px; font-weight: 600;
  line-height: normal; letter-spacing: .22em; text-transform: uppercase;
}
.hero-extended[data-layout="split"] .hero-services-heading { margin-bottom: 14px; }
.hero-extended[data-layout="split"] .hero-services-heading { margin-top: 40px; }
.hero-extended[data-layout="split"] .hero-stats { border-top: 1px solid rgb(10 10 10 / .35); }
/* Logical sides: the divider and the padding beside it mirror with the direction on their own (physical
   padding once left the RTL left column's labels on the line). */
.hero-extended[data-layout="split"] .hero-stats li { gap: 0; padding-block: 20px; padding-inline: 0 16px; border-color: rgb(10 10 10 / .35); }
.hero-extended[data-layout="split"] .hero-stats li:nth-child(even) { padding-inline: 16px 0; }
.hero-extended[data-layout="split"] .hero-stats li:nth-child(odd) { border-inline-end: 1px solid rgb(10 10 10 / .35); }
.hero-extended[data-layout="split"] .hero-stats strong {
  font-size: clamp(48px,4.6vw,80px); font-weight: 800; line-height: .9;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .hero-extended[data-layout="split"] .hero-stats strong { letter-spacing: 0; }
.hero-extended[data-layout="split"] .hero-stat-num,
.hero-extended[data-layout="split"] .hero-stat-suffix,
.hero-extended[data-layout="split"] .hero-stat-count,
.hero-extended[data-layout="split"] .hero-stats var { line-height: .9; }
.hero-extended[data-layout="split"] .hero-stats li > span { margin-top: 10px; font-size: 15px; line-height: 1.35; }
.hero-extended[data-layout="split"] .hero-stats-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: rgb(10 10 10 / .75); }
.hero-extended[data-layout="split"] .hero-services { margin: 0; }
.hero-extended[data-layout="split"] .hero-services li { border-color: rgb(10 10 10 / .25); }
.hero-extended[data-layout="split"] .hero-services a {
  min-height: 44px; padding: 10px 0; font-size: clamp(15px,1.15vw,18px);
  font-weight: 600; line-height: 1.2;
}
.hero-extended[data-layout="split"] .hero-service-chip {
  flex: none; padding: 5px 10px; border-radius: 999px;
  background: #0a0a0a; color: #c5e81e; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
:lang(ar) .hero-extended[data-layout="split"] .hero-service-chip { letter-spacing: 0; text-transform: none; }
.hero-extended[data-layout="split"] .hero-services a {
  display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; gap: 1rem;
}
.hero-extended[data-layout="split"] .hero-service-chip { grid-column: 1; grid-row: 1; justify-self: start; }
.hero-extended[data-layout="split"] .hero-services a > span:first-child { grid-column: 2; grid-row: 1; min-width: 0; }

.logo-marquee-section { padding: 56px 0 !important; overflow: hidden; }
.logo-marquee-section > .mx-auto { width: min(100%,1680px); max-width: 1680px; padding: 0 6vw; }
.logo-marquee-section h2 { margin: 0; font-size: clamp(22px,2vw,30px); font-weight: 700; letter-spacing: -.02em; line-height: normal; }
.logo-marquee-section > .mx-auto > p { max-width: 1000px; margin-top: 24px; font-size: 14px; line-height: normal; color: #5c5852; }
/* Full-bleed in both directions: equal inline margins on an auto-width block. The old `left: 50%` plus a
   physical `margin-left: -50vw` on a 100vw-wide block is over-constrained in RTL (the browser drops
   margin-left), which left the Arabic wall half a screen to the right and cut its rows mid-screen. */
.logo-marquee-section .logo-wall {
  margin: 28px calc(50% - 50vw) 0; gap: 12px;
}
.logo-marquee-section .logo-row { border-top: 1px solid rgb(10 10 10 / .1); border-bottom: 1px solid rgb(10 10 10 / .1); }
.logo-marquee-section .logo-list { gap: 0; padding: 0; }
/* The tile is as tall as the block asks (the engine sets --logo-tile-height on the wall: 84px standard, 64px
   thin, 110px tall). A hardcoded 84px here was taller than the thin service-page strip's 64px window, whose
   overflow is hidden: every logo sat 20px low and its lower third was cut off. */
.logo-marquee-section .logo-tile,
.logo-marquee-section .logo-link,
.logo-marquee-section .logo-tile > img,
.logo-marquee-section .logo-wordmark { width: 200px; height: var(--logo-tile-height, 84px); }
.logo-marquee-section .logo-tile { border-right: 1px solid rgb(10 10 10 / .1); }
.logo-marquee-section .logo-wordmark { padding: 0 20px; color: #9a9a9a; font-size: 15px; font-weight: 700; line-height: normal; }
.logo-marquee-section .logo-tile:hover .logo-wordmark { color: #0a0a0a; }
.logo-marquee-section .logo-tile img { max-width: 160px; max-height: 64px; padding: 0; object-fit: contain; filter: grayscale(1); opacity: .6; }
.logo-marquee-section .logo-tile:is(:hover, :focus-within) img { filter: none; opacity: 1; }
.logo-marquee-section .logo-link:focus-visible img { filter: none; opacity: 1; }
.logo-marquee-section .logo-row:nth-child(2) .logo-track { animation-duration: 66s; }
/* The thin strip (a service page's single row, 64px tiles): the area-weighted logos reach the tile's full
   height and touched both hairlines; a uniform scale keeps their relative weight and gives them air. Keyed on
   the wall's own --logo-tile-height so the home wall (84px) is untouched. */
.logo-marquee-section .logo-wall[style*="--logo-tile-height:64px"] .logo-tile img { scale: .82; }
/* Reduced motion: the engine unrolls a wall into a wrapped grid, which at MAJ's 200px tiles is one tile a row -
   a 3,000px column of logos on a phone. The thin strip stays ONE swipeable row instead. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-section .logo-wall[style*="--logo-tile-height:64px"] .logo-window {
    display: block; block-size: var(--logo-tile-height); overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .logo-marquee-section .logo-wall[style*="--logo-tile-height:64px"] .logo-window::-webkit-scrollbar { display: none; }
  .logo-marquee-section .logo-wall[style*="--logo-tile-height:64px"] .logo-track { inline-size: max-content; }
  .logo-marquee-section .logo-wall[style*="--logo-tile-height:64px"] .logo-list { inline-size: max-content; flex-wrap: nowrap; padding-inline-end: 1rem; }
}

main [data-block="compare"], main [data-block="servicesGrid"], main [data-block="workGrid"],
main [data-block="steps"], main [data-block="booking"] {
  padding: clamp(80px,9vw,140px) 6vw;
}
/* MAJ phone service rows (owner, 2026-10-07: "remove the images that appear in the flood effect … for the mobile
   version only and keep the desktop version as it is"): on a phone the row still floods lime and the chip still
   swaps colour, but the preview card the shared motion code portals to the page is never shown, so no image appears.
   Desktop keeps its pointer-following card,
   which is a different element ([data-preview] inside the row) and is untouched here. */
@media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
  html[data-site-motion="expressive"] > [data-touch-preview],
  html[data-site-motion="expressive"] > [data-touch-preview][data-touch-preview-active] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-motion="expressive"] .services-rows[data-hover="flood"] [data-flood] { transition: none; }
}
main [data-block="compare"]::after { content: ''; display: block; }
@media (max-width: 600px) { main [data-block="compare"]::after { height: 6px; } }
@media (min-width: 601px) and (max-width: 900px) { main [data-block="compare"]::after { height: 2px; } }
@media (min-width: 901px) and (max-width: 1499px) { main [data-block="compare"]::after { height: 3px; } }
@media (min-width: 1500px) { main [data-block="compare"]::after { height: 1px; } }
main [data-block="compare"] .max-w-6xl, main [data-block="workGrid"] .max-w-6xl,
main [data-block="steps"] .max-w-5xl { max-width: 1680px; }
main [data-block="compare"] h2, main [data-block="servicesGrid"] h2,
main [data-block="workGrid"] h2, main [data-block="steps"] h2 {
  margin: 0; font-size: clamp(36px,4.8vw,80px); font-weight: 800;
  line-height: .95; letter-spacing: -.035em; text-wrap: pretty;
}
main [data-block="compare"] > div > p:first-child,
main [data-block="workGrid"] > div > div:first-child p:first-child {
  margin: 0 0 20px; font-size: 13px; font-weight: 500; line-height: normal;
  letter-spacing: .22em; text-transform: uppercase; color: #9a9a9a;
}
main [data-block="compare"] > div > p:first-child { color: rgb(255 255 255 / .7); }
main [data-block="compare"] > div > p:nth-of-type(2) {
  max-width: 26em; margin: 32px 0 0; font-size: 16px; line-height: normal; color: rgb(255 255 255 / .8);
}
@media (min-width: 1500px) {
  main [data-block="compare"] > div {
    display: grid; grid-template-columns: minmax(0,1fr) 26em; column-gap: 32px;
  }
  main [data-block="compare"] > div > p:first-child,
  main [data-block="compare"] > div > h2 { grid-column: 1; }
  main [data-block="compare"] > div > p:nth-of-type(2) {
    grid-column: 2; grid-row: 2; align-self: end; margin: 0;
  }
  main [data-block="compare"] .compare-grid,
  main [data-block="compare"] > div > p:nth-of-type(n+3) { grid-column: 1 / -1; }
}
main [data-block="compare"] .compare-grid,
main [data-block="workGrid"] .work-grid-cards { margin-top: clamp(40px,4vw,64px); gap: 16px; }
main [data-block="compare"] .compare-category { font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
main [data-block="compare"] .compare-switch-label { font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: .16em; }
main [data-block="compare"] .compare-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
main [data-block="compare"] .compare-item { min-width: 0; padding: 0; overflow: hidden; background: #3d2470; border: 1px solid rgb(255 255 255 / .12); }
main [data-block="compare"] .compare-panel-head { padding: 14px 16px; margin: 0; }
main [data-block="compare"] .compare-captions { margin: 0; padding: 12px 16px; }
main [data-block="compare"] .compare-label { font-size: 13px; line-height: normal; color: rgb(255 255 255 / .7); }
main [data-block="compare"] .compare-label-after { color: #c5e81e; font-weight: 600; }
main [data-block="compare"] .compare-dots-count { font-size: clamp(40px,3.6vw,64px); letter-spacing: -.04em; }
main [data-block="compare"] .compare-hint {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
main [data-block="compare"] > div > p:nth-last-of-type(2) {
  margin: 24px 0 0; font-family: ui-monospace,Menlo,monospace;
  font-size: 11px; line-height: normal; color: rgb(255 255 255 / .6);
}
main [data-block="workGrid"] .work-grid-card { border-radius: 0; }
main [data-block="workGrid"] .work-grid-card > div:last-child { padding: 20px 18px 22px; gap: 10px; }
main [data-block="workGrid"] .work-grid-card h3 { font-size: clamp(20px,1.6vw,26px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
main [data-block="workGrid"] .work-grid-card p { font-size: 14px; line-height: 1.5; }
main [data-block="workGrid"] .work-grid-cta { height: 52px; padding: 0 26px; font-size: 16px; font-weight: 600; line-height: normal; }
main [data-block="workGrid"] .work-grid-placeholder :is(.work-grid-placeholder-meta,.work-grid-placeholder-client) { line-height: normal; }
main [data-block="workGrid"] .work-grid-client { line-height: normal; }
main [data-block="workGrid"] .work-grid-arrow { font-weight: 600; line-height: normal; }
main [data-block="workGrid"] { padding-bottom: calc(clamp(80px,9vw,140px) - 3px); }

main .services-rows-inner { display: grid; grid-template-columns: minmax(0,1fr); }
main .services-rows h2 { grid-row: 1; margin: 0; max-width: 14em; }
main .services-rows .services-note { grid-row: 2; margin: 32px 0 0; max-width: 26em; color: #5c5852; font-size: 16px; line-height: normal; }
main .services-rows .services-note a { color: inherit; text-decoration: none; }
main .services-rows ol { grid-row: 3; margin-top: 24px; border-color: rgb(10 10 10 / .18); }
@media (min-width: 1500px) {
  main .services-rows-inner { grid-template-columns: minmax(0,1fr) 26em; column-gap: 32px; }
  main .services-rows h2 { grid-column: 1; }
  main .services-rows .services-note { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  main .services-rows ol { grid-column: 1 / -1; grid-row: 2; }
}
main .services-rows li {
  position: relative; grid-template-columns: minmax(0,7fr) minmax(0,5fr); grid-template-rows: auto auto;
  gap: 10px 32px; padding: 28px 0 25.5px; border-color: rgb(10 10 10 / .18); overflow: hidden;
}
main .services-rows .service-number, main .services-rows .service-copy h3 { display: none; }
main .services-rows .service-copy { display: contents; }
main .services-rows .service-outcome { grid-column: 1; grid-row: 1 / 3; margin: 0; font-size: clamp(24px,2.8vw,44px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
main .services-rows .service-summary { grid-column: 2; grid-row: 2; margin: 0; max-width: 30em; font-size: 16px; line-height: 1.45; color: #0a0a0a; }
main .services-rows li a { grid-column: 2; grid-row: 1; justify-self: start; min-height: 0; padding: 6px 12px; border-radius: 999px; background: #c5e81e; color: #0a0a0a; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
main .services-rows li a::before { content: ''; position: absolute; inset: 0; }

main .steps-section .steps-list { margin-top: 0; gap: 24px; }
main .steps-section:not(:has(.steps-item[data-rule="top"])) { padding-bottom: clamp(64px,7vw,110px); }
main > [data-site-block-root]:has(> .steps-section) + [data-site-block-root]:has(> .steps-section) > .steps-section { padding-top: 0; }
main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-list { grid-template-columns: repeat(5,minmax(0,1fr)); }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
/* 9f: a six-stage list (How we work) is two rows of three on a desktop, not five columns and an orphan. Phones and
   tablets keep the two- and one-column rules below, which carry !important. */
main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-list:has(> .steps-item:nth-child(6):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 56px; }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-list { margin-top: 43px; }
main .steps-section:has(.steps-item[data-rule="top"]) h2 { max-width: 12em; }
main .steps-section .steps-number { font-size: clamp(40px,3.6vw,64px); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
main .steps-section .steps-item h3 { margin: 18px 0 8px; font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -.01em; }
main .steps-section .steps-item p { margin: 0; font-size: 15px; line-height: 1.5; color: #5c5852; }
main .steps-section .steps-progress { height: 2px; margin: 36px 0 28px; }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-number { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #5c5852; }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-item h3 { font-size: clamp(20px,1.7vw,26px); line-height: 1.12; letter-spacing: -.02em; }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-item p { line-height: 1.55; }
main .steps-section .steps-inner > p { line-height: normal; }
main .steps-section:has(.steps-item[data-rule="top"]) .steps-item[data-rule="top"] { padding-top: 20px; }
main .steps-section:has(.steps-item[data-rule="top"])::after { content: ''; display: block; }
@media (min-width: 1500px) {
  main .steps-section:has(.steps-item[data-rule="top"]) { padding-bottom: calc(clamp(80px,9vw,140px) + 2px); }
}
@media (min-width: 901px) and (max-width: 1499px) {
  main .steps-section:has(.steps-item[data-rule="top"]) { padding-bottom: clamp(80px,calc(3.6vw + 46px),115px); }
}
@media (min-width: 768px) {
  main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-inner {
    display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 32px;
  }
  main .steps-section:not(:has(.steps-item[data-rule="top"])) h2 { grid-column: 1; grid-row: 1; }
  main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-inner > p { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-progress,
  main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-list { grid-column: 1 / -1; }
}

main [data-block="booking"] { padding: clamp(96px,11vw,180px) 0; }
html[data-site-layout-width="wide"] main [data-block="booking"][data-layout="split"] { padding-inline: 0; }
main [data-block="booking"][data-layout="split"] .booking-brief-content {
  max-width: 1680px; grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  gap: clamp(40px,6vw,120px); padding-inline: 6vw;
}
main [data-block="booking"] .booking-eyebrow {
  margin: 0 0 24px; font-size: 13px; font-weight: 500; line-height: normal;
  letter-spacing: .22em; text-transform: uppercase; color: #9a9a9a;
}
main [data-block="booking"] .booking-intro h2 {
  margin: 0; font-size: clamp(44px,5.6vw,104px); font-weight: 800;
  line-height: .95; letter-spacing: -.035em; overflow-wrap: normal;
}
main [data-block="booking"] .booking-body {
  margin: 28px 0 0; max-width: 28em; font-size: clamp(17px,1.2vw,20px);
  line-height: 1.5; color: #fff;
}
main [data-block="booking"] .booking-contact { margin-top: 36px; gap: 24px; }
main [data-block="booking"] .booking-contact a {
  height: 44px; min-height: 44px; border-bottom: 1px solid rgb(255 255 255 / .3);
  color: #fff; font-size: 16px; font-weight: 500; line-height: normal; text-decoration: none;
}
main [data-block="booking"] .booking-form-card { padding: 32px; border-radius: 0; }
main [data-block="booking"] form[data-lead-form] {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px; align-items: start;
}
main [data-block="booking"] form[data-lead-form] > h2 {
  grid-column: 1 / -1; margin: 0 0 -1.5px; font-size: 12px; font-weight: 600;
  line-height: normal; letter-spacing: .22em; text-transform: uppercase;
}
main [data-block="booking"] .lead-form-field { min-width: 0; margin: 0; }
main [data-block="booking"] .lead-form-field:has([data-field="name"]),
main [data-block="booking"] .lead-form-field:has([data-field="message"]) { grid-column: 1 / -1; }
main [data-block="booking"] .lead-form-field:has([data-field="phone"]) { grid-column: 2; grid-row: 3; }
main [data-block="booking"] .lead-form-field:has([data-field="company"]) { grid-column: 1; grid-row: 3; }
main [data-block="booking"] .lead-form-field:has([data-field="email"]) { display: none; }
main [data-block="booking"] .lead-form-field label {
  display: grid; gap: 6px; color: #0a0a0a; font-size: 13px; font-weight: 600; line-height: normal;
}
main [data-block="booking"] .lead-form-field :is(input,select,textarea) {
  width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0;
  border-bottom: 1px solid rgb(10 10 10 / .35); border-radius: 0;
  background: transparent; color: #0a0a0a; font-size: 16px;
}
main [data-block="booking"] .lead-form-field textarea { height: 76px; padding: 8px 0; }
main [data-block="booking"] .lead-form-captcha { grid-column: 1 / -1; margin: 0; }
main [data-block="booking"] .lead-form-submit {
  grid-column: 1 / -1; justify-self: start; width: auto; min-width: 189.2px; height: 56px; margin: -14px 0 0;
  padding: 0 30px; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: normal;
}
/* The brief's send button is the header's "Start a brief" pill: same 44px geometry, 14px/700 type, lime
   fill, and the same magnetic movement (`data-magnet`, wired by the shared expressive motion layer, which
   never runs under reduced motion). Like the header button it has NO transform transition (the magnet
   writes an inline transform every frame; an eased transform lags the pointer), no press-scale and no
   hover recolour: the movement is the hover feedback. The flex box centres the label on both axes. */
html[data-site-motion="expressive"] main [data-block="booking"] .booking-form-card[data-tone] .lead-form-submit {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 0; height: 44px; min-height: 44px; margin: -14px 0 0;
  padding: 0 22px; border: 1px solid #0a0a0a; border-radius: 999px;
  background: #c5e81e; color: #0a0a0a; font-family: inherit;
  font-size: 14px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
  transition: none; scale: none;
}
html[data-site-motion="expressive"] main [data-block="booking"] .booking-form-card[data-tone] .lead-form-submit:focus-visible {
  outline: 3px solid #0a0a0a; outline-offset: 3px;
}
html[data-site-motion="expressive"] main [data-block="booking"] .booking-form-card[data-tone] .lead-form-submit:disabled {
  border-color: #494949; background: #e2e2d8; color: #383838; cursor: wait; opacity: 1;
}
main [data-block="booking"] .lead-form-promise { grid-column: 1 / -1; margin: -7px 0 0; font-size: 12px; line-height: normal; color: #5c5852; }
main [data-block="booking"] .lead-form-status { grid-column: 1 / -1; margin: 0; }
main [data-block="booking"] .lead-form-status:empty { display: none; }
main [data-block="booking"] [data-thanks]:not([hidden]) {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 420px; padding: 40px 32px; background: #c5e81e; color: #0a0a0a;
}
main [data-block="booking"] [data-thanks]:not([hidden])::after {
  content: ''; display: block; width: 64px; height: 58px;
  background: var(--maj-success-mark) center / contain no-repeat;
  filter: brightness(0);
}

html[data-site-motion="expressive"] section[data-reveal] { transform: none; transition: none; }
html[data-site-motion="expressive"] [data-reveal]:not(section) {
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .9s cubic-bezier(.16,1,.3,1);
}
html[data-site-motion="expressive"] [data-reveal]:not(section)[data-reveal-armed]:not([data-revealed]) {
  opacity: 0; transform: translateY(40px);
}

@media (max-width: 900px) {
  html[data-site-motion="expressive"] .site-header-inner { padding: 0 20px; padding-inline-end: 84px; gap: 8px; }
  .site-header-navigation, .site-header-languages { display: none !important; }
  html[data-site-motion="expressive"] .site-header-cta { display: inline-flex; flex: 0 0 auto; height: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: 11px; line-height: 1; white-space: nowrap; }
  .site-mobile-menu[data-site-menu-detached] { top: 18px; right: 20px; left: auto; }
  html[dir="rtl"] .site-mobile-menu[data-site-menu-detached] { right: auto; left: 20px; }
  .site-mobile-menu-toggle { width: auto; height: 44px; min-width: 44px; min-height: 44px; padding: 0 8px; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
  .site-mobile-menu-icon { display: none; }
  html[data-site-drawer="full"] .site-mobile-menu-panel { padding: 110px 20px 32px; }
  .site-mobile-menu-panel[data-site-menu-mode="fullscreen"] { justify-content: flex-start; }
  .site-mobile-menu-panel[data-site-menu-mode="fullscreen"] .site-mobile-menu-links { gap: 6px; }
  .site-mobile-menu-panel[data-site-menu-mode="fullscreen"] .site-mobile-menu-contact { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; font-size: 14px; line-height: 1.6; color: #9a9a9a; }
  .site-mobile-menu-panel[data-site-menu-mode="fullscreen"] .site-mobile-menu-contact a { color: #fff; }
  .site-mobile-menu-panel[data-site-menu-mode="fullscreen"] .site-mobile-menu-contact > a { padding: 10px 0; font-size: 18px; }
  .site-mobile-menu-links > li > a { font-size: clamp(40px,11vw,64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
  .site-mobile-menu-cta { width: auto; align-self: flex-start; height: 52px; padding: 0 26px; font-size: 16px; font-weight: 700; }
  .site-mobile-languages a[aria-current="page"] { display: none; }
  .hero-extended[data-layout="split"] { min-height: 0; }
  .hero-extended[data-layout="split"] { padding-block: 0 !important; }
  .hero-extended[data-layout="split"] .hero-main { min-height: 0; gap: 32px; padding: 120px 20px 56px; }
  .hero-extended[data-layout="split"] .hero-meta { margin-bottom: 1.5px; }
  .hero-extended[data-layout="split"] .hero-panel { padding: 120px 20px 48px; }
  /* 7n: the stats stay a 2 x 2 block with a hairline cross when the panel stacks (they used to become four tall
     single-column rows). The engine's own single-column rule starts at 624px, so say two columns here. */
  .hero-extended[data-layout="split"] .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  main [data-block="compare"], main [data-block="servicesGrid"], main [data-block="workGrid"],
  main [data-block="steps"], main [data-block="booking"] { padding: 80px 20px; }
  .logo-marquee-section > .mx-auto { padding: 0 20px; }
  main [data-block="compare"] .compare-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  main .services-rows li { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; gap: 14px; padding-bottom: 21.5px; }
  main .services-rows .service-outcome { grid-column: 1; grid-row: 1; }
  main .services-rows li a { grid-column: 1; grid-row: 2; }
  main .services-rows .service-summary { grid-column: 1; grid-row: 3; }
  main .steps-section .steps-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  main .steps-section .steps-progress { margin-top: 52px; }
  main .steps-section:has(.steps-item[data-rule="top"])::after { height: 2px; }
  main [data-block="workGrid"] { padding-bottom: 80px; }
  main [data-block="booking"] { padding: 80px 0; }
  main [data-block="booking"][data-layout="split"] .booking-brief-content { grid-template-columns: minmax(0,1fr); padding-inline: 20px; }
  main [data-block="booking"] .booking-intro { padding-inline: 20px; }
  main [data-block="booking"] form[data-lead-form] { grid-template-columns: minmax(0,1fr); }
  main [data-block="booking"] form[data-lead-form] > h2 { grid-row: 1; }
  main [data-block="booking"] .lead-form-field:has([data-field="name"]) { grid-row: 2; }
  main [data-block="booking"] .lead-form-field:has([data-field="company"]) { grid-row: 3; }
  main [data-block="booking"] .lead-form-field:has([data-field="phone"]) { grid-row: 4; }
  main [data-block="booking"] .lead-form-field:has([data-field="booking_service"]) { grid-row: 5; }
  main [data-block="booking"] .lead-form-field:has([data-field="market"]) { grid-row: 6; }
  main [data-block="booking"] .lead-form-field:has([data-field="message"]) { grid-row: 7; }
  main [data-block="booking"] .lead-form-captcha { grid-row: 8; }
  main [data-block="booking"] .lead-form-submit { grid-row: 9; }
  main [data-block="booking"] .lead-form-promise { grid-row: 10; }
  main [data-block="booking"] .lead-form-field:has([data-field="phone"]),
  main [data-block="booking"] .lead-form-field:has([data-field="company"]) { grid-column: 1; }
}
@media (max-width: 600px) {
  .hero-extended[data-layout="split"] .hero-meta { margin-bottom: 5px; }
  /* 7n: the counted numbers as ONE tight block. The panel opens 56px under the hero copy (not the desktop
     header's 120px), the four figures share one size that fits the widest ('5M+ EGP') in a half-width cell,
     and the labels sit under them at 13px. Each cell is a query container, so the size follows the cell. */
  .hero-extended[data-layout="split"] .hero-panel { padding-block: 56px 40px; }
  .hero-extended[data-layout="split"] .hero-stats-eyebrow { margin-bottom: 16px; }
  .hero-extended[data-layout="split"] .hero-stats li { padding-block: 16px 18px; padding-inline: 0 14px; }
  .hero-extended[data-layout="split"] .hero-stats li:nth-child(even) { padding-inline: 14px 0; }
  .hero-extended[data-layout="split"] .hero-stats strong { font-size: min(46px, calc(100cqi / 4.1)); }
  .hero-extended[data-layout="split"] .hero-stats .hero-stat-num { white-space: nowrap; }
  .hero-extended[data-layout="split"] .hero-stats li > span { margin-top: 8px; font-size: 13px; line-height: 1.35; }
  .hero-extended[data-layout="split"] .hero-stats-note { margin-top: 16px; font-size: 13px; }
  main [data-block="workGrid"] { padding-bottom: 87px; }
  main .steps-section:has(.steps-item[data-rule="top"]) { padding-bottom: 92px; }
  /* numbered process steps carry a paragraph each: two columns left 3-4 words a line on a phone */
  main .steps-section:not(:has(.steps-item[data-rule="top"])) .steps-list { grid-template-columns: minmax(0,1fr) !important; }
}

/* 7n: the process steps on a phone are a vertical timeline. The step numbers are ink nodes on ONE line at the
   inline start (the launch steps, the ones the tenant accents, are lime nodes); each step's text sits beside
   its node, and the home steps' day marker (`when`, the engine renders it for this tenant) is a small label on
   the node's row. The line is lime and is drawn as the visitor scrolls (a scroll-driven animation, transform
   only); without support for it, and under reduced motion, it is simply fully drawn. It applies to the home
   "Two weeks" steps (columns) and to every service page's `timeline` steps; the four "why" reasons
   (`data-rule="top"`) are not a process and keep their columns. The wording never depends on the line. */
main .steps-section .steps-when { display: none; }
@keyframes maj-timeline-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 600px) {
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) { --tl-node: 44px; --tl-line: 4px; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list { gap: 0; margin-top: 36px; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-progress + .steps-list { margin-top: 4px; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item {
    position: relative; display: grid; grid-template-columns: var(--tl-node) minmax(0,1fr); column-gap: 16px; align-items: start;
    padding: 0 0 36px; border: 0;
  }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:last-child { padding-block-end: 0; }
  /* `.steps-number` twice: the engine colours a step number with a rule of its own seven-class weight (tone + accent), and the node must win it */
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item .steps-number.steps-number {
    position: relative; z-index: 1; display: grid; place-items: center; box-sizing: border-box;
    inline-size: var(--tl-node); block-size: var(--tl-node); border-radius: 50%;
    background: #0a0a0a; color: #c5e81e; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0;
  }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item[data-accent-number="true"] .steps-number.steps-number { background: #c5e81e; color: #0a0a0a; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-item .steps-copy { min-inline-size: 0; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-item .steps-when {
    display: inline-flex; align-items: center; box-sizing: border-box; block-size: 24px; margin: 10px 0 0; padding: 0 10px;
    border: 1px solid rgb(10 10 10 / .3); border-radius: 999px; color: #0a0a0a;
    font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  }
  :lang(ar) main .steps-section .steps-item .steps-when { letter-spacing: 0; text-transform: none; font-size: 12px; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-item h3 { margin: 10px 0 6px; font-size: 20px; line-height: 1.2; }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-item .steps-when + h3 { margin-top: 8px; }
  /* one line, drawn in segments: each step draws the stretch down to the next node (a 2px grey track, the lime 4px over it) */
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:not(:last-child)::before,
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:not(:last-child)::after {
    content: ''; position: absolute; inset-block: calc(var(--tl-node) / 2) calc(var(--tl-node) / -2);
    inset-inline-start: calc(var(--tl-node) / 2 - var(--tl-line) / 2); inline-size: var(--tl-line); border-radius: 2px; pointer-events: none;
  }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:not(:last-child)::before { background: rgb(10 10 10 / .18); inline-size: 2px; inset-inline-start: calc(var(--tl-node) / 2 - 1px); }
  main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:not(:last-child)::after { background: #c5e81e; transform-origin: 50% 0; }
}
/* The drawing: the stretch fills as it passes the reading line, ~62% down the screen (a view timeline on the
   step; the range is measured in the step's own height, so consecutive steps hand the line on without a gap). */
@supports (animation-timeline: view()) {
  @media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
    main .steps-section:is([data-layout="timeline"], [data-layout="columns"]:not(:has([data-rule="top"]))) .steps-list > .steps-item:not(:last-child)::after {
      animation: maj-timeline-draw linear both; animation-timeline: view(); animation-range: entry 38svh entry calc(100% + 38svh);
    }
  }
}
/* Once the booking split stacks (MAJ: at 900px and below), the inline-end peel would sit under the intro
   copy; it becomes a slanted slab behind the form card instead, in both directions. */
@media (max-width: 900px) {
  main [data-block="booking"] .booking-peel,
  html[dir="rtl"] main [data-block="booking"] .booking-peel {
    inset-block-start: auto; block-size: 38%; inline-size: 100%;
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-extended[data-layout="split"] .hero-panel { padding-bottom: 48px; }
  main .steps-section .steps-progress { margin-top: 36px; }
  main .steps-section:has(.steps-item[data-rule="top"])::after { height: 13.4px; }
  main [data-block="workGrid"] { padding-bottom: 74px; }
}
@media (min-width: 901px) and (max-width: 1499px) {
  main .steps-section:has(.steps-item[data-rule="top"])::after { height: 2px; }
}
@media (min-width: 1500px) {
  main .steps-section:has(.steps-item[data-rule="top"])::after { height: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-motion="expressive"] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html[data-site-header-motion-ready] .site-header { transition: none; }
}

/* Round 4: '5M+ EGP' may wrap between the figure and the currency (one line at display size overflowed its cell). */
.hero-extended[data-layout="split"] .hero-stat-num { white-space: normal; }

/* Arabic: 'مليون+' is ~3.8em wide at display size, so the figure took two lines in the half-width cells
   (1024-1920). A word unit (not a bare '+') sits beside the figure at half size, one line, like a price's currency. */
html[dir="rtl"] .hero-extended[data-layout="split"] .hero-stat-suffix[data-stat-unit] { font-size: .5em; letter-spacing: 0; }

/* The count-up reserves its box (the digit count grows from 0). The engine's per-digit 1em is ~40%
   wider than these digits, which pushed Arabic units onto a second line; `ch` is the Latin 0 and
   too narrow for Arabic-Indic digits. The exact reservation is the final numeral itself, laid in
   the same grid cell, invisible, from the engine's data-final (a pseudo-element, so it is never
   page text). The digits hug the unit (grid end). */
.hero-extended .hero-stat-count { display: inline-grid; justify-items: end; font-variant-numeric: tabular-nums; }
.hero-extended .hero-stat-count::before { content: attr(data-final); grid-area: 1 / 1; visibility: hidden; }
.hero-extended .hero-stat-count > var { grid-area: 1 / 1; inline-size: auto !important; }
/* A bare '+'/'x' stays on its number's line; such a stat too long for its half cell ('25000+' at
   1024-1440) scales down to fit (~.62em a character at this weight) instead of wrapping. Word units
   ('5M+ EGP') keep wrapping; the Arabic unit is already half size. */
.hero-extended[data-layout="split"] .hero-stats li { container-type: inline-size; }
.hero-extended[data-layout="split"] .hero-stat-num:not(:has([data-stat-unit])) {
  white-space: nowrap; font-size: min(1em, calc(100cqi / (var(--stat-chars, 3) * .62)));
}

/* 7l: the contact page's form (the stacked `booking` section, not the brief) sends with the same pill as
   the header's "Start a brief": 44px, 14px/700, label centred by flex, lime, magnetic (data-magnet from the
   engine for expressive tenants), no eased transform, no press-scale. */
html[data-site-motion="expressive"] main section.booking[data-block="booking"] .lead-form-submit {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 0; height: 44px; min-height: 44px; margin-block-start: 20px;
  padding: 0 22px; border: 1px solid #0a0a0a; border-radius: 999px;
  background: #c5e81e; color: #0a0a0a; font-family: inherit;
  font-size: 14px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
  transition: none; scale: none;
}
html[data-site-motion="expressive"] main section.booking[data-block="booking"] .lead-form-submit:focus-visible { outline: 3px solid #0a0a0a; outline-offset: 3px; }
/* 7l: the open menu's "Start a brief" pill read white on lime (1.2:1); dark like the header pill */
.site-mobile-menu-panel a.site-mobile-menu-cta, .site-mobile-menu-panel a.site-mobile-menu-cta:hover { color: #0a0a0a; }

/* Arabic articles: the engine caps the reading column at `max-w-prose` (65ch) and this Arabic face's
   zero glyph is ~4px wide, so the column measured 285px on a 1440px screen. Use the width the same
   column gets in English (65ch of the Latin face = 682px). The service card shares the column. */
:lang(ar) :is(.article-content, .article-service-card) { max-width: 42.625rem; }

/* 7l: the article's related-service CTA is a MAJ pill like every other button */
.article-service-card a.article-service-card-cta { border-radius: 999px; padding-inline: 22px; background: #c5e81e; color: #0a0a0a; }
.article-service-card a.article-service-card-cta:hover { text-decoration: none; }

/* 2026-10-03 (owner: "the projects page images are not fit"): MAJ's work is 16:9 deck pages and site
   screenshots, and the engine's grid cards are portrait (aspect 3/4) with object-fit: cover, which cut the sides
   off every image. The grid (Projects page, service pages' own work grids) shows the artwork whole in 16:9 boxes,
   two projects per row from 768px (a 2 x 2 showcase for four), one per row on phones. */
main [data-block="workGrid"] .work-grid-media { aspect-ratio: 16 / 9; }
main [data-block="workGrid"] .work-grid-cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  main [data-block="workGrid"] .work-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* MAJ's long pages (Industries, Saudi Arabia, About) are rich text. The engine's prose column is a 48rem
   reading strip with browser-size headings, which on a 1440px screen left sector sections as a wall of small text.
   Here the block takes the same gutter and type as the other MAJ sections: a page whose text has H2 sections reads as
   an index (the section name at the start, its paragraphs beside it), a page without headings (About) is one wider, larger column. Phones are one column. Links keep the lime accent the engine gives them, with a thin underline. */
main [data-block="richText"] { padding: clamp(64px,7vw,112px) 6vw; }
main [data-block="richText"] .rich-text-prose {
  max-width: 1680px; margin: 0; font-size: clamp(17px,1.35vw,20px); line-height: 1.65;
  color: color-mix(in srgb, var(--ms-ink) 84%, var(--ms-ground));
}
/* rem, not ch: this Arabic face's zero glyph is ~4px wide, so a ch measure came out at a third of the English one */
main [data-block="richText"] .rich-text-prose p { margin: 0 0 1.1em; max-width: 44rem; }
main [data-block="richText"] .rich-text-prose a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
main [data-block="richText"] .rich-text-prose h2 {
  margin-block: clamp(40px,5vw,72px) 18px; margin-inline: 0; padding-block-start: 22px; border-block-start: 1px solid rgb(255 255 255 / .18);
  color: var(--ms-ink); font-size: clamp(26px,2.6vw,44px); font-weight: 800; line-height: 1; letter-spacing: -.03em; text-wrap: balance;
}
main [data-block="richText"] .rich-text-prose h2:first-child { margin-block-start: 0; }
@media (min-width: 900px) {
  main [data-block="richText"] .rich-text-prose:has(> h2) {
    display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); column-gap: clamp(32px,6vw,120px); align-items: start;
  }
  main [data-block="richText"] .rich-text-prose:has(> h2) > h2 { grid-column: 1; margin-block-end: 0; }
  main [data-block="richText"] .rich-text-prose:has(> h2) > :not(h2) { grid-column: 2; }
  /* the first paragraph of a section shares the section name's row and its rule */
  main [data-block="richText"] .rich-text-prose:has(> h2) > h2 + p {
    margin-block-start: clamp(40px,5vw,72px); padding-block-start: 22px; border-block-start: 1px solid rgb(255 255 255 / .18);
  }
  main [data-block="richText"] .rich-text-prose:has(> h2) > h2:first-child + p { margin-block-start: 0; }
}

/* ---- W-3h lane B (D105): the newsletter sign-up in MAJ's own look ----
   The engine builds every placement from the site's tokens: the button takes the site's pill shape (MAJ: theme.buttonShape = pill),
   the band and the pop-up take the accent (lime with ink text, an ink pill). This sets only what is MAJ's alone: the brief form's
   underlined fields, MAJ's section-heading type, and the geometry of MAJ's pills (the band's is the hero's 56px pill, every other
   placement the header's 44px one, with no eased transform, since the magnetic movement writes one every frame). */
.newsletter-block .newsletter-field label { font-size: 13px; font-weight: 600; line-height: normal; }
.newsletter-block .newsletter-field input[type="email"] { padding-inline: 0; border-width: 0 0 1px; border-radius: 0; font-size: 16px; }
.newsletter-block .newsletter-consent { font-size: 14px; line-height: 1.5; }
.newsletter-block .newsletter-submit {
  box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 22px; font-family: inherit;
  font-size: 14px; font-weight: 700; line-height: 1; transition: none; scale: none;
}
.newsletter-band .newsletter-submit { height: 56px; min-height: 56px; padding: 0 30px; font-size: 16px; }
.newsletter-block h2 { font-weight: 800; line-height: .95; letter-spacing: -.035em; text-wrap: pretty; }
.newsletter-band h2, .newsletter-block[data-newsletter-placement="block"] h2, .newsletter-block[data-newsletter-placement="blogIndex"] h2 { font-size: clamp(36px, 4.8vw, 80px); }
.newsletter-block[data-newsletter-placement="article"] h2 { font-size: clamp(26px, 2.6vw, 40px); }
.newsletter-popup-body h2 { font-size: clamp(30px, 3.2vw, 44px); }
.newsletter-block h2:lang(ar) { line-height: 1.25; letter-spacing: 0; }
.newsletter-band .newsletter-block-intro { font-size: clamp(17px, 1.2vw, 20px); line-height: 1.5; }
.newsletter-points li { font-weight: 600; }
/* the article column's width, in rem like the Arabic article column above (this face's zero glyph is ~4px wide, so a `ch` measure collapses) */
:lang(ar) .newsletter-block[data-newsletter-placement="article"] { max-inline-size: 42.625rem; }
@media (max-width: 900px) {
  .newsletter-band { padding-block: 80px; padding-inline: 20px; }
}
/* ---- end W-3h lane B ---- */