/* =========================================================================
   Rubikal — Main stylesheet
   Authored with CSS logical properties so layout mirrors under dir="rtl".
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Skip link — visually hidden until focused (keyboard accessibility) */
.skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4); background: var(--brand-blue); color: #fff; padding: var(--s-2) var(--s-4); border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: var(--t-sm); font-weight: 600; z-index: 9999; text-decoration: none; transition: inset-block-start .15s; }
.skip-link:focus { inset-block-start: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-inline-size: 100%; height: auto; }
/* <picture> wrappers must not become the flex/grid item — the <img> stays
   the box every layout rule in this file already targets. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 590; line-height: var(--lh-snug); color: var(--fg-strong); letter-spacing: -0.02em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p { color: var(--fg); }

.display { font-family: var(--font-display); font-weight: 590; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--fg-strong); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
.balance { text-wrap: balance; }
/* Headline highlight: the cube's rarest hue, solid. (Was a blue→violet→pink
   gradient — the same slop signal the one-pager dropped in Wave 1.) */
.gradient-text { color: var(--brand-yellow); }
[data-theme="light"] .gradient-text { color: var(--accent-2); }

/* HUD eyebrow — the one-pager's instrument-panel voice, site-wide */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: 400;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before { content: ""; inline-size: 26px; block-size: 1px; background: linear-gradient(90deg, currentColor, transparent); }

