/* ============================================================
   Hawih — iter-3 (dark, restrained, luxurious)
   The shfrah air without its layout. Dark canvas, small type,
   generous whitespace, cobalt accents only where they earn it.
   No editorial display, no rotating elements, no heritage band.
   ============================================================ */

:root {
    --hawih-blue:        #6300FF;
    --hawih-blue-hover:  #4B00BF;
    --hawih-blue-soft:   rgba(99, 0, 255, 0.12);
    --hawih-blue-glow:   rgba(99, 0, 255, 0.45);

    --hawih-ink:         #050505;   /* near-black with cool cast */
    --hawih-ink-2:       #0B0B0F;   /* alternating section */
    --hawih-ink-line:    rgba(255, 255, 255, 0.08);
    --hawih-paper:       #FFFFFF;   /* warm off-white for light mode */
    --hawih-paper-2:     #F2F2F5;
    --hawih-paper-line:  rgba(11, 11, 16, 0.10);
}

/* --t-opp-bright is reused for two unrelated purposes in the template:
   "text on an accent-filled badge" (wants light text against our purple,
   in both themes) and "text on an opposite-surface card" (wants dark text
   on a light opposite-surface). Those needs conflict, so fix only the
   accent-badge case directly rather than overriding the shared variable. */
.footer-nav__counter,
.btn-accent,
.tag-accent,
.mxd-tech-stack-cards__logo {
    color: #FFFFFF;
}

/* The CTA "promo" band (.mxd-promo) keeps a fixed light background
   regardless of theme, but its outline button's text/border use
   var(--t-bright), which flips white in dark mode — white-on-light.
   Pin it to always read dark, matching the band's fixed light bg. */
.mxd-promo .btn-outline {
    color: var(--hawih-ink) !important;
    border-color: var(--hawih-ink-line) !important;
}

/* Accent helpers */
.text-brand          { color: var(--hawih-blue); }
.bg-brand            { background-color: var(--hawih-blue); }
.bg-brand:hover     { background-color: var(--hawih-blue-hover); }
.border-brand       { border-color: var(--hawih-blue); }
.hover\:text-brand:hover { color: var(--hawih-blue); }
.hover\:bg-brand:hover   { background-color: var(--hawih-blue); }
.hover\:border-brand:hover { border-color: var(--hawih-blue); }
.ring-brand          { box-shadow: 0 0 0 2px var(--hawih-blue); }

/* ---------- Fonts ----------
   Prootech's brand font, Readex Pro, in both languages — it ships an
   Arabic weight set, so AR and EN share one family instead of visibly
   different typefaces. Inter / IBM Plex Sans Arabic stay as fallbacks. */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

html, body {
    background-color: var(--hawih-paper);
    color: var(--hawih-ink);
    font-feature-settings: "ss01", "cv01";
}
html.dark, html.dark body {
    background-color: var(--hawih-ink);
    color: var(--hawih-paper);
}

html[lang="ar"] body { font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif; }
html[lang="en"] body { font-family: 'Readex Pro', 'Inter', sans-serif; }

/* Screen-reader-only utility: visually hidden, still announced. Used to
   give icon-only links (hamburger, round arrow buttons) a discernible
   accessible name without changing the visual design. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Redefine the template's font CSS variables so every component using
   `var(--_font-default)` / `var(--_font-accent)` (template's Funnel Sans /
   Funnel Display) picks up Readex Pro instead. This catches the title
   fonts, button captions, stat counters, list numbers (٠١ ٠٢ ٠٣ …) that
   would otherwise fall back to the template default or the OS font. */
html {
    --_font-default: 'Readex Pro', 'Inter', sans-serif;
    --_font-accent:  'Readex Pro', 'Inter', sans-serif;
}
html[lang="ar"],
[dir="rtl"] {
    --_font-default: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    --_font-accent:  'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
}

/* The template's awards / projects list components hide the leading
   icon at rest via `translateX(-5.4rem)` and slide it in on hover.
   On touch devices there is no hover, so the slide never plays —
   on RTL pages this also pushes the title text the wrong direction,
   clipping its leading characters. Force the at-rest position to
   zero in RTL so the title shows in full immediately. The hover
   animation still works on desktop (LTR keeps the original behaviour). */
[dir="rtl"] .mxd-awards-list__title p,
[dir="rtl"] .mxd-awards-list__icon,
[dir="rtl"] .mxd-projects-list__title p,
[dir="rtl"] .mxd-projects-list__icon,
[dir="rtl"] .mxd-projects-archive__title {
    transform: translateX(0) !important;
}

/* Arabic ligatures: kill letter-spacing on every text element */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p,  html[lang="ar"] span,  html[lang="ar"] li,
html[lang="ar"] a,  html[lang="ar"] button, html[lang="ar"] blockquote,
html[lang="ar"] figcaption, html[lang="ar"] label,
html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--hawih-paper); }
.dark ::-webkit-scrollbar-track { background: var(--hawih-ink); }
::-webkit-scrollbar-thumb { background: #C9CED6; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #2D2D38; }
::-webkit-scrollbar-thumb:hover { background: #8C8C8C; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4D4D5A; }

iconify-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Body scroll lock (mobile nav) ---------- */
body.no-scroll { overflow: hidden; }

/* ---------- Site nav ----------
   Heavier weight + readable color. This was the user's #1
   complaint two rounds ago. */
.site-nav {
    transition: padding 0.3s ease, background-color 0.3s ease,
                backdrop-filter 0.3s ease, border-color 0.3s ease, color 0.3s ease;

    /* Always-on translucent backdrop so the nav reads on any bg behind it
       (including the coloured hero band on project pages). */
    background-color: rgba(244, 241, 235, 0.72);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid rgba(11, 11, 16, 0.05);

    /* Use page text colour so links inherit ink/paper based on theme,
       not whatever colour is bleeding from the section underneath. */
    color: var(--hawih-ink);
}
.dark .site-nav {
    background-color: rgba(11, 11, 16, 0.65);
    border-bottom-color: rgba(244, 241, 235, 0.06);
    color: var(--hawih-paper);
}
.site-nav a, .site-nav button {
    font-weight: 500;
    color: inherit;
}
/* The primary CTA inside the nav keeps its white text on cobalt — the
   broader `.site-nav a { color: inherit }` would otherwise pull it
   into ink/paper. */
.site-nav a.btn-primary,
.site-nav button.btn-primary { color: #fff; }

.site-nav.nav-scrolled {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    background-color: rgba(244, 241, 235, 0.92);
    border-bottom-color: var(--hawih-paper-line);
}
.dark .site-nav.nav-scrolled {
    background-color: rgba(11, 11, 16, 0.88);
    border-bottom-color: var(--hawih-ink-line);
}

.nav-link {
    position: relative;
    padding-bottom: 2px;
}
.nav-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.35s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover { color: var(--hawih-blue); }
.nav-link:hover::after { width: 100%; background: var(--hawih-blue); }

/* ---------- Eyebrow ----------
   A small uppercase tag, no caret. Used once or twice per section. */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(11, 11, 16, 0.55);
    font-feature-settings: "tnum";
}
.dark .eyebrow { color: rgba(244, 241, 235, 0.55); }
html[lang="ar"] .eyebrow { letter-spacing: 0 !important; }

/* ---------- Buttons ---------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: var(--hawih-blue);
    color: #fff;
    padding: 0.8rem 1.55rem;
    border-radius: 999px;
    font-weight: 500;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover { background-color: var(--hawih-blue-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    padding: 0.8rem 1.55rem;
    border-radius: 999px;
    border: 1px solid var(--hawih-paper-line);
    font-weight: 500;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.dark .btn-ghost { border-color: var(--hawih-ink-line); }
.btn-ghost:hover { border-color: var(--hawih-blue); color: var(--hawih-blue); }

/* ---------- Hero — bordered caustic card (iter-7) ----------
   Outer section is transparent so the page background shows around
   the card. The card is the dark surface holding the WebGL canvas
   and the content overlay. */
.hero-section { position: relative; }
.hero-mono {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ---------- Brand thread ----------
   A thin cobalt vertical line with fading ends. Reusable across
   sections as a signature ornament. Use --thread-offset to shift
   horizontally (defaults to a sensible inset). */
.brand-thread {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(99, 0, 255, 0.0) 8%,
        rgba(99, 0, 255, 0.85) 35%,
        rgba(99, 0, 255, 0.85) 65%,
        rgba(99, 0, 255, 0.0) 92%,
        transparent 100%);
    opacity: 0.7;
}
.brand-thread--right { inset-inline-end: 7%; }
.brand-thread--left  { inset-inline-start: 7%; }
.brand-thread--center { inset-inline-start: 50%; transform: translateX(-50%); }
.dark .brand-thread { opacity: 0.85; }

/* Horizontal variants. */
.brand-thread--horiz {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    top: auto;
    bottom: auto;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99, 0, 255, 0.0) 8%,
        rgba(99, 0, 255, 0.70) 50%,
        rgba(99, 0, 255, 0.0) 92%,
        transparent 100%);
    opacity: 0.85;
}
/* Stronger center variant — for use over dark sections where it
   needs to read as a deliberate separator. */
.brand-thread--horiz-strong {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(244, 241, 235, 0.0) 5%,
        rgba(244, 241, 235, 0.50) 50%,
        rgba(244, 241, 235, 0.0) 95%,
        transparent 100%);
}

/* ---------- Net grid ----------
   A faint fading grid backdrop. Applied as a backdrop on any
   section by adding .net-grid. Cell size 64px, very low contrast,
   fades out toward edges via a radial mask. */
.net-grid {
    position: relative;
    isolation: isolate;
}
.net-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(0deg,  transparent calc(100% - 1px), rgba(11, 11, 16, 0.07) 100%),
        linear-gradient(90deg, transparent calc(100% - 1px), rgba(11, 11, 16, 0.07) 100%);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 80% at center, #000 25%, transparent 75%);
}
.dark .net-grid::before {
    background-image:
        linear-gradient(0deg,  transparent calc(100% - 1px), rgba(244, 241, 235, 0.06) 100%),
        linear-gradient(90deg, transparent calc(100% - 1px), rgba(244, 241, 235, 0.06) 100%);
}
.net-grid > *:not(.brand-thread) { position: relative; z-index: 1; }

/* Tighter variant for hero / inside dark cards */
.net-grid--fine::before {
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at center, #000 15%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 75% at center, #000 15%, transparent 75%);
}
.net-grid--dark::before {
    background-image:
        linear-gradient(0deg,  transparent calc(100% - 1px), rgba(244, 241, 235, 0.08) 100%),
        linear-gradient(90deg, transparent calc(100% - 1px), rgba(244, 241, 235, 0.08) 100%);
}

.hero-card {
    position: relative;
    width: 100%;
    min-height: 620px;
    height: 78vh;
    max-height: 880px;
    border-radius: 2rem;
    overflow: hidden;
    /* Dark base bleeds through the 0.9-opacity canvas like shfrah's hero. */
    background-color: #0B0014;
    color: var(--hawih-paper);
    isolation: isolate;
    box-shadow: 0 30px 60px -20px rgba(8, 8, 25, 0.4);
}
.hero-card__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Matches shfrah: canvas slightly transparent so the dark base
       deepens the overall image and the colour stays restrained. */
    opacity: 0.9;
}