/* ---- Layout ------------------------------------------------------------- */
.section { padding-block: var(--section-y); background: var(--bg); color: var(--fg); position: relative; }
.container { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-inline-size: var(--maxw-narrow); }
.section-head { max-inline-size: 760px; margin-block-end: var(--s-8); }
.section-head .lead { margin-block-start: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--accent);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 560; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px;
  color: #fff; background: var(--btn-bg);
  transition: box-shadow .3s var(--ease-out), background-color .3s;
}
.btn .arrow, .btn .arr { transition: transform .3s var(--ease-out); display: inline-block; }
.btn:hover .arrow, .btn:hover .arr, .btn:focus-visible .arrow, .btn:focus-visible .arr { transform: translateX(5px); }
[dir="rtl"] .btn .arrow, [dir="rtl"] .btn .arr { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(5px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 34px -12px rgba(30,96,253,.65), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { background: #1A56E8; box-shadow: 0 14px 44px -12px rgba(30,96,253,.85), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-ghost {
  background: rgba(255,255,255,.05); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
[data-theme="light"] .btn-ghost { background: var(--surface); color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="light"] .btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 18px 34px; font-size: 1.06rem; }
.btn-sm { padding: 10px 20px; font-size: .92rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; color: var(--fg-strong); }
.link-arrow .arrow { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .link-arrow .arrow { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ---- Header / Nav ------------------------------------------------------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  block-size: var(--header-h); display: flex; align-items: center;
  transition: background var(--dur) var(--ease-out), border-color var(--dur), backdrop-filter var(--dur);
  border-block-end: 1px solid transparent;
}
.site-header.scrolled {
  background: rgb(7 9 18 / .94);
  border-block-end-color: var(--border);
}
.nav { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.03em; color: #fff; }
.brand .mark { inline-size: 26px; block-size: 26px; border-radius: 7px; background: var(--grad-brand); box-shadow: var(--glow); display: inline-block; position: relative; }
.brand .mark::after { content: ""; position: absolute; inset: 5px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.85); }
.brand .dot { color: var(--brand-blue); }
.brand-logo { block-size: 34px; inline-size: auto; display: block; }
.site-footer .brand-logo { block-size: 34px; }

.nav-links { display: none; align-items: center; gap: 4px; margin-inline-start: var(--s-4); }
.nav-links a { color: var(--muted); font-size: .95rem; font-weight: 500; position: relative; padding: 9px 14px; border-radius: 999px; transition: color .25s; }
.nav-links a::after { content: ""; position: absolute; inset-inline: 14px; inset-block-end: 5px; block-size: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after, .nav-links .has-sub:is(.is-open, :focus-within) > a::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links .has-sub:is(.is-open, :focus-within) > a { color: var(--fg-strong); }

.nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .8rem; font-weight: 400; letter-spacing: .04em; color: var(--muted); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); transition: color .25s, box-shadow .25s; }
.lang-switch:hover { color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--border-strong); background: transparent; }
.lang-switch svg { display: none; }
.nav-end .btn { display: none; }

.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { inline-size: 24px; block-size: 2px; background: #fff; border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-end .btn { display: inline-flex; }
}

/* ---- Nav submenus --------------------------------------------------------
   Three top items, each a real link that works with no JS and no pointer, and
   each with a panel of the pages beneath it. No script: the panel opens on
   :hover for a mouse and on :focus-within for a keyboard, which also means it
   closes by itself the moment focus leaves — Escape works because Escape
   blurs, not because anything listens for it.

   aria-haspopup is deliberately NOT used. It announces a popup that the user
   can open, which implies button semantics and an Escape handler we do not
   have; these are plain links to real pages that happen to reveal siblings.
   The panel's own <ul> keeps its list semantics, which is the honest reading.

   Panels are desktop-only. Below 1000px .nav-links is display:none and the
   mobile drawer renders the same sub-items as always-visible groups. */
.nav-links li { position: relative; display: flex; align-items: center; }
/* No chevron: dropdown affordance is the hover/focus state itself. An
   absolutely-positioned icon kept drifting onto the label across locales
   and widths; removed for good rather than re-geometried. */
/* Hover bridge, no-script path only: there :hover is the whole mechanism and
   the panel is unreachable across the gap without it. main.js defers the close
   on a timer instead, so with script this would be an invisible hit target
   over the page for no gain. */
html:not(.nav-js) .has-sub::after {
  content: ""; position: absolute; inset-inline: -8px; inset-block-start: 100%;
  block-size: 14px;
}
.sub {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: -6px;
  z-index: 60; margin: 0; padding: 8px; list-style: none;
  min-inline-size: 238px; display: grid; gap: 2px;
  background: var(--void-900); border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 28px 64px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(30,96,253,.4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
/* Enhanced: one.js/main.js owns the open state, because CSS :hover cannot
   close a panel when the page scrolls out from under the pointer — which
   is exactly the bug this replaces. The un-enhanced selectors stay behind
   html:not(.nav-js) so the panels still open without script. */
.has-sub.is-open > .sub,
html:not(.nav-js) .has-sub:hover > .sub,
html:not(.nav-js) .has-sub:focus-within > .sub {
  opacity: 1; visibility: visible; animation: sub-in var(--dur-fast) var(--ease-out);
}
@keyframes sub-in { from { opacity: 0; translate: 0 -8px; } }
.sub li { display: block; }
.sub a {
  display: flex; align-items: center; min-block-size: 44px; padding: 0 12px;
  border-radius: 9px; font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); transition: background var(--dur-fast), color var(--dur-fast);
}
.sub a::after { display: none; }              /* the underline is a top-level idiom */
.sub li:first-child a { border-start-start-radius: 6px; border-start-end-radius: 6px; }
.sub li:last-child a { border-end-start-radius: 6px; border-end-end-radius: 6px; }
.sub a:hover { background: rgba(255,255,255,.07); color: var(--fg-strong); }
.sub a[aria-current="page"] { background: rgba(255,255,255,.04); color: var(--accent-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .sub { transition: none !important; animation: none !important; }
}

/* Mobile menu drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 95; background: var(--ink-900);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--gutter); padding-block-start: calc(var(--header-h) + 20px);
  /* the chat launcher sits over the drawer's last items; without a floor the
     bottom of a scrolling list is unreachable under the disc */
  padding-block-end: 96px;
  transform: translateY(-100%); transition: transform var(--dur) var(--ease-in-out);
  visibility: hidden;
}
/* while the drawer is up the launcher should not be there at all (ksa.html
   already suppresses the widget this way page-wide) */
.nav-open #hubspot-messages-iframe-container { display: none !important; }
.nav-open .mobile-menu { transform: translateY(0); visibility: visible; }
.mobile-menu > a:not(.btn) { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); color: var(--fg-strong); font-weight: 560; padding-block: 10px; border-block-end: 1px solid var(--border); }
.mobile-menu a:not(.btn):hover { color: var(--fg-strong); }
/* Sub-items are always visible under their parent — no hover, no toggle, no
   script. The drawer scrolls now that it carries the whole tree; it also
   stops centring, because a centred list that overflows hides its own top. */
.mm-sub { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 18px; margin-block: 6px 16px; }
.mm-sub a { font-size: .95rem; font-weight: 500; color: var(--muted); padding-block: 8px; }
.mm-sub a[aria-current="page"] { color: var(--fg-strong); }
.mobile-menu .btn { margin-block-start: var(--s-4); align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; min-block-size: 100svh; display: flex; align-items: center; padding-block-start: var(--header-h); overflow: hidden; }
/* (.hero-canvas is gone: the Arabic homepage — its only consumer — became the
   one-pager in Wave 3, so the rule and its inline SVG shipped to 76 pages for
   nothing.) */
.hero-glow { position: absolute; inset-block-start: -10%; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 900px; block-size: 900px; max-inline-size: 120%; background: radial-gradient(circle at 50% 40%, rgba(30,96,253,.42), rgba(255,0,84,.12) 42%, transparent 68%); filter: blur(20px); z-index: 0; pointer-events: none; }
.hero-grid-overlay { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%); }
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-inline-size: 940px; }
.hero h1 { margin-block: var(--s-5) var(--s-5); }
.hero .lead { max-inline-size: 620px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }
.hero-badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 16px 8px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: var(--t-sm); color: var(--fg); }
.hero-badge .pulse { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--brand-yellow); box-shadow: 0 0 0 0 rgba(248,206,58,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(248,206,58,.5);} 70% { box-shadow: 0 0 0 12px rgba(248,206,58,0);} 100% { box-shadow: 0 0 0 0 rgba(248,206,58,0);} }

/* ---- Marquee ------------------------------------------------------------ */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: var(--s-8); inline-size: max-content; animation: marquee 38s linear infinite; will-change: transform; backface-visibility: hidden; }
[dir="rtl"] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--muted); white-space: nowrap; opacity: .85; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Cards -------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); }
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--card-shadow); }
/* h2 as well as h3: on contact these cards are the only headings between the
   page h1 and the footer's h3s, so as h3 they skipped a level. They keep the
   card's heading size either way — this selector is about spacing, not rank. */
/* Card-sized whatever the rank: on contact these were the only headings between
   the h1 and the footer h3s, so as h3 they skipped a level. */
.card :is(h2, h3) { margin-block-end: var(--s-3); font-size: var(--t-h3); letter-spacing: -0.01em; }
.card .card-num { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .18em; color: var(--accent-ink); font-weight: 400; }
.card-icon { inline-size: 52px; block-size: 52px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--grad-brand-soft); border: 1px solid var(--border); margin-block-end: var(--s-4); color: var(--accent); }
.card-icon svg { inline-size: 26px; block-size: 26px; }