/* Scrim — exactly shfrah's gradient (from-black/80 via-black/30
   to-black/10). The warm-cool contrast in the shader provides
   visible motion through this scrim. */
.hero-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.30) 50%,
        rgba(0, 0, 0, 0.10) 100%);
}

.hero-card__content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}
@media (min-width: 768px)  { .hero-card__content { padding: 3rem 3rem; } }
@media (min-width: 1024px) { .hero-card__content { padding: 3.5rem 4rem; } }

.hero-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
/* Bottom block holds the headline, lead/CTAs and meta strip.
   Anchored to the bottom by justify-between on the parent flex,
   so the middle of the card stays empty for the canvas motion. */
.hero-card__bottom {
    display: flex;
    flex-direction: column;
}
.hero-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(244, 241, 235, 0.14);
    font-size: 0.75rem;
    color: rgba(244, 241, 235, 0.6);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Force the eyebrows inside the dark card to a readable cream regardless of theme */
.hero-card .eyebrow { color: rgba(244, 241, 235, 0.7) !important; }
/* And the ghost button stays cream-edged */
.hero-card .btn-ghost { color: var(--hawih-paper); border-color: rgba(244, 241, 235, 0.28); }
.hero-card .btn-ghost:hover { color: var(--hawih-blue); border-color: var(--hawih-blue); }

/* The colored blob — supplies a multi-color light source beneath the
   glass. Cobalt + deep blue dominate (brand), with a magenta warm
   highlight and an amber tail so the refraction reads multi-hue
   like the reference image. */
.fractal-blob {
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px) saturate(1.15);
    background:
        radial-gradient(ellipse 38% 60% at 18% 50%, rgba(60, 170, 220, 0.85) 0%, transparent 60%),
        radial-gradient(ellipse 28% 70% at 35% 35%, rgba(180, 35, 110, 0.95) 0%, transparent 65%),
        radial-gradient(ellipse 32% 60% at 56% 60%, rgba(228, 60, 70, 0.85) 0%, transparent 60%),
        radial-gradient(ellipse 38% 70% at 72% 55%, rgba(245, 140, 60, 0.85) 0%, transparent 60%),
        radial-gradient(ellipse 32% 55% at 88% 50%, rgba(110, 175, 215, 0.7) 0%, transparent 60%),
        linear-gradient(180deg, #0B0014 0%, #000000 100%);
    animation: blob-drift 22s ease-in-out infinite;
    will-change: transform;
}
@keyframes blob-drift {
    0%, 100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
    50%      { transform: translate3d(3%, -1%, 0) scale(1.07); }
}

/* The slats — strictly vertical, narrow step, very little blur so
   they stay defined like venetian blinds in front of the colored
   light source. Two layers stacked for depth. */
.fractal-stripes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    --step: 24px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0,
        rgba(0, 0, 0, 0.05) calc(var(--step) * 0.45),
        rgba(255, 255, 255, 0.18) calc(var(--step) * 0.55),
        rgba(0, 0, 0, 0.55) var(--step)
    );
    mix-blend-mode: multiply;
    opacity: 0.95;
}
.fractal-stripes::before {
    content: "";
    position: absolute;
    inset: 0;
    --step: 24px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        rgba(255, 255, 255, 0.06) calc(var(--step) * 0.5),
        transparent var(--step)
    );
    mix-blend-mode: screen;
    pointer-events: none;
}
.fractal-stripes::after {
    /* Subtle film grain to keep the look photographic, not digital */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.04), transparent 35%),
        radial-gradient(circle at 78% 30%, rgba(0, 0, 0, 0.25), transparent 40%);
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Make sure hero content sits above the glass layers */
.hero-content { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
    .fractal-blob, .fractal-stripes { animation: none; }
}

/* Force dark hero text colors regardless of theme — the glass background
   is always dark, so text and accents must read against it. */
.hero-section .eyebrow { color: rgba(244, 241, 235, 0.7); }
.hero-section .btn-ghost { color: var(--hawih-paper); border-color: rgba(244, 241, 235, 0.25); }
.hero-section .btn-ghost:hover { color: var(--hawih-blue); border-color: var(--hawih-blue); }

/* ---------- Brand band ----------
   A full-cobalt stripe used for stats / final CTA. Punctuation moments
   that lean fully into the brand color regardless of theme. */
.brand-band {
    background-color: var(--hawih-blue);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.brand-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 60% at 15% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 90% 20%, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
    pointer-events: none;
}
.brand-band > * { position: relative; z-index: 1; }
.brand-band .eyebrow { color: rgba(255, 255, 255, 0.7); }
.brand-band .stat-block { border-top-color: rgba(255, 255, 255, 0.25); }
.brand-band .text-brand,
.brand-band .stat-block .text-brand { color: #fff; }
.brand-band .btn-primary {
    background-color: #fff;
    color: var(--hawih-blue);
}
.brand-band .btn-primary:hover { background-color: rgba(255, 255, 255, 0.9); }
.brand-band .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.30);
}
.brand-band .btn-ghost:hover {
    color: #fff;
    border-color: #fff;
}

/* ---------- Ink band ----------
   A full-ink stripe used for the manifesto / final CTA in light mode. */
.ink-band {
    background-color: var(--hawih-ink);
    color: var(--hawih-paper);
}
.ink-band .eyebrow { color: rgba(244, 241, 235, 0.6); }
.ink-band .btn-ghost { color: var(--hawih-paper); border-color: rgba(244, 241, 235, 0.25); }
.ink-band .btn-ghost:hover { color: var(--hawih-blue); border-color: var(--hawih-blue); }

/* ---------- Marquee ----------
   Thin strip, slow drift. */
.marquee {
    direction: ltr;
    display: flex;
    overflow: hidden;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 2.5rem;
    padding-inline-end: 2.5rem;
    animation: marquee-scroll 55s linear infinite;
    will-change: transform;
}
.marquee--reverse .marquee__track {
    animation-direction: reverse;
    animation-duration: 70s;
}
.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    white-space: nowrap;
}
.marquee__item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hawih-blue);
    flex-shrink: 0;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Service cards (iter-5 redesign) ----------
   Replaces the vertical tab+panel pattern. A 4-column grid of
   numbered service tiles; hover reveals a longer description and a
   cobalt left-edge highlight. Each card pulses subtly on idle. */
.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--hawih-paper-line);
    border: 1px solid var(--hawih-paper-line);
}
.dark .service-grid {
    background: var(--hawih-ink-line);
    border-color: var(--hawih-ink-line);
}
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

.service-tile {
    position: relative;
    padding: 2rem 1.75rem 2.25rem;
    background: var(--hawih-paper);
    transition: background-color 0.35s ease;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dark .service-tile { background: var(--hawih-ink); }
.service-tile::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--hawih-blue);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.service-tile:hover { background: rgba(99, 0, 255, 0.04); }
.dark .service-tile:hover { background: rgba(99, 0, 255, 0.09); }
.service-tile:hover::before { transform: scaleY(1); }
.service-tile__num {
    font-size: 0.75rem;
    font-feature-settings: "tnum";
    letter-spacing: 0.15em;
    color: var(--hawih-blue);
    opacity: 0.75;
    margin-bottom: 1.25rem;
    font-weight: 500;
}
.service-tile__title {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    transition: color 0.35s ease;
}
.service-tile:hover .service-tile__title { color: var(--hawih-blue); }
.service-tile__desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(11, 11, 16, 0.65);
    margin-top: auto;
}
.dark .service-tile__desc { color: rgba(244, 241, 235, 0.65); }
.service-tile__arrow {
    position: absolute;
    inset-block-start: 2rem;
    inset-inline-end: 1.75rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1);
    color: var(--hawih-blue);
}
html[dir="rtl"] .service-tile__arrow { transform: translateX(8px); }
.service-tile:hover .service-tile__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Services tabs (legacy, kept for inner pages) ---------- */
.services-tab {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    transition: color 0.3s ease, padding-inline-start 0.3s ease;
    padding-block: 1rem;
    padding-inline: 1.25rem;
    text-align: start;
    width: 100%;
    color: inherit;
    opacity: 0.55;
    font-size: 1.05rem;
    font-weight: 500;
}
.services-tab:hover { opacity: 1; }
.services-tab .services-tab__num {
    font-size: 0.72rem;
    font-feature-settings: "tnum";
    opacity: 0.6;
    min-width: 1.5rem;
}
.services-tab[aria-selected="true"] {
    opacity: 1;
    color: var(--hawih-blue);
    padding-inline-start: 1.75rem;
}
.services-tab[aria-selected="true"] .services-tab__num { opacity: 0.9; color: var(--hawih-blue); }
.services-tab[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--hawih-blue);
    border-radius: 3px;
}
.services-panel { transition: opacity 0.35s ease, transform 0.35s ease; }
.services-panel[hidden] { display: none; }

/* Services container: dark even in light mode for that brand presence */
.services-shell {
    background: var(--hawih-ink);
    color: var(--hawih-paper);
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .services-shell { padding: 3.5rem; }
}
.services-shell::before {
    content: "";
    position: absolute;
    inset: -50% -20% auto auto;
    width: 70%;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(99, 0, 255, 0.22) 0%, transparent 60%);
    pointer-events: none;
}
.services-shell .services-tab { color: var(--hawih-paper); }
.services-shell .services-tab[aria-selected="true"] { color: var(--hawih-blue); }
.services-shell .border-s { border-color: rgba(244, 241, 235, 0.1); }

/* ---------- Case study card ---------- */
.case-card {
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.case-card:hover { transform: translateY(-4px); }
.case-card__art {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    background: var(--hawih-ink-2);
}
.dark .case-card__art { background: #170022; }
.case-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.case-card:hover .case-card__cover { transform: scale(1.04); }

/* ---------- Client marquee (iter-7) ----------
   Replaces the static grid. Each logo sits on its own neutral
   chip — pre-padded, uniform background so white-bg PNGs and
   transparent-bg PNGs both look intentional. */
.client-marquee {
    direction: ltr;
    display: flex;
    overflow: hidden;
    user-select: none;
    padding-block: 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.client-marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 4.5rem;
    padding-inline-end: 4.5rem;
    align-items: center;
    animation: client-marquee-scroll 45s linear infinite;
    will-change: transform;
}
.client-marquee:hover .client-marquee__track { animation-play-state: paused; }
.client-marquee__item {
    flex-shrink: 0;
    height: 7rem;
    width: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Neutral surface that matches the paper bg but is light enough
       that white-bg logos blend into it instead of looking patched on. */
    background: #F7F7F9;
    border: 1px solid var(--hawih-paper-line);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
                border-color 0.35s ease, background-color 0.35s ease;
}
.client-marquee__item:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 0, 255, 0.35);
    background: #fff;
}
.client-marquee__item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
.client-marquee__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}
.dark .client-marquee__item {
    background: rgba(244, 241, 235, 0.04);
    border-color: var(--hawih-ink-line);
}
.dark .client-marquee__item:hover {
    background: rgba(244, 241, 235, 0.08);
    border-color: rgba(99, 0, 255, 0.45);
}
/* Dark mode: invert + lighten to drop the originally-white bg */
.dark .client-marquee__item img {
    mix-blend-mode: lighten;
    filter: grayscale(1) invert(1) brightness(0.95);
    opacity: 0.85;
}
.dark .client-marquee__item:hover img {
    filter: grayscale(0) invert(1) brightness(0.95);
    opacity: 1;
}
@keyframes client-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Founder CTA (iter-5 redesign) ----------
   Asymmetric split: heading + CTAs on one side, founder portrait
   with signature treatment on the other. */
.founder-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #6300FF 0%, #22005C 100%);
}
.founder-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    opacity: 0.92;
    filter: contrast(1.05);
}
.founder-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(99, 0, 255, 0.45) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.founder-meta {
    position: absolute;
    inset-inline-start: 1.25rem;
    inset-block-end: 1.25rem;
    color: #fff;
    z-index: 2;
}
.founder-meta__name { font-size: 1.1rem; font-weight: 500; }
.founder-meta__role { font-size: 0.8rem; opacity: 0.7; margin-top: 0.25rem; }

/* ---------- Client wall (legacy) ---------- */
.client-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--hawih-paper-line);
    border-inline-start: 1px solid var(--hawih-paper-line);
}
.dark .client-grid {
    border-top-color: var(--hawih-ink-line);
    border-inline-start-color: var(--hawih-ink-line);
}
@media (min-width: 640px)  { .client-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .client-grid { grid-template-columns: repeat(6, 1fr); } }

.client-cell {
    aspect-ratio: 5 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--hawih-paper-line);
    border-inline-end: 1px solid var(--hawih-paper-line);
    padding: 2rem 1.5rem;
    transition: background-color 0.35s ease;
    position: relative;
}
.dark .client-cell {
    border-bottom-color: var(--hawih-ink-line);
    border-inline-end-color: var(--hawih-ink-line);
}
.client-cell:hover { background-color: rgba(99, 0, 255, 0.05); }
.dark .client-cell:hover { background-color: rgba(99, 0, 255, 0.10); }
.client-cell img {
    max-width: 70%;
    max-height: 60%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
.client-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
}
.dark .client-cell img {
    filter: grayscale(1) brightness(1.6) invert(0.92);
    opacity: 0.6;
}
.dark .client-cell:hover img {
    filter: grayscale(0) brightness(1.05) invert(0);
    opacity: 1;
}

/* ---------- Why-Hawih quadrant ---------- */
.reason-block {
    position: relative;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hawih-paper-line);
}
.dark .reason-block { border-top-color: var(--hawih-ink-line); }
.reason-block__index {
    font-size: 0.75rem;
    font-feature-settings: "tnum";
    color: var(--hawih-blue);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* ---------- Stats ---------- */
.stat-block {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hawih-paper-line);
}
.dark .stat-block { border-top-color: var(--hawih-ink-line); }
.stat-block .counter {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* ---------- Testimonials ---------- */
.t-card {
    padding: 2rem;
    border: 1px solid var(--hawih-paper-line);
    border-radius: 6px;
    background: rgba(11, 11, 16, 0.02);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dark .t-card {
    border-color: var(--hawih-ink-line);
    background: rgba(255, 255, 255, 0.02);
}
.t-card:hover { border-color: var(--hawih-blue); }

/* ---------- Portfolio project page (editorial layout) ----------
   Typographic hero on cream — no boxed card — followed by a
   full-bleed feature image, editorial brief, brand-color band,
   gallery, and the next-project link.
   Each page sets --project-color via inline style. */

/* Typographic hero — cream paper, no card */
.project-page-hero {
    position: relative;
    padding-top: 9rem;
    padding-bottom: 4rem;
    padding-inline: 1.5rem;
}
@media (min-width: 768px)  { .project-page-hero { padding-top: 10rem; padding-bottom: 5rem; padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .project-page-hero { padding-inline: 4rem; } }
.project-page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-feature-settings: "tnum";
    opacity: 0.65;
}
html[lang="ar"] .project-page-hero__breadcrumb { letter-spacing: 0 !important; }
.project-page-hero__title {
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: 0.96;
    font-weight: 500;
    letter-spacing: -0.02em;
    max-width: 14ch;
}
html[lang="ar"] .project-page-hero__title { letter-spacing: 0 !important; }
.project-page-hero__tagline {
    color: var(--project-color, var(--hawih-blue));
}
.project-page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.project-page-hero__sector {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--project-color, var(--hawih-blue));
    font-feature-settings: "tnum";
    font-weight: 500;
}
html[lang="ar"] .project-page-hero__sector { letter-spacing: 0 !important; }
.project-page-hero__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 30rem;
    color: rgba(11, 11, 16, 0.7);
}
.dark .project-page-hero__lead { color: rgba(244, 241, 235, 0.7); }

/* Full-bleed feature image — the brand showcase, dramatic */
.project-feature {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--project-color, var(--hawih-ink));
}
@media (max-width: 640px) { .project-feature { aspect-ratio: 4 / 3; } }
.project-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Brief section — editorial two-column */
.project-brief {
    padding-block: 6rem;
    padding-inline: 1.5rem;
}
@media (min-width: 768px)  { .project-brief { padding-block: 8rem; padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .project-brief { padding-inline: 4rem; } }
.project-brief__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .project-brief__grid {
        grid-template-columns: 3fr 2fr;
        gap: 5rem;
    }
}
.project-brief__heading {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.project-brief__body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(11, 11, 16, 0.72);
    max-width: 36rem;
}
.dark .project-brief__body { color: rgba(244, 241, 235, 0.72); }
.project-brief__deliverables { list-style: none; padding: 0; margin: 0; }
.project-brief__deliverables li {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding-block: 0.85rem;
    border-top: 1px solid var(--hawih-paper-line);
    font-size: 0.95rem;
}
.project-brief__deliverables li:first-child { border-top: none; }
.dark .project-brief__deliverables li { border-top-color: var(--hawih-ink-line); }
.project-brief__deliverables li::before {
    content: counter(d, decimal-leading-zero);
    counter-increment: d;
    font-size: 0.72rem;
    color: var(--project-color, var(--hawih-blue));
    font-feature-settings: "tnum";
    font-weight: 600;
    min-width: 1.5rem;
}
.project-brief__deliverables { counter-reset: d; }

/* Brand-color band — full bleed, animated orbs, project tagline as huge type.
   This is the brand-colour moment of the page, between brief and gallery. */
.project-band {
    position: relative;
    overflow: hidden;
    background: var(--project-color, var(--hawih-ink));
    color: #fff;
    padding: 6rem 1.5rem;
    text-align: center;
}
@media (min-width: 768px) { .project-band { padding: 8rem 2.5rem; } }
.project-band::before,
.project-band::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 110%;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: screen;
}
.project-band::before {
    top: -30%;
    inset-inline-start: -15%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 60%);
    animation: hero-orb-a 18s ease-in-out infinite;
}
.project-band::after {
    bottom: -40%;
    inset-inline-end: -20%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
    animation: hero-orb-b 22s ease-in-out infinite;
}
@keyframes hero-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8%, 6%) scale(1.12); }
}
@keyframes hero-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1.05); }
    50%      { transform: translate(-10%, -4%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .project-band::before, .project-band::after { animation: none; }
}
.project-band__content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}
.project-band__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 1.5rem;
    font-feature-settings: "tnum";
}
html[lang="ar"] .project-band__eyebrow { letter-spacing: 0 !important; }
.project-band__quote {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.01em;
}
html[lang="ar"] .project-band__quote { letter-spacing: 0 !important; }

/* Gallery — edge-to-edge, no gaps, continuous with the feature image.
   Each image lives in its own band; on desktop they pair up 2-up so the
   eye reads them as one composition, not isolated cards. */
.project-gallery {
    padding: 0;
    margin: 0;
}
.project-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: 0;
}
@media (min-width: 768px) {
    .project-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    /* If there's only one image after the feature, span both columns
       so it reads as a second feature, not a half-width card. */
    .project-gallery__grid img:only-child { grid-column: 1 / -1; }
}
.project-gallery__grid img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
    background: var(--project-color, var(--hawih-ink2));
}

/* Project hero shell (legacy, kept for backward compat) */
.project-hero {
    position: relative;
    width: 100%;
}
.project-hero-card {
    position: relative;
    width: 100%;
    min-height: 60vh;
    border-radius: 2rem;
    overflow: hidden;
    background: var(--project-color, var(--hawih-ink));
    color: var(--project-fg, #fff);
    isolation: isolate;
    box-shadow: 0 30px 60px -20px rgba(8, 8, 25, 0.4);
    padding: 3rem 1.75rem;
}
@media (min-width: 768px)  { .project-hero-card { padding: 4rem 3rem; } }
@media (min-width: 1024px) { .project-hero-card { padding: 5rem 4rem; min-height: 64vh; } }
/* "Live" backdrop — two large blurred orbs drifting on opposite paths,
   tinted from the project's brand colour. Adds movement without
   stealing attention from the headline. */
.project-hero-card::before,
.project-hero-card::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 110%;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    mix-blend-mode: screen;
}
.project-hero-card::before {
    top: -30%;
    inset-inline-start: -15%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 60%);
    animation: hero-orb-a 18s ease-in-out infinite;
}
.project-hero-card::after {
    bottom: -40%;
    inset-inline-end: -20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
    animation: hero-orb-b 22s ease-in-out infinite;
    mix-blend-mode: overlay;
}
@keyframes hero-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8%, 6%) scale(1.12); }
}
@keyframes hero-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1.05); }
    50%      { transform: translate(-10%, -4%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .project-hero-card::before, .project-hero-card::after { animation: none; }
}

/* Film grain overlay — needs a child element since pseudo-elements
   are already used by the orbs. Added as .project-hero-grain. */
.project-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.10;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.project-hero-card > *:not(.project-hero-grain) { position: relative; z-index: 1; }

.project-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 2rem;
    padding-block: 2.5rem;
    border-top: 1px solid var(--hawih-paper-line);
    border-bottom: 1px solid var(--hawih-paper-line);
}
@media (min-width: 640px) { .project-meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .project-meta { grid-template-columns: repeat(4, 1fr); } }
.dark .project-meta { border-color: var(--hawih-ink-line); }
.project-meta__label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hawih-ink-soft, rgba(11,11,16,0.55));
    margin-bottom: 0.5rem;
    font-feature-settings: "tnum";
}
.dark .project-meta__label { color: rgba(244,241,235,0.55); }
html[lang="ar"] .project-meta__label { letter-spacing: 0 !important; }
.project-meta__value {
    font-size: 1.05rem;
    font-weight: 500;
}

.project-showcase {
    width: 100%;
    display: block;
    background: var(--hawih-paper2);
}
.dark .project-showcase { background: var(--hawih-ink-2); }

.project-bigmark {
    font-size: clamp(4rem, 14vw, 14rem);
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--project-color, var(--hawih-blue));
}
html[lang="ar"] .project-bigmark { letter-spacing: 0 !important; }