/* Service feature card (large) */
.service-card { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: var(--s-4); min-block-size: 100%; }
.service-card .tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: auto; padding-block-start: var(--s-5); }
/* Chips used the weakest fill and border tokens (4%/8% white), so the pill
   barely resolved and the label read as loose text. Label contrast was never
   the problem — 6.5–16:1 composited — the chip was. One step up on both. */
.tag { font-size: var(--t-xs); padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg); font-weight: 500; }
.service-card::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -20%; inline-size: 60%; block-size: 80%; background: var(--grad-brand-soft); filter: blur(40px); opacity: 0; transition: opacity var(--dur); }
.service-card:hover::before { opacity: 1; }

/* ---- Process steps ------------------------------------------------------ */
.process { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-block-start: var(--s-6); border-block-start: 1px solid var(--border); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; inset-block-start: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .18em; color: var(--accent-ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.step .tick { position: absolute; inset-block-start: -7px; inset-inline-start: 0; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--grad-brand); box-shadow: var(--glow); }
.step h3 { font-size: var(--t-h3); margin-block: var(--s-3) var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--muted); }

/* ---- Stats -------------------------------------------------------------- */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat .num { font-family: var(--font-display); font-weight: 620; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.stat .label { margin-block-start: var(--s-3); color: var(--muted); font-size: var(--t-sm); }

/* ---- Testimonials ------------------------------------------------------- */
.quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.32; font-weight: 500; letter-spacing: -0.02em; color: var(--fg-strong); }
.quote-meta { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-6); }
.quote-meta .avatar { inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 600; }
.quote-meta .who strong { display: block; color: var(--fg-strong); }
.quote-meta .who span { font-size: var(--t-sm); color: var(--muted); }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { position: relative; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 88px); overflow: hidden; background: var(--ink-850); border: 1px solid var(--border-strong); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--grad-brand); opacity: .14; }
.cta-band::after { content: ""; position: absolute; inset-block-start: -50%; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 700px; block-size: 700px; max-inline-size: 130%; background: radial-gradient(circle, rgba(30,96,253,.18), rgba(255,0,84,.08) 55%, transparent 70%); filter: blur(30px); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-inline-size: 720px; margin-inline: auto; }
.cta-band .lead { color: rgba(255,255,255,.78); margin-block: var(--s-4) var(--s-7); max-inline-size: 560px; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; align-items: center; }
/* Centring suits the full-width CTA band, but in a left-aligned page hero it
   floated the buttons ~350px from their copy. `start` follows direction. */