/* ---------- Portfolio grid filters + richer cards ---------- */
.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.work-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--hawih-paper-line);
    font-size: 0.85rem;
    font-weight: 500;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.dark .work-filter { border-color: var(--hawih-ink-line); }
.work-filter:hover {
    border-color: var(--hawih-blue);
    color: var(--hawih-blue);
}
.work-filter[aria-pressed="true"] {
    background: var(--hawih-blue);
    color: #fff;
    border-color: var(--hawih-blue);
}
.work-filter__count {
    margin-inline-start: 0.4rem;
    font-size: 0.72rem;
    opacity: 0.65;
    font-feature-settings: "tnum";
}

/* Denser portfolio grid */
.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1rem;
}
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .work-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px){ .work-grid { grid-template-columns: repeat(5, 1fr); } }

/* Richer tile — overlay reveals project name + meta on hover */
.work-tile {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--tile-color, var(--hawih-ink));
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.work-tile:hover { transform: translateY(-4px); }
.work-tile__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
    filter: saturate(1.02);
}
.work-tile:hover .work-tile__cover { transform: scale(1.04); }
.work-tile__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
    opacity: 0.95;
    transition: opacity 0.35s ease;
}
.work-tile:hover .work-tile__overlay { opacity: 1; }
.work-tile__info {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem 1.1rem 1.1rem;
    color: #fff;
    z-index: 2;
}
.work-tile__title {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}
.work-tile__meta {
    font-size: 0.72rem;
    opacity: 0.78;
    font-feature-settings: "tnum";
    letter-spacing: 0.04em;
}
html[lang="ar"] .work-tile__meta { letter-spacing: 0 !important; }

/* Category chip on the top corner */
.work-tile__chip {
    position: absolute;
    inset-inline-start: 0.75rem;
    inset-block-start: 0.75rem;
    z-index: 2;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--hawih-ink);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
}
html[lang="ar"] .work-tile__chip { letter-spacing: 0 !important; }
.work-tile:hover .work-tile__chip {
    opacity: 1;
    transform: translateY(0);
}

/* Filter-state — applied via JS */
.work-tile[hidden] { display: none !important; }

.project-next {
    background: var(--hawih-ink);
    color: var(--hawih-paper);
    padding-block: 4rem;
    text-align: center;
    transition: background-color 0.4s ease;
}
.project-next:hover { background-color: #12001F; }
.project-next a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.project-next__label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 241, 235, 0.5);
    margin-bottom: 0.75rem;
}
.project-next__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1;
}

/* ---------- 404 glitch (kept for the 404 page) ---------- */
.glitch-digit {
    display: inline-block;
    animation: glitch-shift 2.4s infinite ease-in-out;
}
.glitch-digit:nth-child(2) { animation-delay: 0.2s; }
.glitch-digit:nth-child(3) { animation-delay: 0.4s; }
@keyframes glitch-shift {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-2px, 1px); }
    40%      { transform: translate(2px, -1px); }
    60%      { transform: translate(-1px, -2px); }
    80%      { transform: translate(1px, 2px); }
}

/* ---------- Floating WhatsApp button (injected sitewide by hawih.js) ---------- */
.hawih-whatsapp {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;     /* bottom-right LTR, bottom-left RTL */
    z-index: 50;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;          /* WhatsApp brand green */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.40),
                0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hawih-whatsapp::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #25D366;
    opacity: 0.30;
    z-index: -1;
    animation: hawih-whatsapp-pulse 2.4s ease-out infinite;
}
.hawih-whatsapp:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.50),
                0 6px 16px rgba(0, 0, 0, 0.20);
    color: #fff;
}
.hawih-whatsapp:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
@keyframes hawih-whatsapp-pulse {
    0%, 100% { transform: scale(1);     opacity: 0.30; }
    50%      { transform: scale(1.25);  opacity: 0;    }
}
@media (max-width: 480px) {
    .hawih-whatsapp { width: 50px; height: 50px; bottom: 1rem; inset-inline-end: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hawih-whatsapp::before { animation: none; }
}

/* ---------- Form error highlight (used by form-recovery in hawih.js) ---------- */
.field--error,
.field__input.field--error,
.field__textarea.field--error,
.field__select.field--error {
    border-color: #DC2626 !important;
    background: rgba(220, 38, 38, 0.05);
}
.field--error:focus,
.field__input.field--error:focus,
.field__textarea.field--error:focus,
.field__select.field--error:focus {
    border-color: #DC2626 !important;
    background: rgba(220, 38, 38, 0.08);
    outline: none;
}
.form-success {
    border: 1px solid rgba(99, 0, 255, 0.25);
    background: rgba(99, 0, 255, 0.06);
    color: var(--hawih-ink);
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}
.dark .form-success { color: var(--hawih-paper); background: rgba(99, 0, 255, 0.14); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .marquee__track { animation: none; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Header controls — outline + fill consistency
   ============================================================
   Three buttons sit in the header: theme toggle (.mxd-color-switcher,
   round), lang switch ([data-lang-toggle], pill), and the
   "Start your project" CTA (.btn-mobile-icon.btn-outline, pill).

   The template ships them with three different visual treatments —
   theme toggle has no border, the CTA has a backdrop-filter blur,
   the lang switch is bare. Apply the same outline + subtle filled
   look to all three so they read as a matched set:

     - 1px stroke in --st-bright (auto flips to light on dark mode)
     - --base-tint fill (white in light, near-black in dark)
     - backdrop-filter blur for the soft frosted feel
   */
.mxd-header__controls #color-switcher.mxd-color-switcher,
.mxd-header__controls button[data-lang-toggle],
.mxd-header__controls a.btn.btn-outline {
    border: 1px solid var(--st-bright) !important;
    background-color: rgba(250, 247, 246, 0.45) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}
/* In dark mode the page is near-black, so the same translucent
   cream wash would look out of place — flip the rgba to a dark
   wash so the buttons stay readable on the cobalt header bg. */
:root[color-scheme="dark"] .mxd-header__controls #color-switcher.mxd-color-switcher,
:root[color-scheme="dark"] .mxd-header__controls button[data-lang-toggle],
:root[color-scheme="dark"] .mxd-header__controls a.btn.btn-outline {
    background-color: rgba(28, 28, 28, 0.45) !important;
}
/* Hover state — small lift via a denser wash. Same recipe for each
   of the three so feedback is uniform. */
.mxd-header__controls #color-switcher.mxd-color-switcher:hover,
.mxd-header__controls button[data-lang-toggle]:hover,
.mxd-header__controls a.btn.btn-outline:hover {
    background-color: rgba(250, 247, 246, 0.75) !important;
}
:root[color-scheme="dark"] .mxd-header__controls #color-switcher.mxd-color-switcher:hover,
:root[color-scheme="dark"] .mxd-header__controls button[data-lang-toggle]:hover,
:root[color-scheme="dark"] .mxd-header__controls a.btn.btn-outline:hover {
    background-color: rgba(28, 28, 28, 0.75) !important;
}

/* ============================================================
   Desktop inline main nav (visible >=992px)
   ============================================================
   Mirrors the hamburger menu items inline between the Hawih logo
   and the header controls. Sub-menus open as small cards on hover
   / focus-within. The hamburger panel stays available for mobile
   only — desktop hides the trigger and uses this nav instead. */
.uc-desktop-nav { display: none; }

@media (min-width: 992px) {
    /* Show the inline nav, hide the hamburger trigger. */
    .uc-desktop-nav { display: block; flex: 1; padding-inline: 2.4rem; }
    .mxd-nav__hamburger { display: none !important; }

    .uc-desktop-nav__list {
        list-style: none; margin: 0; padding: 0;
        display: flex; gap: 2.4rem;
        justify-content: center; align-items: center;
        flex-wrap: nowrap;
    }
    .uc-desktop-nav__item { position: relative; }
    .uc-desktop-nav__link {
        display: inline-flex; align-items: center; gap: 0.6rem;
        background: transparent; border: 0;
        font: inherit; color: var(--t-bright);
        padding: 0.6rem 0.2rem;
        font-size: 1.8rem; font-weight: 500;
        text-decoration: none; cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s ease;
    }
    .uc-desktop-nav__link:hover,
    .uc-desktop-nav__link:focus-visible { opacity: 0.7; }

    /* Star/sparkle icon before each top-level item */
    .uc-desktop-nav__icon {
        width: 1.4rem; height: 1.4rem;
        color: var(--accent);
        fill: currentColor;
        flex-shrink: 0;
    }

    /* Submenu card — frosted glass over the page bg. */
    .uc-desktop-nav__submenu {
        position: absolute; top: 100%;
        inset-inline-start: 0;
        list-style: none;
        margin: 0.4rem 0 0; padding: 1.1rem 1.6rem;
        background: rgba(250, 247, 246, 0.95);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        backdrop-filter: blur(18px) saturate(1.6);
        border: 1px solid rgba(20, 20, 20, 0.10);
        border-radius: 1.6rem;
        min-width: 24rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        opacity: 0; visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease,
                    visibility 0.18s ease;
        z-index: 120;
    }
    :root[color-scheme="dark"] .uc-desktop-nav__submenu {
        background: rgba(18, 18, 20, 0.95);
        border-color: rgba(255, 255, 255, 0.10);
    }
    .uc-desktop-nav__item--has-submenu:hover .uc-desktop-nav__submenu,
    .uc-desktop-nav__item--has-submenu:focus-within .uc-desktop-nav__submenu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    .uc-desktop-nav__submenu li { margin: 0; padding: 0; }
    .uc-desktop-nav__submenu a {
        display: inline-flex; align-items: center; gap: 0.6rem;
        padding: 0.55rem 0;
        color: var(--t-bright); font-size: 1.7rem;
        font-weight: 400; text-decoration: none;
        white-space: nowrap;
        transition: color 0.15s ease;
    }
    /* "+" sign before each submenu item, in the accent colour */
    .uc-desktop-nav__submenu a::before {
        content: "+";
        color: var(--accent);
        font-weight: 600; font-size: 1.6rem; line-height: 1;
        flex-shrink: 0;
    }
    .uc-desktop-nav__submenu a:hover,
    .uc-desktop-nav__submenu a:focus-visible { color: var(--accent); }

    /* In RTL the submenu should still hug the start edge of its item */
    [dir="rtl"] .uc-desktop-nav__submenu { inset-inline-start: 0; }
}

/* ============================================================
   Header — floating "pill" container (always-on frosted)
   ============================================================
   Override the inline page-level style which made the header
   full-width and only painted a backdrop on scroll. Higher
   specificity (`body header.mxd-header`) beats the inline rule's
   `.mxd-header { … !important }` so this loads via the shared
   stylesheet for all 32 pages at once. */
body header.mxd-header {
    /* Float the bar inside the viewport instead of running edge-to-edge. */
    inset: 1.5rem 1.5rem auto 1.5rem !important;
    width: auto !important;
    max-width: 144rem !important;
    margin-inline: auto !important;
    /* Pill / rounded corners */
    border-radius: 999px !important;
    /* Always-on frosted backdrop, no longer dependent on .uc-scrolled */
    background: rgba(244, 241, 235, 0.62) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    border: 1px solid rgba(20, 20, 20, 0.08) !important;
    border-bottom-color: rgba(20, 20, 20, 0.08) !important;
    /* Soft neutral layered shadow — three progressive black stops
       at low alpha for a clean modern lift; inset hairline gives
       the rim definition. No brand tint so the pill reads as
       calm glass over the page. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.08) !important;
    /* Tighter padding now that we're a contained pill */
    padding-block: 0.8rem !important;
    padding-inline: 2.2rem !important;
}
:root[color-scheme="dark"] body header.mxd-header {
    background: rgba(18, 18, 20, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    /* Dark-mode shadow swap: pure black drops at higher alpha so
       the lift stays readable against the dark cobalt page bg. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 2px rgba(0, 0, 0, 0.20),
        0 4px 12px rgba(0, 0, 0, 0.28),
        0 16px 40px rgba(0, 0, 0, 0.36) !important;
}
/* Scrolled state — the template's per-page inline CSS rewrites
   .mxd-header.uc-scrolled's box-shadow to a flat grey when the
   user scrolls past 10px. Override with the same cobalt-glow
   recipe so the modern look persists through scroll. The selector
   `body header.mxd-header.uc-scrolled` has higher specificity
   than the inline rule's `.mxd-header.uc-scrolled`, so this wins. */
body header.mxd-header.uc-scrolled {
    background: rgba(244, 241, 235, 0.78) !important;
    /* Scrolled state — a touch denser than at-rest so the user
       feels the pill "lift" as they scroll, but still soft. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.07),
        0 16px 40px rgba(0, 0, 0, 0.10) !important;
}
:root[color-scheme="dark"] body header.mxd-header.uc-scrolled {
    background: rgba(18, 18, 20, 0.72) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.32),
        0 16px 40px rgba(0, 0, 0, 0.40) !important;
}
/* (Older uc-scrolled rules folded into the cobalt-shadow block
   above so background + shadow get applied together.) */
/* Match the header-controls font size to the inline desktop nav
   so logo / nav / lang / CTA all read at the same weight. The
   template defaults header buttons to 2.2rem which sat noticeably
   bigger than the 1.5rem nav items; matching the nav at 1.8rem
   on a slimmer control pill. */
@media (min-width: 992px) {
    body header.mxd-header .mxd-header__controls .btn.btn-default,
    body header.mxd-header .mxd-header__controls button[data-lang-toggle],
    body header.mxd-header .mxd-header__controls a.btn {
        font-size: 1.8rem !important;
        height: 4.6rem !important;
        line-height: 4.6rem !important;
        padding-inline: 1.8rem !important;
        border-radius: 2.4rem !important;
    }
    body header.mxd-header .mxd-header__controls .btn i {
        font-size: 2rem !important;
    }
    /* Theme-toggle disc stays circular — match height to the pills. */
    body header.mxd-header .mxd-header__controls #color-switcher.mxd-color-switcher {
        width: 4.6rem !important;
        height: 4.6rem !important;
    }
    body header.mxd-header .mxd-header__controls #color-switcher.mxd-color-switcher i {
        font-size: 2rem !important;
    }
}
/* Logo aspect ratio is sacred — never let flex shrinkage squish the
   hawih wordmark, at any viewport size. */
body header.mxd-header .mxd-header__logo,
body header.mxd-header .mxd-header__logo .mxd-logo,
body header.mxd-header .mxd-header__logo img {
    flex-shrink: 0 !important;
}
body header.mxd-header .mxd-header__logo {
    padding-inline-end: 2.4rem !important;
}

/* ============================================================
   Full-bleed hero with Axion shader background
   ============================================================
   The hero section spans edge-to-edge (no .mxd-container or
   rounded inner card). Light-mode fallback gradient sits behind
   the shader's canvas; dark mode swaps to a deep-cobalt gradient.
   Both are direct backgrounds on the section, so a CDN/WebGPU
   failure still leaves a graceful coloured backdrop instead of
   flat page bg. */
.uc-hero-fullbleed {
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    /* Fill the viewport — the hero should be the full first screen,
       not driven by content height. Negative margin-top pulls the
       section up under the floating header pill so the shader bg
       reaches the very top edge of the viewport; the same 8rem is
       added back to min-height so the section still ends exactly
       at the viewport bottom (without that, the negative offset
       would leave an 8rem strip of page bg uncovered at the foot
       of the hero). */
    min-height: calc(100vh + 8rem) !important;
    margin-top: -8rem !important;
    padding-top: 8rem !important;
    display: flex !important;
    align-items: stretch !important;
    /* Light fallback gradient (overridden in dark mode below). */
    background: linear-gradient(135deg,
        #F1E8FF 0%,
        #D9C2FF 35%,
        #B98CFF 70%,
        #8A3FFF 100%) !important;
}
/* Section owns the height now — let the inner overlay grow to fill
   it via flex:1, no internal min-height needed. */
.uc-hero-fullbleed .uc-hero-intro {
    flex: 1 1 100%;
    min-height: 0 !important;
}
:root[color-scheme="dark"] .uc-hero-fullbleed {
    background: linear-gradient(135deg,
        #0B0014 0%,
        #22005C 35%,
        #4B0F99 70%,
        #7B2CFF 100%) !important;
}
/* Dark mode: the hero's overlay text should read white-ish even
   though the page-level rule already pins it to var(--t-bright)
   (which becomes light in dark mode via the design tokens — so
   no override needed here, this comment is just a marker). */

/* Mobile: tighten the overlay and bottom-align the content.
   Two pieces had to align for this to work:
     - The left column's inline `flex: 1 1 480px` was reserving
       480px of HEIGHT on mobile (column flex-direction makes
       flex-basis = height), forcing a tall gap below the
       content. The inline style is now `flex: none` so the
       column shrinks to its natural content height.
     - The overlay's mobile rules below pin justify-content to
       flex-end so the (now-shrunk) left column + service-list
       stack together near the bottom of the 100vh hero, with
       the section's bottom padding giving breathing room. */
@media (max-width: 900px) {
    .uc-hero-fullbleed .uc-hero-intro {
        flex-direction: column !important;
        padding: 32px 24px 96px !important;
        gap: 28px !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        min-height: 0 !important;
    }
}

/* ============================================================
   Hero eyebrow pill ("متاحون لمشاريع جديدة")
   ============================================================
   Replaces the inline dot+label pair with a proper frosted
   chip. Light mode: translucent white over the shader/cobalt
   bg; dark mode: translucent dark with light text. */
.uc-hero-intro__eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    background: #6300FF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Layered glow: hairline highlight (inner) + soft ambient drop
       + diffuse green halo matching the availability dot. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.45) inset,
        0 2px 8px rgba(15, 18, 36, 0.06),
        0 12px 32px rgba(15, 18, 36, 0.08),
        0 0 28px rgba(91, 191, 74, 0.18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Prevent flex parent from stretching this to full width. */
    align-self: flex-start;
}
.uc-hero-intro__eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5BBF4A;
    box-shadow: 0 0 12px rgba(91, 191, 74, 0.55);
    display: inline-block;
    flex-shrink: 0;
}
.uc-hero-intro .uc-hero-intro__eyebrow {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
}
:root[color-scheme="dark"] .uc-hero-intro__eyebrow-pill {
    background: #6300FF;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 2px 8px rgba(0, 0, 0, 0.30),
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(91, 191, 74, 0.30);
}

/* ============================================================
   Mobile header — fluid sizing instead of progressive hide
   ============================================================
   All five items (logo · theme · lang · CTA · hamburger) stay
   visible at every width. Everything scales between a min and max
   via `clamp()` so the row tightens proportionally as the viewport
   narrows. Tested visually across iPhone (375px), Samsung Ultra
   (~412px), down to ~320px before things get truly cramped.

   Scale curves (max → min):
     pill control height : 3.6rem → 2.6rem
     control font-size   : 1.3rem → 0.95rem
     control padding     : 1.2rem → 0.5rem
     button icon         : 1.5rem → 1.1rem
     gap                 : 0.3rem → 0.1rem
     pill end-padding    : 6rem   → 3.6rem (hamburger zone)
     logo image height   : 40px   → 26px   */
@media (max-width: 991px) {
    body header.mxd-header {
        inset: 1rem 1rem auto 1rem !important;
        padding-block: clamp(0.4rem, 1.5vw, 0.6rem) !important;
        padding-inline-start: clamp(0.8rem, 3.5vw, 1.4rem) !important;
        padding-inline-end: clamp(3.6rem, 14vw, 6rem) !important;
        border-radius: 999px !important;
    }
    body header.mxd-header .mxd-header__controls {
        gap: clamp(0.1rem, 0.5vw, 0.3rem) !important;
    }
    /* Logo height scales too (aspect ratio preserved via width: auto
       inline + the flex-shrink: 0 lock above) so the wordmark
       proportionally shrinks instead of overflowing. */
    body header.mxd-header .mxd-header__logo img {
        height: clamp(26px, 8vw, 40px) !important;
    }

    /* Hamburger wrapper parked at the pill's writing-end corner.
       Inset-end scales so the hamburger stays roughly the same
       distance from the pill edge proportionally. */
    body .mxd-nav__contain {
        inset-block-start: calc(1rem + clamp(0.4rem, 1.5vw, 0.6rem)) !important;
        inset-block-end: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: clamp(0.8rem, 3.5vw, 2rem) !important;
        width: auto !important;
        padding: 0 !important;
    }
    body .mxd-nav__hamburger {
        width: clamp(2.6rem, 8.5vw, 3.6rem) !important;
        height: clamp(2.6rem, 8.5vw, 3.6rem) !important;
    }

    /* All four header controls are always visible on mobile. */
    body .mxd-header__controls [data-lang-toggle],
    body .mxd-header__controls a.btn-mobile-icon {
        display: inline-flex !important;
    }
    /* Defeat the template's `.btn-mobile-icon` icon-only treatment
       so the CTA reads as a full pill with text + arrow. The
       "Contact us / تواصل معنا" caption must remain visible at
       every viewport width — that's the protected element here. */
    body header.mxd-header .mxd-header__controls a.btn-mobile-icon {
        width: auto !important;
        height: clamp(2.6rem, 8.5vw, 3.6rem) !important;
        padding: 0 clamp(0.5rem, 2.5vw, 1.2rem) !important;
        border-radius: clamp(1.3rem, 4.25vw, 1.8rem) !important;
        gap: clamp(0.2rem, 1vw, 0.4rem) !important;
    }
    body header.mxd-header .mxd-header__controls a.btn-mobile-icon .btn-caption {
        display: inline-block !important;
        white-space: nowrap;
    }
    /* Fluid sizing on all pill controls. */
    body header.mxd-header .mxd-header__controls .btn.btn-default,
    body header.mxd-header .mxd-header__controls button[data-lang-toggle],
    body header.mxd-header .mxd-header__controls a.btn {
        font-size: clamp(0.95rem, 3vw, 1.3rem) !important;
        height: clamp(2.6rem, 8.5vw, 3.6rem) !important;
        line-height: clamp(2.6rem, 8.5vw, 3.6rem) !important;
        padding-inline: clamp(0.5rem, 2.5vw, 1.2rem) !important;
        border-radius: clamp(1.3rem, 4.25vw, 1.8rem) !important;
    }
    body header.mxd-header .mxd-header__controls .btn i {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    }
    /* Lang button is a single-character ("ع" / "EN") so it can be
       tighter than the other pills. */
    body header.mxd-header .mxd-header__controls button[data-lang-toggle] {
        padding-inline: clamp(0.3rem, 1.8vw, 0.8rem) !important;
        min-width: clamp(2.6rem, 8.5vw, 3.6rem);
    }
    /* Theme toggle (round disc) scales square. */
    body header.mxd-header .mxd-header__controls #color-switcher.mxd-color-switcher {
        width: clamp(2.6rem, 8.5vw, 3.6rem) !important;
        height: clamp(2.6rem, 8.5vw, 3.6rem) !important;
    }
    body header.mxd-header .mxd-header__controls #color-switcher.mxd-color-switcher i {
        font-size: clamp(1.1rem, 3.5vw, 1.6rem) !important;
    }
}

/* ============================================================
   .mxd-block__name h2 sizing
   ============================================================
   The S052 Text Block uses `.mxd-block__name > h2` for its
   section title, but the template's CSS only bumps font-size on
   `.mxd-section-title__hrtitle h2` and `.mxd-section-title__title h2`.
   Without an explicit override, .mxd-block__name h2 inherits a
   tiny font-size from Tailwind's preflight. Match the same scale
   as the other section titles so it reads as a proper heading. */
html body .mxd-block__name h2,
html body .mxd-block__name h2 .lang-string,
html body .mxd-block__name h2 span {
    font-size: clamp(2.8rem, 5.5vw, 5.5rem) !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
}

/* ============================================================
   Lead-capture forms (.contact-form)
   ============================================================
   The contact form's inline style block ships these rules to
   turn the .form/.contact-form markup into proper bordered
   pill-style inputs. Hoisted into the shared stylesheet so any
   page using <form class="form contact-form"> picks them up —
   /contact, /affiliate, /careers, and anything we add later. */
.contact-form .uc-field-label {
    display: block;
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: var(--t-medium);
}
.contact-form .mxd-grid-item {
    padding: 0 1.2rem;
    margin-bottom: 2.4rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 1.8rem 2rem;
    font-size: 1.7rem;
    font-family: inherit;
    color: var(--t-bright);
    background: var(--base-tint);
    border: 1px solid var(--st-medium);
    border-radius: 1.2rem;
    outline: none;
}
.contact-form textarea {
    min-height: 16rem;
    resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #6300FF;
}
.uc-form-submit {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.uc-form-note {
    font-size: 1.4rem;
    opacity: 0.6;
}

/* ============================================================
   S038 / S041 — force white text on dark + accent cards
   ============================================================
   The template's `.opposite` and `.t-opposite` classes set color
   to var(--t-opp-bright) (#FFFFFF), but the inner <span class=
   "lang-string"> sometimes inherits the page's default ink colour
   because of Tailwind preflight's `color: inherit` reset that
   loads after main.min.css. Force-white anything sitting inside a
   .bg-base-opp or .bg-accent card so titles, paragraphs, and tag
   contents always read correctly regardless of theme cascade.

   NOTE: don't use `*` here — that catches the round arrow button's
   <i> icon too, turning it white-on-cream (invisible). Target the
   actual text nodes only: title <p>, info <p>, tag <span>, and
   their nested .lang-string spans. The button keeps its own
   colour from .btn-base / .btn-additional / etc. */
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__title,
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__title p,
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__title .lang-string,
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__info,
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__info p,
.mxd-services-cards__inner.bg-base-opp .mxd-services-cards__info .lang-string,
.mxd-services-cards__inner.bg-base-opp .tag,
.mxd-services-cards__inner.bg-base-opp .tag .lang-string,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__title,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__title p,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__title .lang-string,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__info,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__info p,
.mxd-services-cards__inner.bg-accent .mxd-services-cards__info .lang-string,
.mxd-services-cards__inner.bg-accent .tag,
.mxd-services-cards__inner.bg-accent .tag .lang-string,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__title,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__title h3,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__title .lang-string,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__info,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__info p,
.mxd-services-stack__inner.bg-base-opp .mxd-services-stack__info .lang-string,
.mxd-services-stack__inner.bg-base-opp .tag,
.mxd-services-stack__inner.bg-base-opp .tag .lang-string,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__title,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__title h3,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__title .lang-string,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__info,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__info p,
.mxd-services-stack__inner.bg-accent .mxd-services-stack__info .lang-string,
.mxd-services-stack__inner.bg-accent .tag,
.mxd-services-stack__inner.bg-accent .tag .lang-string {
    color: var(--t-opp-bright) !important;
}
/* The round arrow button's icon stays explicit so it reads
   against the button's own fill colour (not the card's bg). */
.mxd-services-cards__controls .btn-round.btn-base i,
.mxd-services-stack__controls .btn-round.btn-base i {
    color: var(--t-bright) !important;
}
.mxd-services-cards__controls .btn-round.btn-additional i,
.mxd-services-stack__controls .btn-round.btn-additional i {
    color: var(--t-bright) !important;
}
.mxd-services-cards__controls .btn-round.btn-opposite i,
.mxd-services-stack__controls .btn-round.btn-opposite i {
    color: var(--t-opp-bright) !important;
}
/* tag-outline-opposite border (white-ish stroke on dark/accent bg) */
.mxd-services-cards__inner.bg-base-opp .tag-outline-opposite,
.mxd-services-cards__inner.bg-accent .tag-outline-opposite,
.mxd-services-stack__inner.bg-base-opp .tag-outline-opposite,
.mxd-services-stack__inner.bg-accent .tag-outline-opposite {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================================
   S038 — keep title text clear of the icon-button corner
   ============================================================
   The .mxd-services-cards__controls (the round arrow button) is
   positioned absolutely in one corner of the card. Without a
   matching inline-padding on the .__title block, the title text
   wraps directly under / over the icon's coloured fill, looking
   like a layout collision. Reserve a clear zone on the icon side
   so the title always sits in the free area of the card. */
.mxd-services-cards__inner {
    position: relative;
    overflow: hidden;
}
.mxd-services-cards__title,
.mxd-services-cards__info {
    padding-inline-end: 7rem;
}
/* In LTR the controls float to the right end (inline-end), so the
   title has padding-right above. In RTL the controls flip to the
   left end (inline-end in RTL), and padding-inline-end keeps the
   text clear of them automatically because it's direction-aware. */

/* ============================================================
   S038 / S041 cards — round button visibility + RTL flipping
   ============================================================
   Three bugs surfaced once these cards went live:

   1) On light backgrounds (bg-base-shade / bg-base-tint), the
      template's btn-base sets the circle's fill to var(--base)
      which is the same cream as the page — the button becomes
      effectively invisible. Force btn-opposite (dark fill + white
      icon) on any round-large button sitting inside a light-bg
      card so the corner control always reads.
   ------------------------------------------------------------ */
.mxd-services-cards__inner.bg-base-tint .btn-round.btn-base,
.mxd-services-cards__inner.bg-base-shade .btn-round.btn-base,
.mxd-services-stack__inner.bg-base-tint .btn-round.btn-base,
.mxd-services-stack__inner.bg-base-shade .btn-round.btn-base {
    background-color: var(--base-opp) !important;
    border-color: var(--base-opp) !important;
    color: var(--t-opp-bright) !important;
}
.mxd-services-cards__inner.bg-base-tint .btn-round.btn-base i,
.mxd-services-cards__inner.bg-base-shade .btn-round.btn-base i,
.mxd-services-stack__inner.bg-base-tint .btn-round.btn-base i,
.mxd-services-stack__inner.bg-base-shade .btn-round.btn-base i {
    color: var(--t-opp-bright) !important;
}

/* 2) RTL: the controls icon button is positioned `right: 1rem`
      (physical) in the template. In Arabic, the reading flow
      starts on the right, so the button ends up overlapping the
      title text. Mirror it to the inline-end side (left in RTL)
      so the title sits in the clear half of the card.
   ------------------------------------------------------------ */
[dir="rtl"] .mxd-services-cards__controls,
[dir="rtl"] .mxd-services-stack__controls {
    right: auto !important;
    left: 1rem !important;
}

/* 3) RTL: the card illustration is positioned with physical
      `right: 0` (image-1, image-3, image-4) or `left: 50%`
      (image-2). In Arabic, that puts the image on the SAME
      side as the title text — the polyhedron / object collides
      with the heading. Mirror each image variant to the
      opposite physical side so it sits in the empty half of
      the card and the title reads clean.
   ------------------------------------------------------------ */
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-1 {
    right: auto !important;
    left: 0 !important;
}
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-2 {
    /* image-2 was centred via left:50% + translateX(-50%) — already
       centred horizontally, so no flip needed; keep as-is. */
}
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-3 {
    right: auto !important;
    left: 0 !important;
}
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-3 .image-1 {
    left: auto !important;
    right: 0 !important;
}
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-3 .image-2 {
    right: auto !important;
    left: -40px !important;
}
[dir="rtl"] .mxd-services-cards__image.mxd-services-cards-image-4 {
    right: auto !important;
    left: -50px !important;
}
/* Stacking-card image lives at .services-stack__image; the
   template doesn't pin a side so it flows naturally — no
   override required. */

/* ============================================================
   Hero CTA pills — Axion-style ("Start a project" reference)
   ============================================================
   Pill button with a corner circle holding an arrow icon. Two
   variants: primary (cobalt fill, white circle + cobalt arrow)
   and secondary (cream fill, dark circle + cream arrow). On
   hover the corner circle rotates -45° (matches the Axion
   pattern). Used in the home page hero only. */
.uc-hero-intro__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.uc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                background-color 0.25s ease,
                color 0.25s ease;
    /* logical inline-end padding so the arrow circle has more
       breathing room from the edge in both LTR and RTL */
}
[dir="rtl"] .uc-hero-pill {
    padding: 0.5rem 2rem 0.5rem 0.5rem;
}
.uc-hero-pill__label {
    white-space: nowrap;
}
.uc-hero-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    flex-shrink: 0;
}
.uc-hero-pill__icon i {
    font-size: 1.6rem;
    line-height: 1;
}
.uc-hero-pill:hover .uc-hero-pill__icon {
    transform: rotate(-45deg);
}
/* In RTL the arrow visually points the wrong way — mirror the
   icon glyph so the head still leads toward the inline-end. */
[dir="rtl"] .uc-hero-pill__icon i {
    transform: scaleX(-1);
}
[dir="rtl"] .uc-hero-pill:hover .uc-hero-pill__icon i {
    /* keep the mirror under the rotate transform */
    transform: scaleX(-1);
}

/* Primary — cobalt fill, white pill text, white circle + cobalt arrow.
   The `.uc-hero-intro .lang-string` rule earlier in this file pins
   descendant text to var(--t-bright), so we need !important + reach
   the inner .lang-string span specifically to keep "تواصل معنا" white. */
.uc-hero-pill--primary,
.uc-hero-pill--primary .uc-hero-pill__label,
.uc-hero-pill--primary .uc-hero-pill__label .lang-string {
    color: #ffffff !important;
}
.uc-hero-pill--primary {
    background-color: #7B2CFF;
}
.uc-hero-pill--primary .uc-hero-pill__icon {
    background-color: #ffffff;
    color: #7B2CFF;
}
.uc-hero-pill--primary:hover {
    background-color: #6300FF;
}

/* Secondary — cream fill, dark pill text, dark circle + cream arrow.
   Same lang-string-override pattern: pin the label to var(--t-bright)
   in light mode and to near-black in dark mode regardless of the
   overlay's global text colour. */
.uc-hero-pill--secondary,
.uc-hero-pill--secondary .uc-hero-pill__label,
.uc-hero-pill--secondary .uc-hero-pill__label .lang-string {
    color: var(--t-bright) !important;
}
.uc-hero-pill--secondary {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.uc-hero-pill--secondary .uc-hero-pill__icon {
    background-color: var(--t-bright);
    color: #ffffff;
}
.uc-hero-pill--secondary:hover {
    background-color: #F2F2F5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Dark theme — secondary stays cream-on-white BUT its label
   must be near-black, not whatever the overlay's dark-mode ink
   resolved to. */
:root[color-scheme="dark"] .uc-hero-pill--secondary {
    background-color: rgba(255, 255, 255, 0.92);
}
:root[color-scheme="dark"] .uc-hero-pill--secondary,
:root[color-scheme="dark"] .uc-hero-pill--secondary .uc-hero-pill__label,
:root[color-scheme="dark"] .uc-hero-pill--secondary .uc-hero-pill__label .lang-string {
    color: #0B0014 !important;
}
:root[color-scheme="dark"] .uc-hero-pill--secondary .uc-hero-pill__icon {
    background-color: #0B0014;
    color: #ffffff;
}

/* Mobile — compact sizing */
@media (max-width: 600px) {
    .uc-hero-pill {
        font-size: 1.3rem;
        padding-inline-start: 1.6rem;
    }
    .uc-hero-pill__icon {
        width: 3rem;
        height: 3rem;
    }
    .uc-hero-pill__icon i {
        font-size: 1.3rem;
    }
}

/* ============================================================
   Shfrah — sister-studio promotion (strip / footer / panels)
   ============================================================
   Strategy: route programming + AI intent from Hawih to the
   sister studio Shfrah (shfrah.com). Four placements:
     1. .uc-shfrah-strip   — dismissible announcement bar (home)
     2. .uc-shfrah-footer  — family block in the shared footer
     3. .uc-shfrah-panel   — cross-link card on service pages
     4. .uc-shfrah-nudge   — contact-form inline note
   All outbound links carry UTM params per placement so Shfrah's
   analytics can attribute each source separately. */

/* ---- 1. Announcement strip (home only) -------------------- */
/* The whole feature keys off `html.has-shfrah-strip`: the class
   ships in the markup, an early head script removes it when the
   visitor dismissed it before, and the close button removes it
   live. No class = no strip, no offsets. */
.uc-shfrah-strip { display: none; }
html.has-shfrah-strip .uc-shfrah-strip {
    display: flex;
    position: fixed;
    inset: 0 0 auto 0;
    height: 4rem;
    z-index: 102;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #2d3f8d;             /* Shfrah navy */
    color: #ffffff;
}
.uc-shfrah-strip__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
    min-width: 0;
}
.uc-shfrah-strip__brand {
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.uc-shfrah-strip__copy {
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uc-shfrah-strip__link i { font-size: 1.3rem; flex-shrink: 0; }
[dir="rtl"] .uc-shfrah-strip__link .ph-arrow-up-right { transform: scaleX(-1); }
.uc-shfrah-strip__link:hover .uc-shfrah-strip__copy { opacity: 1; }
.uc-shfrah-strip__close {
    position: absolute;
    inset-inline-end: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.6rem;
    line-height: 1;
}
.uc-shfrah-strip__close:hover { color: #ffffff; }

/* Push the floating header pill + hero content down while the
   strip is visible. Strip is 4rem tall. */
html.has-shfrah-strip body header.mxd-header {
    top: calc(1.5rem + 4rem) !important;
}
html.has-shfrah-strip .uc-hero-fullbleed {
    padding-top: 12rem !important;
}
@media (max-width: 991px) {
    html.has-shfrah-strip body header.mxd-header {
        top: calc(1rem + 4rem) !important;
    }
    html.has-shfrah-strip body .mxd-nav__contain {
        inset-block-start: calc(1rem + 4rem + clamp(0.4rem, 1.5vw, 0.6rem)) !important;
    }
}
@media (max-width: 600px) {
    html.has-shfrah-strip .uc-shfrah-strip { padding-inline: 1rem 3.6rem; }
    .uc-shfrah-strip__brand { display: none; }   /* copy alone fits */
}

/* ---- 2. Footer family block -------------------------------- */
.uc-shfrah-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem 1.8rem;
    margin-bottom: 2rem;
}
.uc-shfrah-footer__logo { height: 2.2rem; width: auto; display: none; }
/* theme-aware logo swap: navy on light, white on dark */
:root:not([color-scheme="dark"]) .uc-shfrah-logo--light { display: inline-block; }
:root[color-scheme="dark"] .uc-shfrah-logo--dark { display: inline-block; }
.uc-shfrah-footer__line,
.uc-shfrah-footer__line .lang-string {
    font-size: 1.3rem;
    color: var(--t-muted);
    margin: 0;
}
.uc-shfrah-footer__link { display: inline-flex; align-items: center; }

/* ---- 3. Service-page cross-link panel ---------------------- */
.uc-shfrah-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.4rem 3.2rem;
    padding: 3.2rem 3.6rem;
    border-radius: 2rem;
    background: var(--base-tint);
    border: 1px solid var(--st-muted);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.uc-shfrah-panel__logo { height: 3rem; width: auto; display: none; flex-shrink: 0; }
:root:not([color-scheme="dark"]) .uc-shfrah-panel .uc-shfrah-logo--light { display: inline-block; height: 3rem; }
:root[color-scheme="dark"] .uc-shfrah-panel .uc-shfrah-logo--dark { display: inline-block; height: 3rem; }
.uc-shfrah-panel__text { flex: 1 1 32rem; min-width: 0; }
.uc-shfrah-panel__text h3,
.uc-shfrah-panel__text h3 .lang-string {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.8rem;
    color: var(--t-bright);
}
.uc-shfrah-panel__text p,
.uc-shfrah-panel__text p .lang-string {
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
    color: var(--t-muted);
}
.uc-shfrah-panel .uc-hero-pill { flex-shrink: 0; }

/* ---- 4. Contact-form nudge --------------------------------- */
.uc-shfrah-nudge {
    margin-top: 1rem;
    padding: 1.2rem 1.6rem;
    border-radius: 1.2rem;
    background: rgba(45, 63, 141, 0.07);     /* Shfrah navy wash */
    border: 1px solid rgba(45, 63, 141, 0.18);
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--t-medium);
}
.uc-shfrah-nudge a {
    color: #2d3f8d;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
:root[color-scheme="dark"] .uc-shfrah-nudge {
    background: rgba(91, 115, 245, 0.10);
    border-color: rgba(91, 115, 245, 0.25);
}
:root[color-scheme="dark"] .uc-shfrah-nudge a { color: #8fa1f8; }

/* ---- services.html programming-card inline link ------------ */
.uc-shfrah-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    font-size: 1.4rem;
    color: inherit;
    opacity: 0.85;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.uc-shfrah-inline:hover { opacity: 1; }
[dir="rtl"] .uc-shfrah-inline .ph-arrow-up-right { transform: scaleX(-1); }

/* ---- Strip v2: gradient + "NEW" chip ----------------------- */
html.has-shfrah-strip .uc-shfrah-strip {
    background: linear-gradient(90deg, #1f2d68 0%, #2d3f8d 50%, #1f2d68 100%);
}
.uc-shfrah-strip__chip,
.uc-shfrah-strip__chip .lang-string {
    display: inline-flex;
    align-items: center;
    background: #DDF160;            /* template additional / lime */
    color: #14142a;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    line-height: 1.3;
    flex-shrink: 0;
}

/* ---- Footer family block v2 (pitch + CTA) ------------------ */
.uc-shfrah-footer__text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.uc-shfrah-footer__cta,
.uc-shfrah-footer__cta .lang-string {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: #2d3f8d;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
:root[color-scheme="dark"] .uc-shfrah-footer__cta,
:root[color-scheme="dark"] .uc-shfrah-footer__cta .lang-string {
    color: #8fa1f8;
}
[dir="rtl"] .uc-shfrah-footer__cta .ph-arrow-up-right { transform: scaleX(-1); }

/* ---- Promo popup ------------------------------------------- */
.uc-shfrah-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.uc-shfrah-modal.is-open { opacity: 1; }
.uc-shfrah-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 31, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.uc-shfrah-modal__card {
    position: relative;
    width: min(52rem, 100%);
    background: var(--base);
    border: 1px solid var(--st-muted);
    border-radius: 2.4rem;
    padding: 4rem 3.6rem 3.2rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-align: start;
}
.uc-shfrah-modal.is-open .uc-shfrah-modal__card {
    transform: translateY(0) scale(1);
}
.uc-shfrah-modal__close {
    position: absolute;
    top: 1.6rem;
    inset-inline-end: 1.6rem;
    background: transparent;
    border: 0;
    color: var(--t-muted);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.6rem;
    line-height: 1;
}
.uc-shfrah-modal__close:hover { color: var(--t-bright); }
.uc-shfrah-modal__logo { height: 3.2rem; width: auto; display: none; margin-bottom: 2rem; }
:root:not([color-scheme="dark"]) .uc-shfrah-modal .uc-shfrah-logo--light { display: inline-block; }
:root[color-scheme="dark"] .uc-shfrah-modal .uc-shfrah-logo--dark { display: inline-block; }
.uc-shfrah-modal__eyebrow,
.uc-shfrah-modal__eyebrow .lang-string {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--t-muted);
    margin: 0 0 1rem;
}
.uc-shfrah-modal__title,
.uc-shfrah-modal__title .lang-string {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--t-bright);
    margin: 0 0 1.2rem;
}
.uc-shfrah-modal__body,
.uc-shfrah-modal__body .lang-string {
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--t-medium);
    margin: 0 0 2rem;
}
.uc-shfrah-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}
.uc-shfrah-modal__chips > span {
    font-size: 1.25rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--st-medium);
    color: var(--t-medium);
    white-space: nowrap;
}
.uc-shfrah-modal__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.uc-shfrah-modal__later,
.uc-shfrah-modal__later .lang-string {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    color: var(--t-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.uc-shfrah-modal__later:hover,
.uc-shfrah-modal__later:hover .lang-string { color: var(--t-bright); }
@media (max-width: 600px) {
    .uc-shfrah-modal { padding: 1.2rem; align-items: flex-end; }
    .uc-shfrah-modal__card { padding: 3.2rem 2.4rem 2.8rem; border-radius: 2rem 2rem 1.2rem 1.2rem; }
    .uc-shfrah-modal__title, .uc-shfrah-modal__title .lang-string { font-size: 2rem; }
}

/* =========================================================
   Skip the 0→100% page loader.
   ---------------------------------------------------------
   The template ships a full-page preloader (#loader) that
   animates a 0-to-100 counter on every page load and on
   every cross-page navigation. We saw no payoff for it —
   it just adds perceived wait. CSS-only neutralisation:

     1. Hide #loader entirely (the safety script in
        index.html still runs, fades nothing visible — no
        JS errors).
     2. Force every .loading__fade / .loading__item /
        .loading-wrap target to be visible immediately, so
        the header / nav / hero text that previously waited
        for the loader to finish are painted with the rest
        of the page.

   The loader.min.css link, the #loader markup, and the
   safety script can all be removed later if desired. Doing
   it via CSS first means a clean revert if anything visible
   broke.
   ========================================================= */
#loader,
.loader,
.preloader,
.mxd-preloader {
    display: none !important;
}
.loading__fade,
.loading__item,
.loading-wrap,
.loading__hide,
[class*="loading__"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* =========================================================
   GSAP-pinned card scroll smoothness.
   ---------------------------------------------------------
   The services-stack section pins each card and animates it
   on scroll. By default the browser handles those transforms
   on the main thread, contending with image decode + style
   recalc work and causing perceived jitter on devices with
   modest GPUs. Two surgical hints fix it:

     will-change: transform   Tells the compositor to promote
                              each card to its own layer, so
                              GSAP's transform during scroll
                              runs on the GPU compositor.

     contain: layout paint    Promises the browser that the
                              card's layout doesn't affect
                              the document's outer layout —
                              skip unnecessary recalcs when
                              the card transforms.

   Both are additive: no visible change, no page-speed cost,
   no behavior change for the rest of the page.
   ========================================================= */
.services-stack .stack-item {
    will-change: transform;
    contain: layout paint;
    transform: translateZ(0);          /* compositor layer hint */
    backface-visibility: hidden;
}
.stack-wrapper.in-content-stack {
    contain: layout;
}

/* =========================================================
   CTA promo background fill on mobile / tablet.
   ---------------------------------------------------------
   The template sets `.mxd-promo__bg` to width:70% at the base
   (all widths) and only switches to width:50% + the side
   parallax illustrations at >=1200px. Below 1200px the
   illustrations are display:none, so the 70%-wide background
   can't fill the card — leaving a blank strip. It's worst in
   Arabic (RTL), where the bg is also offset to one side, and
   it affected every page carrying the CTA (only index.html
   had any RTL promo override at all).

   Fix, site-wide, below the desktop breakpoint: stretch the bg
   to the full card width and anchor it to the reading-start
   edge in each direction. Desktop (>=1200px) is left to the
   template + the per-page parallax layout, untouched.
   ========================================================= */
@media (max-width: 1199px) {
    .mxd-promo__bg {
        width: 100%;
        right: 0;
        left: auto;
        background-position: left center;
    }
    [dir="rtl"] .mxd-promo__bg {
        right: auto;
        left: 0;
        background-position: right center;
    }
}

/* =========================================================
   PDPL-compliant analytics consent banner.
   ---------------------------------------------------------
   Renders only when window.HAWIH_GA4_ID is defined and the
   visitor has not yet decided. Bottom-fixed strip, dismiss
   via Accept (grant analytics_storage) or Decline (no
   analytics cookies; gtag stays in consent-denied mode).
   ========================================================= */
.hawih-consent {
    position: fixed;
    inset-inline: 1.2rem;
    bottom: 1.2rem;
    z-index: 9000;
    max-width: 64rem;
    margin-inline: auto;
    background: var(--base);
    color: var(--t-bright);
    border: 1px solid var(--st-medium);
    border-radius: 1.6rem;
    padding: 1.6rem 1.8rem;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.10),
        0 20px 48px rgba(0,0,0,0.14);
    display: none;
    flex-direction: column;
    gap: 1.2rem;
    font: 400 1.4rem/1.55 var(--_font-default);
}
.hawih-consent.is-visible { display: flex; }
.hawih-consent__body {
    margin: 0;
    color: var(--t-bright);
}
.hawih-consent__body .lang-string { color: inherit; }
.hawih-consent__body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.hawih-consent__actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.hawih-consent__btn {
    appearance: none;
    border: 1px solid var(--st-medium);
    background: transparent;
    color: var(--t-bright);
    font: inherit;
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.hawih-consent__btn:hover {
    border-color: var(--t-bright);
}
.hawih-consent__btn--accept {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--opposite);
}
.hawih-consent__btn--accept:hover {
    filter: brightness(1.06);
}
@media (min-width: 720px) {
    .hawih-consent {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
    .hawih-consent__body { flex: 1; }
}

/* ============================================================
   btn-additional: override lime buttons → brand purple.
   --additional itself stays lime so it works as an accent
   text color on dark cards (sectors numbers, approach labels).
   Only the button BACKGROUND is recoloured.
   ============================================================ */
.btn-additional,
a.btn-additional,
button.btn-additional {
    background-color: #6300FF !important;
    color: #fff !important;
    border-color: #6300FF !important;
}
.btn-additional:hover,
a.btn-additional:hover,
button.btn-additional:hover {
    background-color: #4B00BF !important;
    border-color: #4B00BF !important;
}

/* ============================================================
   Theme toggle — hidden temporarily (contrast fixes pending)
   ============================================================ */
#color-switcher { display: none !important; }

/* ============================================================
   Moon / Sun theme-toggle button
   Replaces the mxd-color-switcher pill (two circles).
   ============================================================ */
#color-switcher.btn-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    padding: 0;
    font-size: 1.8rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--st-bright);
    color: var(--t-bright);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
#color-switcher.btn-theme-toggle:hover {
    background: var(--hawih-blue);
    border-color: var(--hawih-blue);
    color: #fff;
}
/* CSS-driven icon switch: moon in light, sun in dark */
#color-switcher.btn-theme-toggle .ph-moon { display: inline-flex; }
#color-switcher.btn-theme-toggle .ph-sun  { display: none; }
html.dark #color-switcher.btn-theme-toggle .ph-moon { display: none; }
html.dark #color-switcher.btn-theme-toggle .ph-sun  { display: inline-flex; }
[data-theme="dark"] #color-switcher.btn-theme-toggle .ph-moon { display: none; }
[data-theme="dark"] #color-switcher.btn-theme-toggle .ph-sun  { display: inline-flex; }

/* Keep the same layout rules as the old pill for header controls consistency.
   The button keeps mxd-color-switcher class (for app.min.js) + btn-theme-toggle (for our CSS). */
.mxd-header__controls #color-switcher.btn-theme-toggle {
    border: 1px solid var(--st-bright) !important;
    background-color: rgba(250, 247, 246, 0.45) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}
:root[color-scheme="dark"] .mxd-header__controls #color-switcher.btn-theme-toggle {
    background-color: rgba(28, 28, 28, 0.45) !important;
}
.mxd-header__controls #color-switcher.btn-theme-toggle:hover {
    background: var(--hawih-blue) !important;
    border-color: var(--hawih-blue) !important;
    color: #fff !important;
}
/* Hide the pill's default ::before / ::after pseudos that draw the two circles */
#color-switcher.btn-theme-toggle::before,
#color-switcher.btn-theme-toggle::after {
    display: none !important;
}