.page-hero .cta-actions { justify-content: start; }
.cta-actions .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); color: #fff; }
.cta-actions .btn-ghost:hover { background: rgba(255,255,255,.13); }
.cta-actions .cta-tert { color: rgba(255,255,255,.8); font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }
.cta-actions .cta-tert:hover { color: #fff; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: #C9C9DE; padding-block: var(--s-9) var(--s-6); border-block-start: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-grid h3, .footer-grid h4 { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-block-end: var(--s-4); font-weight: 400; }
.footer-grid a { color: #B6B6CE; font-size: var(--t-sm); display: inline-block; padding-block: 5px; transition: color var(--dur-fast); }
.footer-grid a:hover { color: #fff; }
.footer-about p { color: #9292AC; font-size: var(--t-sm); max-inline-size: 320px; margin-block-start: var(--s-4); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-block-start: 1px solid rgba(255,255,255,.08); font-size: var(--t-sm); color: #7A7A95; }
.footer-offices { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.footer-offices .office strong { color: #E6E6F2; display: block; font-family: var(--font-display); }
.footer-offices .office span { font-size: var(--t-sm); color: #9292AC; }
/* The studios block is not only the site footer: it is reused inside light
   body sections (About, Contact), where these two hard-coded dark-footer inks
   land on paper — the address ran at 2.66:1. Hand those instances the theme's
   own colours, which are what every other light section already uses:
   --muted is 6.65:1 on #F3F0E9 and --fg-strong 15.7:1. The dark footer is
   untouched and keeps its 6.72:1. */
[data-theme="light"] .footer-offices .office span { color: var(--muted); }
[data-theme="light"] .footer-offices .office strong { color: var(--fg-strong); }
.socials { display: flex; gap: var(--s-3); }
.socials a { inline-size: 38px; block-size: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: #B6B6CE; }
.socials a:hover { background: rgba(255,255,255,.08); color: #fff; }
.cookie-settings-link { background: none; border: none; padding: 0; color: #7A7A95; font-size: var(--t-sm); font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cookie-settings-link:hover { color: #B6B6CE; }

/* ---- Calendly modal -------------------------------------------------- */
/* Retired site-wide in Wave 2 — every Book control now uses the shared lazy
   popup widget in main.js. The component survives for the KSA campaign pages
   alone: they book a different Calendly event type than main.js's CAL_URL, so
   they keep their own modal and preload it in an idle window after load. */
.cal-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.cal-modal[hidden] { display: none; }
.cal-modal-backdrop { position: absolute; inset: 0; background: rgba(7,7,12,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cal-modal-panel { position: relative; inline-size: min(480px, 100%); block-size: min(760px, 90vh); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 32px 90px rgba(0,0,0,.55); animation: cal-in .25s var(--ease-out, ease); }
.cal-modal-iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.cal-modal-close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; inline-size: 38px; block-size: 38px; border: none; border-radius: 50%; background: rgba(7,7,12,.6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.cal-modal-close:hover { background: rgba(7,7,12,.85); }
@keyframes cal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cal-modal-panel { animation: none; } }

/* ---- Testimonial marquee ---------------------------------------------- */
.tmarquee { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tmarquee-track { display: flex; direction: ltr; gap: 20px; width: max-content; animation: tmarquee 75s linear infinite; }
.tmarquee:hover .tmarquee-track { animation-play-state: paused; }
@keyframes tmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tcard-mini { flex: none; width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
[dir="rtl"] .tcard-mini { direction: rtl; text-align: right; }
.tcard-mini blockquote { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--fg); }
.tcard-mini .quote-meta { display: flex; align-items: center; gap: 10px; }
.tcard-mini .avatar { inline-size: 38px; block-size: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.tcard-mini .who strong { display: block; font-size: .86rem; }
.tcard-mini .who span { color: var(--muted); font-size: .76rem; }

/* ---- Floating consultation button ------------------------------------ */
/* Stays (campaign conversion control) but on system terms: tokens retired
   gradient buttons and this was the last --grad-brand pill. */
.fab-consult { position: fixed; inset-block-end: 28px; left: 28px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--r-pill); background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(30,96,253,.55); font-family: var(--font-display); font-weight: 600; font-size: .85rem; }
.fab-consult:hover { background: #1A56E8; }        /* same darkening as .btn-primary */
.fab-consult svg { inline-size: 19px; block-size: 19px; flex: none; }
/* As a disc it landed on the hero's second CTA. That stack ends at y767 of 844
   (EN 390; AR 740) and ksa hides the chat widget, so the strip below is free. */
@media (max-width: 640px) { .fab-consult span { display: none; } .fab-consult { padding: 12px; inset-block-end: 16px; left: 16px; } }
/* The consent banner owns the bottom of the viewport while it is up, and it is
   wide enough to sit under this button. Step above it for as long as it shows —
   the same lift the one-pager's dock takes (one.css), but as a translate: the
   banner is built after load, and moving inset-block-end there would register
   as a layout shift (measured: +0.042 CLS on /en/ksa.html). */
html.consent-open .fab-consult { translate: 0 calc(-1 * (var(--consent-h, 96px) + 18px)); }

/* ---- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--fg-strong); }
.field input, .field textarea, .field select {
  inline-size: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--fg);
  font: inherit; font-size: var(--t-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field textarea { resize: vertical; min-block-size: 130px; }
/* AJAX submit feedback (main.js). The form still works without JS: the hidden
   redirect field lets Web3Forms bounce to the thank-you page server-side. */
.form-state { font-size: var(--t-sm); display: none; }
.form.is-error .form-state { display: block; color: var(--accent-2); }
.form.is-success .form-state { display: block; color: var(--brand-yellow); }
.form.is-sending .btn-primary { opacity: .6; pointer-events: none; }

/* ---- Page hero (interior pages) ----------------------------------------- */
/* --section-y (up to 144px) under a copy-only hero left ~900px of gradient
   before any content, and stacked with the next section's own padding. */
.page-hero { padding-block: calc(var(--header-h) + var(--s-9)) var(--s-7); position: relative; overflow: hidden; }
/* -10% of hero height means the webfont swap drags a 494×700 blur with it:
   that div was all of contact's 0.054 CLS. Pin it so height cannot move it. */
.page-hero .hero-glow { inline-size: 700px; block-size: 700px; opacity: .7; inset-block-start: -70px; }
/* the glow is a positioned element, so without this the copy paints *under* a
   blurred blue/pink wash — decoration over content, and a contrast loss */
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { max-inline-size: 18ch; }
.page-hero .lead { margin-block-start: var(--s-5); max-inline-size: 60ch; }

/* ---- Split / media rows ------------------------------------------------- */
/* Contact is one flow, not a hero then a split. `.split` centres a 1fr/1fr row,
   and the aside stack is the taller column — so it set the row height and the
   *form* got centred inside it: a 277px void under the lead, first field 181px
   below the booking card. The form leads at every width; cards go aside at
   1200, where there is room for both. */
.contact-flow { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1200px) {
  .contact-flow { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); gap: var(--s-8); }
}
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); } .split.reverse > :first-child { order: 2; } }
.media-frame { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--grad-brand-soft); aspect-ratio: 4/3; position: relative; overflow: hidden; }
.media-frame .blob { position: absolute; inset: 0; background: var(--grad-brand); opacity: .25; filter: blur(30px); }

/* ---- Pricing / tiers ---------------------------------------------------- */
.tier { display: flex; flex-direction: column; gap: var(--s-3); }
.tier.featured { border-color: var(--accent); box-shadow: var(--glow); }
.tier .tier-name { font-family: var(--font-display); font-size: var(--t-h3); color: var(--fg-strong); }
ul.checks { display: grid; gap: var(--s-3); margin-block-start: var(--s-4); }
ul.checks li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
ul.checks li::before { content: ""; flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; margin-block-start: 2px; background: var(--grad-brand-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C8DFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 13px; background-position: center; background-repeat: no-repeat; }

/* ---- Reveal animation utilities -----------------------------------------
   THE REVEAL CONTRACT (same rule as one.css): the hidden states live behind
   html.reveal-armed, which reveal.js adds as its first statement. If that
   script never loads, parses or runs, the class is never added and every
   section is simply visible. Before this gate existed, a JS failure left all
   17-plus [data-reveal] blocks on every legacy page at opacity 0 — the page
   rendered as an empty background. Keep the gate.
   -------------------------------------------------------------------------- */
html.reveal-armed [data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(7px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
html.reveal-armed [data-reveal="left"] { transform: translateX(-34px); }
html.reveal-armed [data-reveal="right"] { transform: translateX(34px); }
html.reveal-armed [data-reveal="scale"] { transform: scale(.94); }
html.reveal-armed [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ---- Kinetic headline (word-by-word reveal) ----------------------------- */
html.reveal-armed .kinetic .word { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(10px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out); transition-delay: var(--wd, 0s); will-change: transform, opacity, filter; }
html.reveal-armed .kinetic.in .word { opacity: 1; transform: none; filter: none; }

/* ---- Scroll progress bar ------------------------------------------------ */
.scroll-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; block-size: 3px; inline-size: 100%; transform: scaleX(var(--p, 0)); transform-origin: inline-start; background: var(--grad-brand); z-index: 200; box-shadow: 0 0 14px rgba(30, 96, 253, .65); }

/* (Card 3D tilt + cursor spotlight removed in the Wave 2 bridge: the
   one-pager's magnetic buttons are the calmer, shared signature.) */

/* ---- Ambient drift for hero glow & blobs -------------------------------- */
@keyframes drift { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-47%) translateY(24px) scale(1.07); } }
.hero-glow { animation: drift 16s var(--ease-in-out) infinite; }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6%, -6%) scale(1.12); } 66% { transform: translate(-5%, 4%) scale(.95); } }
.media-frame .blob { animation: blob 12s var(--ease-in-out) infinite; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-armed [data-reveal], html.reveal-armed .kinetic .word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  .marquee-track, .hero-badge .pulse, .hero-glow, .media-frame .blob { animation: none !important; }
  .btn-primary { background-size: 100% 100%; }
  .scroll-progress { display: none !important; }
  [data-parallax] { transform: none !important; }
}

/* ---- Helpers ------------------------------------------------------------ */
.center { text-align: center; }
.mt-lg { margin-block-start: var(--s-8); }
.divider { block-size: 1px; background: var(--border); border: 0; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden; }

/* =========================================================================
   Hero split + interactive "delivery modes" panel
   (inspired by product-panel heroes; Rubikal's own content & palette)
   ========================================================================= */
.hero-grid-2 { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 980px) { .hero-grid-2 { grid-template-columns: 1.04fr 0.96fr; gap: var(--s-9); } }

.modes-panel {
  position: relative; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-800) 82%, transparent);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-lg);
  padding: var(--s-4);
  overflow: hidden;
}
.modes-panel::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -30%; inline-size: 70%; block-size: 80%; background: var(--grad-brand-soft); filter: blur(50px); pointer-events: none; }
.modes-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-2) var(--s-4); border-block-end: 1px solid var(--border); }
.modes-head .eyebrow { margin: 0; }
.modes-dots { display: flex; gap: 6px; }
.modes-dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--border-strong); }
.modes-list { position: relative; display: grid; gap: 4px; padding-block: var(--s-3); }
.mode-row { display: flex; align-items: center; gap: var(--s-3); padding: 14px var(--s-3); border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur), transform var(--dur) var(--ease-out); }
.mode-row:hover, .mode-row.active { background: var(--surface); border-color: var(--border-strong); transform: translateX(2px); }
[dir="rtl"] .mode-row:hover, [dir="rtl"] .mode-row.active { transform: translateX(-2px); }
.mode-row.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--glow); }
.mode-chip { flex: none; inline-size: 40px; block-size: 40px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: #fff; }
.modes-list .mode-row:nth-child(1) .mode-chip { background: linear-gradient(135deg, #1E60FD, #4D82FF); }
.modes-list .mode-row:nth-child(2) .mode-chip { background: linear-gradient(135deg, #3D63FF, #6A47F0); }
.modes-list .mode-row:nth-child(3) .mode-chip { background: linear-gradient(135deg, #6A47F0, #C13DAE); }
.modes-list .mode-row:nth-child(4) .mode-chip { background: linear-gradient(135deg, #FF0054, #FF5C8A); }
.modes-list .mode-row:nth-child(5) .mode-chip { background: linear-gradient(135deg, #F8CE3A, #FFD95E); color: var(--ink-900); }
.mode-name { font-weight: 600; color: var(--fg-strong); font-size: var(--t-body); }
.mode-tag { margin-inline-start: auto; font-size: var(--t-xs); color: var(--muted); font-weight: 500; transition: color var(--dur); white-space: nowrap; }
.mode-row.active .mode-tag { color: var(--accent-ink); }
.modes-foot { position: relative; text-align: center; padding-block-start: var(--s-4); border-block-start: 1px solid var(--border); font-size: var(--t-xs); color: var(--muted); }

/* =========================================================================
   Corner-bracket framed stats (logical borders → mirror in RTL)
   ========================================================================= */
.stats .stat { position: relative; padding: var(--s-4); }
.stats .stat::before, .stats .stat::after { content: ""; position: absolute; inline-size: 14px; block-size: 14px; border: 2px solid var(--accent); opacity: .55; }
.stats .stat::before { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; }
.stats .stat::after { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; }
.stats .stat .num { margin-block-start: 0; }

/* =========================================================================
   Illustration artwork in media frames (bespoke brand SVGs)
   ========================================================================= */
.media-frame { background-size: cover; background-position: center; background-repeat: no-repeat; }
.work-3 .media-frame .blob, .work-6 .media-frame .blob, .media-frame[class*="media--"] .blob { display: none; }

.work-3 .card:nth-child(1) .media-frame { background-image: url(../img/illus-board.svg); }
.work-3 .card:nth-child(2) .media-frame { background-image: url(../img/illus-mobility.svg); }
.work-3 .card:nth-child(3) .media-frame { background-image: url(../img/illus-learn.svg); }

.work-6 .card:nth-child(1) .media-frame { background-image: url(../img/illus-board.svg); }
.work-6 .card:nth-child(2) .media-frame { background-image: url(../img/illus-mobility.svg); }
.work-6 .card:nth-child(3) .media-frame { background-image: url(../img/illus-learn.svg); }
.work-6 .card:nth-child(4) .media-frame { background-image: url(../img/illus-media.svg); }
.work-6 .card:nth-child(5) .media-frame { background-image: url(../img/illus-logistics.svg); }
.work-6 .card:nth-child(6) .media-frame { background-image: url(../img/illus-commerce.svg); }

.media--code { background-image: url(../img/illus-code.svg); }
.media--team { background-image: url(../img/illus-team.svg); }
.media--ai   { background-image: url(../img/illus-ai.svg); }
.media--ksa  { background-image: url(../img/illus-ksa.svg); }
.media--board     { background-image: url(../img/illus-board.svg); }
.media--mobility  { background-image: url(../img/illus-mobility.svg); }
.media--learn     { background-image: url(../img/illus-learn.svg); }
.media--media     { background-image: url(../img/illus-media.svg); }
.media--logistics { background-image: url(../img/illus-logistics.svg); }
.media--commerce  { background-image: url(../img/illus-commerce.svg); }

/* Case study cards (whole card is a link) */
.case-card { text-decoration: none; display: flex; flex-direction: column; }
.case-card .media-frame { aspect-ratio: 16/10; margin-block-end: var(--s-4); }
.case-card h3 { margin-block: var(--s-1) var(--s-2); }
/* One column on a phone: whichever title scrolls under the fixed launcher gets
   eaten. Reserve its corner — physical side, the widget is right in RTL too. */
@media (max-width: 560px) { .case-card h3 { padding-right: 84px; } }
.case-card .link-arrow { margin-block-start: auto; padding-block-start: var(--s-4); }
.case-card .media-frame { background: var(--surface); }
.case-card .media-frame .case-thumb { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.case-card:hover .media-frame .case-thumb { transform: scale(1.05); }

/* Case study detail */
.case-meta { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-block-start: var(--s-6); }
.case-meta div span { display: block; font-size: var(--t-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin-block-end: 4px; }
.case-meta div strong { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); font-size: var(--t-h3); }
.case-cover { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.case-cover img, .case-shot img { display: block; inline-size: 100%; height: auto; }
.case-shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.case-prose { max-inline-size: 760px; }
.case-prose p { color: var(--muted); font-size: var(--t-lead); line-height: 1.6; margin-block-end: var(--s-4); }
.case-prose h2 { margin-block: var(--s-8) var(--s-4); }
.case-prose h2:first-child { margin-block-start: 0; }
.case-prose figure { margin-block: var(--s-6); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.case-prose figure img { display: block; inline-size: 100%; height: auto; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
.case-stat { text-align: center; }
.case-stat .num { font-family: var(--font-display); font-weight: 620; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.02em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.case-stat .label { color: var(--muted); margin-block-start: var(--s-3); }

/* =========================================================================
   Client logos — monochrome white on dark, full on hover
   ========================================================================= */
.marquee-track { align-items: center; }
.client-logo { block-size: 30px; inline-size: auto; max-inline-size: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .6; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.marquee-track .client-logo { flex: none; }
.client-logo:hover { opacity: 1; }

/* Client logos grid — work page.
   The tracks are minmax(0, 1fr), not 1fr: a bare 1fr floors at the track's
   max-content, which here is the 130px logo cap, so three tracks demanded
   130*3 + gaps = 422px inside a 350px grid box and pushed the whole document
   52px wide at 390px. With a zero minimum the tracks divide what there is and
   object-fit keeps every logo in proportion as they narrow. */
.client-logos-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); align-items: center; justify-items: center; }
@media (max-width: 900px) { .client-logos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .client-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
.client-logo-cell { display: flex; align-items: center; justify-content: center; min-inline-size: 0; max-inline-size: 100%; }
.client-logo-cell img { height: 32px; width: auto; max-inline-size: min(130px, 100%); object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .25s ease, transform .25s ease; }
.client-logo-cell img:hover { opacity: 1; transform: scale(1.06); }

.logo-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); align-items: center; justify-items: center; }
@media (min-width: 620px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .logo-wall { grid-template-columns: repeat(5, 1fr); } }
.logo-wall .client-logo { block-size: 40px; max-inline-size: 150px; }
.logo-wall .client-logo:hover { transform: translateY(-3px); }
/* Dense/illustrative logos: smaller + softer so solid fills don't dominate */
.logo-wall .client-logo.soft { block-size: 28px; opacity: .42; }
.logo-wall .client-logo.soft:hover { opacity: .9; }

/* =========================================================================
   Awards & recognition
   ========================================================================= */
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 760px) { .awards { grid-template-columns: repeat(4, 1fr); } }
.award { background: #fff; border-radius: var(--r-md); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); text-align: center; min-block-size: 168px; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.award:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.award img { block-size: 92px; inline-size: auto; max-inline-size: 100%; object-fit: contain; }
.award span { font-size: var(--t-xs); font-weight: 600; color: #5A5A6E; letter-spacing: .02em; }

/* =========================================================================
   Office gallery (inside the studio)
   ========================================================================= */
.office-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 760px) { .office-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } }
.office-gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--border); }
.office-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.office-gallery figure:hover img { transform: scale(1.07); }
@media (min-width: 760px) { .office-gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }

/* =========================================================================
   Testimonials grid
   ========================================================================= */
.testimonials { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.tcard { display: flex; flex-direction: column; gap: var(--s-4); }
.tcard .qmark { font-family: var(--font-display); font-size: 2.8rem; line-height: .5; color: var(--accent); opacity: .55; }
.tcard .t-quote { margin: 0; color: var(--fg); font-size: var(--t-body); line-height: 1.62; }
.tcard .quote-meta { margin-block-start: auto; }
[dir="rtl"] .tcard .qmark { transform: scaleX(-1); align-self: flex-start; }
img.avatar { object-fit: cover; }
.quote-meta .li-link { margin-inline-start: auto; flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border-strong); transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.quote-meta .li-link svg { inline-size: 16px; block-size: 16px; }
.quote-meta .li-link:hover { color: #fff; background: #0A66C2; border-color: #0A66C2; }
.quote-meta .stars { margin-inline-start: auto; flex: none; color: var(--brand-yellow); font-size: .82rem; letter-spacing: 1px; }
.clutch-badge { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-5); padding: 11px 20px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg); font-size: var(--t-sm); font-weight: 500; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.clutch-badge:hover { border-color: var(--accent); transform: translateY(-2px); }
.clutch-badge .stars { color: var(--brand-yellow); letter-spacing: 1px; }
.clutch-badge strong { color: var(--fg-strong); }
.clutch-badge .arrow { transition: transform var(--dur) var(--ease-out); }
.clutch-badge:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .clutch-badge:hover .arrow { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .clutch-badge .arrow { transform: scaleX(-1); }
a.stars { text-decoration: none; transition: filter var(--dur-fast); }
a.stars:hover { filter: brightness(1.18); }
.tcard .t-source { margin-block-start: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; text-decoration: none; font-size: var(--t-xs); font-weight: 600; color: var(--muted); transition: color var(--dur-fast); }
.tcard .t-source .stars { color: var(--brand-yellow); font-size: .85rem; letter-spacing: 1px; }
.tcard .t-source:hover { color: var(--fg-strong); }
.tcard .t-source + .quote-meta { margin-block-start: var(--s-4); }

/* Testimonials carousel */
.t-carousel { overflow: hidden; }
.t-track { display: flex; transition: transform var(--dur-slow) var(--ease-out); }
.t-page { flex: 0 0 100%; max-inline-size: 100%; }
.t-page .testimonials { margin: 0; }
.t-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-block-start: var(--s-7); }
.t-arrow { inline-size: 46px; block-size: 46px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--fg-strong); transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.t-arrow:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-2px); }
.t-arrow .arrow { font-size: 1.2rem; line-height: 1; }
[dir="rtl"] .t-controls .arrow { transform: scaleX(-1); }
.t-dots { display: flex; gap: var(--s-2); }
.t-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--border-strong); transition: background var(--dur-fast), transform var(--dur-fast); }
.t-dot.is-active { background: var(--accent); transform: scale(1.35); }

/* ===================== Cookie consent banner ===================== */
.consent-banner {
  position: fixed; inset-inline: var(--s-4); inset-block-end: var(--s-4); z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-inline: auto; max-inline-size: 1100px;
  padding: var(--s-4) var(--s-5);
  background: #14141F;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #F5F5FA;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0,0,0,0.4);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.consent-banner.is-in { transform: translateY(0); opacity: 1; }
.consent-text { margin: 0; flex: 1 1 320px; font-size: var(--t-sm, .95rem); line-height: 1.5; color: rgba(245,245,250,0.85); }
.consent-actions { display: flex; gap: var(--s-3); flex: 0 0 auto; }
.consent-btn { padding-block: .55rem; padding-inline: 1.1rem; }
@media (max-width: 560px) {
  .consent-banner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .consent-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: opacity .2s ease; transform: none; }
}

/* =========================================================================
   SHOWCASE SYSTEM (Wave B)
   The dossier language — file spines, hand-authored SVG scenes, delivery
   ledgers — ported onto the subpage tree. Authored with logical properties
   throughout, so /ar/ mirrors from dir="rtl" without a single override.
   Consumed by work.html and the case-v2 detail pages in both languages.
   ========================================================================= */

/* ---- proof strip (work hero) -------------------------------------------- */
.proof-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6); margin-block-start: var(--s-7); }
@media (min-width: 760px) { .proof-strip { grid-template-columns: repeat(4, 1fr); } }
.proof-strip div { border-block-start: 1px solid var(--border-strong); padding-block-start: var(--s-4); }
.proof-strip b { display: block; font-family: var(--font-display); font-weight: 620; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.proof-strip b i { font-style: normal; color: var(--accent-ink); font-size: .62em; }
.proof-strip span { display: block; margin-block-start: var(--s-2); color: var(--muted); font-size: var(--t-xs); line-height: 1.45; }

/* ---- dossier spine: a file number on a ruler ---------------------------- */
.spine { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-block-end: var(--s-4); }
.spine b { color: var(--accent-ink); font-weight: 400; }
.spine::after { content: ""; flex: 1; block-size: 7px; background-image: repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px 9px); background-position: 0 100%; background-repeat: repeat-x; background-size: 100% 7px; border-block-end: 1px solid var(--border); }

/* ---- the scene ----------------------------------------------------------
   Hand-authored, 340x212, drawn in the void ramp — so it keeps its own dark
   field even inside a light section rather than inverting into mush.
   A scene is a diagram, not prose: its HUD labels are Latin technical strings
   and its geometry is authored in absolute coordinates, so it must not mirror.
   direction:ltr keeps text-anchor="start" on the left under dir="rtl". */
.scene { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-md); background: #06080F; border: 1px solid rgba(255,255,255,.09); direction: ltr; }

/* ---- featured dossier card ---------------------------------------------- */
.dossier-list { display: grid; gap: var(--s-5); }
.dossier { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 2.8vw, 36px); }
.dossier-head { display: grid; gap: var(--s-3); margin-block-end: var(--s-5); }
.dossier-head h3 { font-family: var(--font-display); font-weight: 620; font-size: var(--t-h3); color: var(--fg-strong); }
.dossier-hook { color: var(--fg); font-weight: 500; }
.dossier-grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .dossier-head { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); align-items: baseline; }
  .dossier-grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
}
.dossier-ctx { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
.block-k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-block: var(--s-5) var(--s-3); }
.dossier-aside .block-k:first-child { margin-block-start: var(--s-5); }
.deliver { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.deliver li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--fg); line-height: 1.55; }
.deliver li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; margin-block-start: 9px; border: 1px solid var(--accent-ink); transform: rotate(45deg); }
.fact { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--border); }
.fact dt { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-block-end: 6px; }
.fact dd { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.fact dd b { color: var(--fg); font-weight: 600; }
.fact + .fact { margin-block-start: var(--s-4); }

/* ---- compact dossier rows (native disclosure, no JS) --------------------- */
.dossier-rows { display: grid; gap: var(--s-4); }
.row { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur); }
.row[open], .row:hover { border-color: var(--border-strong); }
.row > summary { list-style: none; cursor: pointer; display: grid; gap: var(--s-3); padding: clamp(18px, 2.4vw, 26px); align-items: center; }
.row > summary::-webkit-details-marker { display: none; }
.row > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (min-width: 820px) { .row > summary { grid-template-columns: 168px minmax(0, 1fr) auto; gap: var(--s-6); } }
.row-mark { display: flex; align-items: center; min-block-size: 30px; }
.row-mark img { block-size: 26px; inline-size: auto; max-inline-size: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .62; }
.row-mark img.lum { filter: grayscale(1) brightness(3.4) contrast(.76); opacity: .78; }
.row-mark .type { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--fg-strong); }
.row-hook { color: var(--fg); font-size: var(--t-sm); line-height: 1.5; }
.row-pm { position: relative; inline-size: 32px; block-size: 32px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); justify-self: start; }
.row-pm::before, .row-pm::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 11px; block-size: 1.5px; background: var(--accent-ink); translate: -50% -50%; transition: rotate .4s var(--ease-out); }
.row-pm::after { rotate: 90deg; }
.row[open] .row-pm::after { rotate: 0deg; }
.row-body { padding: 0 clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px); display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .row-body { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); align-items: start; } }
.row-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
@supports (interpolate-size: allow-keywords) {
  .row::details-content { block-size: 0; overflow: clip; interpolate-size: allow-keywords; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .row[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .row::details-content { transition: none; }
  .row-pm::before, .row-pm::after { transition: none; }
}

/* ---- client wall exceptions (solved in the standalone portfolio) ---------
   A flat white silhouette is what makes thirty marks read as one set. Two
   exceptions keep their luminance instead, because their meaning lives in a
   knocked-out word inside a badge; square lockups need the taller cap. */
.client-logo-cell img.lum { filter: grayscale(1) brightness(3.4) contrast(.76); opacity: .72; }
.client-logo-cell img.tall { height: 46px; }
.client-logo-cell .type { font-family: var(--font-display); font-weight: 560; font-size: .98rem; color: var(--muted); text-align: center; line-height: 1.2; }
.client-logo-cell .type small { display: block; font-family: var(--font-mono); font-size: .55rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-block-start: 6px; }

/* ---- case-v2 detail page ------------------------------------------------ */
.case-hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .case-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s-8); } }
.case-hero-grid .scene { max-inline-size: 520px; }
.case-cols { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .case-cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); } }
.attr-note { margin-block-start: var(--s-5); font-size: var(--t-xs); color: var(--muted); max-inline-size: 72ch; line-height: 1.6; }
.case-nav { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .case-nav { grid-template-columns: 1fr 1fr; } }
.case-nav a { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.case-nav a:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.case-nav .k { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.case-nav .v { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--fg-strong); }
.sub-case { border-block-start: 1px solid var(--border); padding-block-start: var(--s-6); margin-block-start: var(--s-6); }
.sub-case-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-block-end: var(--s-3); }
.sub-case-head img { block-size: 26px; inline-size: auto; max-inline-size: 140px; object-fit: contain; filter: brightness(0) invert(1); opacity: .62; }
[data-theme="light"] .sub-case-head img { filter: brightness(0); opacity: .62; }

/* Five-column footer — used where the Services column lists its five pages.
   Additive: the four-column default above is untouched, so every other page
   in either tree keeps its existing footer exactly. */
@media (min-width: 760px) { .footer-grid.cols-5 { grid-template-columns: 1.5fr repeat(4, 1fr); } }