/* ============================================================
   Bubble fill hover animation.
   Scoped tightly to the header CTA pill and modal CTAs —
   the sections-list rows, awards links, sector items all carry
   .btn but aren't visual "buttons", so they're excluded.
   ============================================================ */
.mxd-header__controls a.btn.btn-outline,
.mxd-promo a.btn,
.mxd-promo button.btn,
.lp-cta a.btn,
.lp-cta button.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}
.mxd-header__controls a.btn.btn-outline::after,
.mxd-promo a.btn::after,
.mxd-promo button.btn::after,
.lp-cta a.btn::after,
.lp-cta button.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #6300FF;
    transform: translate(-50%, -50%);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.45s ease;
    opacity: 0;
    z-index: -1;
}
.mxd-header__controls a.btn.btn-outline:hover::after,
.mxd-promo a.btn:hover::after,
.mxd-promo button.btn:hover::after,
.lp-cta a.btn:hover::after,
.lp-cta button.btn:hover::after {
    width: 350%;
    height: 350%;
    opacity: 1;
}
.mxd-header__controls a.btn.btn-outline:hover {
    color: #fff !important;
    border-color: #6300FF !important;
}

/* ============================================================
   Marquee sparkle separators: brand purple
   ============================================================ */
.marquee__image,
.marquee__image svg {
    color: #6300FF;
    fill: currentColor;
}

/* ============================================================
   Section ornament / divider accent markers
   ============================================================ */
.mxd-ornament,
.mxd-divider-icon,
.section-marker,
.uc-ornament {
    color: #6300FF;
}

/* ============================================================
   Contrast fixes — audit-driven
   ============================================================ */

/* 1. Footer counter badge: white text on purple bg */
.footer-nav__counter,
.footer-nav__counter * {
    color: #fff !important;
}

/* 2. Dark mode: lighten brand purple for text links so they
      pass WCAG on near-black backgrounds (#0B0B0F etc.) */
:root[color-scheme="dark"] {
    --hawih-blue: #9B4DFF;
    --hawih-blue-hover: #7B2FFF;
}

/* 3. lp-cta subtitle: lang-string span must inherit the
      light-beige parent colour, not the global --t-bright */
.lp-cta .lp-cta__sub .lang-string,
.lp-cta .lp-cta__sub span,
.lp-cta .lp-cta__sub { color: rgba(244, 241, 235, 0.72); }

/* 4. mxd-promo CTA section always has a dark background.
      btn-outline inside it needs white text at rest. */
.mxd-promo a.btn.btn-outline,
.mxd-promo button.btn.btn-outline {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.mxd-promo a.btn.btn-outline:hover,
.mxd-promo button.btn.btn-outline:hover {
    border-color: #6300FF !important;
}

/* Hero text — white on dark background, excluding buttons */
#uc-hero-root .uc-hero-intro *:not(a):not(button):not(a *):not(button *) { color: #fff !important; }

/* 5. Remove Shfrah-branded inline link style */
.uc-shfrah-inline { display: none !important; }
.uc-shfrah-nudge  { display: none !important; }
/* CMS contrast safety layer: preserve readable copy across legacy dark surfaces. */
html.dark body,
:root[color-scheme="dark"] body {
  color: #f5f3ed;
}
html.dark :is(main, section, article, footer)[class*="dark"] :is(p, li, label, small),
:root[color-scheme="dark"] :is(main, section, article, footer)[class*="dark"] :is(p, li, label, small),
html.dark :is(.bg-dark, .dark-section, .mxd-section-dark) :is(p, li, label, small),
:root[color-scheme="dark"] :is(.bg-dark, .dark-section, .mxd-section-dark) :is(p, li, label, small) {
  color: #e9e7df !important;
}
html.dark :is(.bg-dark, .dark-section, .mxd-section-dark) :is(h1, h2, h3, h4, h5, h6, strong),
:root[color-scheme="dark"] :is(.bg-dark, .dark-section, .mxd-section-dark) :is(h1, h2, h3, h4, h5, h6, strong) {
  color: #ffffff !important;
}