@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/thmanyahserifdisplay-Bold.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/thmanyahserifdisplay-Black.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/thmanyahseriftext-Regular.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/thmanyahseriftext-Medium.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/thmanyahseriftext-Bold.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/thmanyahsans-Regular.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/thmanyahsans-Medium.woff2) format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/thmanyahsans-Bold.woff2) format("woff2")}

/* ============================================================================
   QEYAS | قياس — Design Tokens
   Construction Intelligence · Measure Better. Decide Smarter.
   v1.0.0

   Three tiers. Never reference tier 1 in component code — always tier 2 or 3.
     Tier 1  --qs-c-*        primitives. The locked brand palette + derived ramps.
     Tier 2  --qs-{role}-*   semantic. What a colour MEANS. Theme-switchable.
     Tier 3  --qs-{cmp}-*    component. Bound to tier 2, never to tier 1.

   Contrast values in comments are computed WCAG 2.1 ratios, not estimates.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES
   The five brand colours are locked and must not be re-mixed. The *-deep and
   *-light ramps below are DERIVED ACCESSIBILITY VARIANTS, not new brand
   colours: they exist because the locked hues fail WCAG in specific
   foreground roles. They never appear in brand/print artwork.
--------------------------------------------------------------------------- */
:root {
  /* Brand — locked */
  --qs-c-deep-slate:      #23303B;
  --qs-c-sandstone:       #C7A977;
  --qs-c-bronze:          #B88B4A;
  --qs-c-limestone:       #E9E1D3;
  --qs-c-graphite:        #4A4A4A;
  --qs-c-ivory:           #FAF8F3;
  --qs-c-steel:           #7D858C;

  /* Functional — locked hues */
  --qs-c-success:         #5D7A62;
  --qs-c-warning:         #B98B3C;
  --qs-c-risk:            #9C5C52;

  /* Derived: text-safe on Ivory/Limestone (all >= 4.5:1 on Ivory) */
  --qs-c-bronze-deep:     #8C6A38;  /* 4.67:1 on Ivory — replaces bronze for text/links */
  --qs-c-steel-deep:      #666E75;  /* 4.88:1 — replaces steel for captions          */
  --qs-c-success-deep:    #55705A;  /* 5.14:1                                        */
  --qs-c-warning-deep:    #8A6524;  /* 4.99:1 — bronze-adjacent, warning is 2.90:1   */
  --qs-c-risk-deep:       #8A5049;  /* 5.95:1                                        */

  /* Derived: text-safe on Deep Slate (all >= 4.5:1 on Deep Slate) */
  --qs-c-bronze-light:    #D6A961;  /* 6.23:1 on Deep Slate */
  --qs-c-steel-light:     #A7AFB6;  /* 6.07:1 */
  --qs-c-success-light:   #8FAE94;  /* 5.55:1 */
  --qs-c-warning-light:   #D9AE63;  /* 6.54:1 */
  --qs-c-risk-light:      #C98A7E;  /* 4.76:1 */

  /* Derived: dark-theme surfaces. Deep Slate is the darkest value in the
     system — never pure black — so elevation on dark goes UP in value. */
  --qs-c-slate-surface:   #2C3A47;  /* raised one step  */
  --qs-c-slate-raised:    #35434F;  /* raised two steps */
  --qs-c-slate-hairline:  #3E4C58;  /* decorative rule only — 1.53:1, NOT a control border */
  --qs-c-slate-line:      #737F8A;  /* control border on dark — 3.30:1 */

  /* Alpha primitives — for shadows, scrims, tick rules */
  --qs-a-slate-04: rgba(35, 48, 59, 0.04);
  --qs-a-slate-06: rgba(35, 48, 59, 0.06);
  --qs-a-slate-08: rgba(35, 48, 59, 0.08);
  --qs-a-slate-12: rgba(35, 48, 59, 0.12);
  --qs-a-slate-16: rgba(35, 48, 59, 0.16);
  --qs-a-slate-64: rgba(35, 48, 59, 0.64);
  --qs-a-bronze-12: rgba(184, 139, 74, 0.12);
  --qs-a-bronze-24: rgba(184, 139, 74, 0.24);
  --qs-a-bronze-40: rgba(184, 139, 74, 0.40);
  --qs-a-ivory-08: rgba(250, 248, 243, 0.08);
  --qs-a-ivory-12: rgba(250, 248, 243, 0.12);
  --qs-a-ivory-64: rgba(250, 248, 243, 0.64);
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY PRIMITIVES
   Thmanyah ships FIVE static weights: 300 / 400 / 500 / 700 / 900.
   There is no 600 and no 800. Never specify one — the browser will synthesise
   a fake weight and the Arabic will break before the Latin does.
--------------------------------------------------------------------------- */
:root {
  --qs-font-display: "Thmanyah Serif Display", "Noto Naskh Arabic", "Amiri", Georgia, "Times New Roman", serif;
  --qs-font-text:    "Thmanyah Serif Text", "Noto Naskh Arabic", "Amiri", Georgia, "Times New Roman", serif;
  --qs-font-sans:    "Thmanyah Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --qs-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --qs-fw-light:  300;
  --qs-fw-regular:400;
  --qs-fw-medium: 500;
  --qs-fw-bold:   700;
  --qs-fw-black:  900;

  /* Fluid type scale. Ratio 1.25 at the small end, 1.28 at the large end.
     Clamps are the token — never hard-code a px size in a component. */
  --qs-fs-hero:      clamp(2.50rem, 1.60rem + 3.60vw, 4.50rem);  /* 40 → 72 */
  --qs-fs-h1:        clamp(2.25rem, 1.65rem + 2.40vw, 3.25rem);  /* 36 → 52 */
  --qs-fs-h2:        clamp(1.75rem, 1.42rem + 1.32vw, 2.625rem); /* 28 → 42 */
  --qs-fs-h3:        clamp(1.375rem, 1.22rem + 0.62vw, 1.75rem); /* 22 → 28 */
  --qs-fs-h4:        clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem); /* 18 → 20 */
  --qs-fs-lead:      clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --qs-fs-body:      1rem;      /* 16 */
  --qs-fs-body-sm:   0.9375rem; /* 15 */
  --qs-fs-caption:   0.875rem;  /* 14 */
  --qs-fs-label:     0.75rem;   /* 12 */
  --qs-fs-micro:     0.625rem;  /* 10 — labels only, never prose, never Arabic */

  --qs-fs-data-xl:   clamp(2.0rem, 1.6rem + 1.6vw, 2.75rem);
  --qs-fs-data-lg:   1.75rem;
  --qs-fs-data-md:   1.375rem;
  --qs-fs-data-sm:   1.125rem;

  --qs-lh-tight:   1.1;
  --qs-lh-heading: 1.2;
  --qs-lh-snug:    1.3;
  --qs-lh-lead:    1.4;
  --qs-lh-body:    1.6;
  --qs-lh-arabic:  1.85; /* Arabic needs more leading — descenders + diacritics */

  --qs-ls-hero:    -0.02em;
  --qs-ls-heading: -0.01em;
  --qs-ls-body:    0;
  --qs-ls-label:   0.08em;  /* labels are tracked out, always uppercase in Latin */
  --qs-ls-micro:   0.12em;

  --qs-measure:      68ch;  /* max line length, Latin body */
  --qs-measure-ar:   62ch;  /* Arabic sets wider per character — shorter measure */
}

/* ---------------------------------------------------------------------------
   SPACE, GRID, RADIUS, ELEVATION, MOTION
   Base unit 4px. The scale is a measuring scale: every step is a whole number
   of base units, so any two components always align to the same grid.
--------------------------------------------------------------------------- */
:root {
  --qs-space-0:   0;
  --qs-space-1:   0.25rem;  /*  4 */
  --qs-space-2:   0.5rem;   /*  8 */
  --qs-space-3:   0.75rem;  /* 12 */
  --qs-space-4:   1rem;     /* 16 */
  --qs-space-5:   1.5rem;   /* 24 */
  --qs-space-6:   2rem;     /* 32 */
  --qs-space-7:   3rem;     /* 48 */
  --qs-space-8:   4rem;     /* 64 */
  --qs-space-9:   6rem;     /* 96 */
  --qs-space-10:  8rem;     /* 128 */

  --qs-grid-cols: 12;
  --qs-gutter:    var(--qs-space-5);
  --qs-container: 1280px;
  --qs-container-text: 760px;   /* prose column */
  --qs-container-wide: 1512px;  /* dashboards only */

  /* Breakpoints — exported for JS/Tailwind; CSS uses them literally in @media */
  --qs-bp-sm:  480px;
  --qs-bp-md:  768px;
  --qs-bp-lg: 1024px;
  --qs-bp-xl: 1280px;
  --qs-bp-2xl:1536px;

  /* Radius — a calibrated instrument has crisp edges. The largest square
     radius in the system is 4px. Anything softer reads as consumer SaaS. */
  --qs-radius-0:    0;
  --qs-radius-sm:   2px;
  --qs-radius-md:   3px;
  --qs-radius-lg:   4px;
  --qs-radius-pill: 999px;  /* status chips and avatars ONLY */

  /* Elevation — rule-first. Depth is carried by a 1px boundary; the shadow
     only separates, it never decorates. Shadows are Deep Slate tinted,
     never neutral grey, and never coloured by the accent. */
  --qs-elev-0: none;
  --qs-elev-1: 0 1px 2px var(--qs-a-slate-06);
  --qs-elev-2: 0 2px 6px var(--qs-a-slate-08);
  --qs-elev-3: 0 8px 24px var(--qs-a-slate-08), 0 2px 6px var(--qs-a-slate-04);
  --qs-elev-4: 0 16px 48px var(--qs-a-slate-16), 0 4px 12px var(--qs-a-slate-08);

  /* Motion — instrument settle. No overshoot, no bounce, ever:
     a gauge that overshoots is an uncalibrated gauge. */
  --qs-dur-micro:   120ms;  /* hover, focus, checkbox */
  --qs-dur-base:    200ms;  /* most state changes */
  --qs-dur-enter:   320ms;  /* panels, popovers, drawers */
  --qs-dur-settle:  480ms;  /* number count-up, chart draw-in */
  --qs-ease-settle: cubic-bezier(0.20, 0.00, 0.00, 1.00);  /* default */
  --qs-ease-exit:   cubic-bezier(0.40, 0.00, 1.00, 1.00);
  --qs-ease-linear: linear;                                /* progress only */

  --qs-focus-width:  2px;
  --qs-focus-offset: 2px;

  --qs-z-base: 0;
  --qs-z-sticky: 100;
  --qs-z-drawer: 200;
  --qs-z-modal: 300;
  --qs-z-toast: 400;
  --qs-z-tooltip: 500;
}

/* ---------------------------------------------------------------------------
   THE MEASURE MARK — the signature element
   A calibrated tick scale. Minor tick every 8px, major tick every 5th (40px).
   Rendered as a repeating gradient so it is ONE token, costs no DOM, prints
   correctly, and inherits direction automatically in RTL.

   Rules of use:
     · It always marks an edge, a baseline or a threshold. Never a texture,
       never a fill, never background decoration.
     · Maximum one measure rule per visual group.
     · Major ticks read from the reading origin (left in LTR, right in RTL).
--------------------------------------------------------------------------- */
:root {
  --qs-tick-pitch:        8px;
  --qs-tick-major-every:  5;
  --qs-tick-h-minor:      4px;
  --qs-tick-h-major:      9px;
  --qs-tick-w:            1px;
  --qs-tick-color-minor:  var(--qs-a-slate-12);
  --qs-tick-color-major:  var(--qs-c-bronze);

  /* Horizontal rule — apply to a 9px-tall element */
  --qs-measure-rule:
    repeating-linear-gradient(to right,
      var(--qs-tick-color-major) 0 var(--qs-tick-w),
      transparent var(--qs-tick-w) 40px),
    repeating-linear-gradient(to right,
      var(--qs-tick-color-minor) 0 var(--qs-tick-w),
      transparent var(--qs-tick-w) 8px);

  /* Vertical variant — for card leading edges and chart axes */
  --qs-measure-rule-v:
    repeating-linear-gradient(to bottom,
      var(--qs-tick-color-major) 0 var(--qs-tick-w),
      transparent var(--qs-tick-w) 40px),
    repeating-linear-gradient(to bottom,
      var(--qs-tick-color-minor) 0 var(--qs-tick-w),
      transparent var(--qs-tick-w) 8px);
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (LIGHT / DEFAULT)
--------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --qs-bg-canvas:      var(--qs-c-ivory);
  --qs-bg-subtle:      var(--qs-c-limestone);
  --qs-bg-raised:      #FFFFFF;
  --qs-bg-inverse:     var(--qs-c-deep-slate);
  --qs-bg-scrim:       var(--qs-a-slate-64);
  --qs-bg-accent-soft: var(--qs-a-bronze-12);

  /* Foreground */
  --qs-fg-default:     var(--qs-c-graphite);      /*  8.35:1 */
  --qs-fg-strong:      var(--qs-c-deep-slate);    /* 12.70:1 */
  --qs-fg-muted:       var(--qs-c-steel-deep);    /*  4.88:1 — NOT raw steel (3.53) */
  --qs-fg-faint:       var(--qs-c-steel);         /*  3.53:1 — large text / icons only */
  --qs-fg-accent:      var(--qs-c-bronze-deep);   /*  4.67:1 — NOT raw bronze (2.90) */
  --qs-fg-on-inverse:  var(--qs-c-ivory);         /* 12.70:1 */
  --qs-fg-on-accent:   var(--qs-c-deep-slate);    /*  4.39:1 — requires >=14px/700 */

  /* Lines */
  --qs-line-subtle:    var(--qs-c-limestone);     /* decorative only — 1.22:1 */
  --qs-line-default:   #D5CCBC;
  --qs-line-strong:    var(--qs-c-steel);         /* control borders — 3.53:1 */
  --qs-line-accent:    var(--qs-c-bronze);

  /* Accent surfaces */
  --qs-accent:         var(--qs-c-bronze);
  --qs-accent-hover:   #A67B3E;
  --qs-accent-active:  #8C6A38;

  /* Status — foreground variants are the -deep ramp; fills use the base hue */
  --qs-status-success-fg:   var(--qs-c-success-deep);
  --qs-status-success-bg:   #EAEFEA;
  --qs-status-success-line: var(--qs-c-success);
  --qs-status-warning-fg:   var(--qs-c-warning-deep);
  --qs-status-warning-bg:   #F7F0E1;
  --qs-status-warning-line: var(--qs-c-warning);
  --qs-status-risk-fg:      var(--qs-c-risk-deep);
  --qs-status-risk-bg:      #F2E2DF;
  --qs-status-risk-line:    var(--qs-c-risk);
  --qs-status-neutral-fg:   var(--qs-c-steel-deep);
  --qs-status-neutral-bg:   var(--qs-c-limestone);
  --qs-status-neutral-line: var(--qs-c-steel);

  --qs-focus-ring:     var(--qs-c-deep-slate);
  --qs-shadow-card:    var(--qs-elev-1);
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (DARK)
   Deep Slate is the canvas AND the darkest value. Elevation moves upward in
   value, so a raised surface is lighter, not darker. Bronze becomes
   bronze-light for text; Sandstone finally becomes legible (6.02:1) and takes
   over as the Arabic accent, exactly as the brand book specifies.
--------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --qs-bg-canvas:      var(--qs-c-deep-slate);
  --qs-bg-subtle:      var(--qs-c-slate-surface);
  --qs-bg-raised:      var(--qs-c-slate-raised);
  --qs-bg-inverse:     var(--qs-c-ivory);
  --qs-bg-scrim:       rgba(16, 22, 28, 0.72);
  --qs-bg-accent-soft: var(--qs-a-bronze-24);

  --qs-fg-default:     #E4E7EA;
  --qs-fg-strong:      var(--qs-c-ivory);
  --qs-fg-muted:       var(--qs-c-steel-light);
  --qs-fg-faint:       #8A939B;
  --qs-fg-accent:      var(--qs-c-bronze-light);
  --qs-fg-on-inverse:  var(--qs-c-deep-slate);
  --qs-fg-on-accent:   var(--qs-c-deep-slate);

  --qs-line-subtle:    var(--qs-c-slate-hairline);
  --qs-line-default:   #47555F;
  --qs-line-strong:    var(--qs-c-slate-line);
  --qs-line-accent:    var(--qs-c-bronze);

  --qs-accent:         var(--qs-c-bronze);
  --qs-accent-hover:   var(--qs-c-bronze-light);
  --qs-accent-active:  var(--qs-c-sandstone);

  --qs-status-success-fg:   var(--qs-c-success-light);
  --qs-status-success-bg:   #2F3C34;
  --qs-status-success-line: var(--qs-c-success-light);
  --qs-status-warning-fg:   var(--qs-c-warning-light);
  --qs-status-warning-bg:   #403724;
  --qs-status-warning-line: var(--qs-c-warning-light);
  --qs-status-risk-fg:      var(--qs-c-risk-light);
  --qs-status-risk-bg:      #402E2B;
  --qs-status-risk-line:    var(--qs-c-risk-light);
  --qs-status-neutral-fg:   var(--qs-c-steel-light);
  --qs-status-neutral-bg:   var(--qs-c-slate-raised);
  --qs-status-neutral-line: var(--qs-c-slate-line);

  --qs-tick-color-minor: var(--qs-a-ivory-12);
  --qs-tick-color-major: var(--qs-c-bronze-light);

  --qs-focus-ring:     var(--qs-c-sandstone);
  --qs-shadow-card:    0 1px 2px rgba(0,0,0,0.32);
  --qs-elev-1: 0 1px 2px rgba(0,0,0,0.32);
  --qs-elev-2: 0 2px 6px rgba(0,0,0,0.36);
  --qs-elev-3: 0 8px 24px rgba(0,0,0,0.40);
  --qs-elev-4: 0 16px 48px rgba(0,0,0,0.52);
}

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT
   Bound only to tier 2. Changing a theme must never require touching these.
--------------------------------------------------------------------------- */
:root {
  /* Button */
  --qs-btn-height-sm: 32px;
  --qs-btn-height-md: 40px;
  --qs-btn-height-lg: 48px;
  --qs-btn-padding-x: var(--qs-space-5);
  --qs-btn-radius:    var(--qs-radius-sm);
  --qs-btn-font:      var(--qs-font-sans);
  --qs-btn-weight:    var(--qs-fw-bold);   /* 700 required: it is what makes the
                                              Deep-Slate-on-Bronze label legal   */
  --qs-btn-tracking:  0.02em;

  /* Field */
  --qs-field-height:   40px;
  --qs-field-radius:   var(--qs-radius-sm);
  --qs-field-border:   var(--qs-line-strong);
  --qs-field-bg:       var(--qs-bg-raised);
  --qs-field-padding-x:var(--qs-space-3);

  /* Card */
  --qs-card-radius:  var(--qs-radius-md);
  --qs-card-padding: var(--qs-space-5);
  --qs-card-bg:      var(--qs-bg-raised);
  --qs-card-border:  var(--qs-line-subtle);

  /* Table — the most important component in this system */
  --qs-table-row-height:    44px;
  --qs-table-row-height-sm: 36px;
  --qs-table-cell-padding-x:var(--qs-space-3);
  --qs-table-header-bg:     var(--qs-bg-subtle);
  --qs-table-header-fg:     var(--qs-fg-strong);
  --qs-table-line:          var(--qs-line-subtle);
  --qs-table-line-strong:   var(--qs-line-default);
  --qs-table-zebra:         transparent;  /* zebra is banned — see spec §7.3 */
  --qs-table-hover:         var(--qs-a-slate-04);
  --qs-table-total-bg:      var(--qs-bg-subtle);

  /* Nav */
  --qs-nav-height:  72px;
  --qs-nav-bg:      var(--qs-bg-canvas);
  --qs-sidebar-w:   256px;

  /* Chart */
  --qs-chart-grid:     var(--qs-line-subtle);
  --qs-chart-axis:     var(--qs-line-strong);
  --qs-chart-baseline: var(--qs-c-bronze);
  --qs-chart-series-1: var(--qs-c-deep-slate);
  --qs-chart-series-2: var(--qs-c-bronze);
  --qs-chart-series-3: var(--qs-c-steel);
  --qs-chart-series-4: var(--qs-c-sandstone);
  --qs-chart-series-5: var(--qs-c-success);
  --qs-chart-series-6: #6E7F8C;
}

/* ---------------------------------------------------------------------------
   BASE + LOGICAL PROPERTIES
   Every directional value in this system is a LOGICAL property. RTL is not a
   mirroring pass applied at the end — there is nothing to mirror, because
   nothing is expressed as left or right.
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--qs-bg-canvas);
  color: var(--qs-fg-default);
  font-family: var(--qs-font-text);
  font-size: var(--qs-fs-body);
  line-height: var(--qs-lh-body);
  font-weight: var(--qs-fw-regular);
  -webkit-font-smoothing: antialiased;
}

:where([dir="rtl"]) body,
:where([dir="rtl"]) { line-height: var(--qs-lh-arabic); }

/* Financial and quantitative figures are ALWAYS tabular and ALWAYS Western
   digits (0–9) in both locales — GCC commercial and contract practice. */
.qs-figure,
[data-qs="figure"],
.qs-table td.qs-num,
.qs-table th.qs-num {
  font-family: var(--qs-font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

:focus-visible {
  outline: var(--qs-focus-width) solid var(--qs-focus-ring);
  outline-offset: var(--qs-focus-offset);
  border-radius: var(--qs-radius-sm);
}

::selection {
  background: var(--qs-a-bronze-24);
  color: var(--qs-fg-strong);
}

@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;
  }
}

@media print {
  :root { --qs-elev-1: none; --qs-elev-2: none; --qs-elev-3: none; --qs-elev-4: none; }
  body { background: #fff; color: #000; }
  .qs-measure-rule { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ============================================================================
   QEYAS | قياس — Website components
   Layered on tokens/qeyas.tokens.css, which build.py prepends at build time so
   the site and the design system cannot drift apart.

   Rules enforced here and checked by build.py:
     · logical properties only — no left/right/margin-left/text-align:left
     · font-weight from {300,400,500,700,900} only
     · no border-radius above 4px except --qs-radius-pill
   ========================================================================== */

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
--------------------------------------------------------------------------- */
.qs-container {
  inline-size: 100%;
  max-inline-size: var(--qs-container);
  margin-inline: auto;
  padding-inline: var(--qs-space-5);
}
.qs-container--text { max-inline-size: var(--qs-container-text); }

@media (min-width: 768px) {
  .qs-container { padding-inline: var(--qs-space-6); }
}

.qs-section { padding-block: var(--qs-space-8); }
@media (min-width: 768px)  { .qs-section { padding-block: var(--qs-space-9); } }
.qs-section--tight { padding-block: var(--qs-space-7); }
.qs-section--subtle { background: var(--qs-bg-subtle); }

/* Inverse panels are a deliberate Deep Slate band in BOTH themes, exactly like
   the hero. Binding them to --qs-bg-inverse flips them to Ivory under dark
   theme while the foreground overrides below stay light — Ivory on Ivory, 1:1.
   In dark theme a hairline separates the panel from the canvas instead.
   These re-point the semantic foregrounds so nested components stay legible
   without any component needing to know it is on a dark ground. */
.qs-section--inverse,
.qs-cta-band {
  background: var(--qs-c-deep-slate);
  color: #E4E7EA;

  --qs-fg-default:  #E4E7EA;
  --qs-fg-strong:   var(--qs-c-ivory);
  --qs-fg-muted:    var(--qs-c-steel-light);
  --qs-fg-faint:    #8A939B;
  --qs-fg-accent:   var(--qs-c-bronze-light);
  --qs-line-subtle: var(--qs-c-slate-hairline);
  --qs-line-default:#47555F;
  --qs-line-strong: var(--qs-c-slate-line);
  --qs-card-bg:     var(--qs-c-slate-surface);
  --qs-tick-color-minor: var(--qs-a-ivory-12);
  --qs-tick-color-major: var(--qs-c-bronze-light);
  --qs-focus-ring:  var(--qs-c-sandstone);
}
[data-theme="dark"] .qs-section--inverse,
[data-theme="dark"] .qs-cta-band {
  border-block: 1px solid var(--qs-c-slate-hairline);
}

/* Limestone surfaces need their own foreground ramp. --qs-fg-accent (#8C6A38)
   and --qs-fg-muted (#666E75) are computed against Ivory; on Limestone they
   fall to 3.82:1 and 3.99:1 and stop meeting AA. These two derived values
   clear 4.5:1 on Limestone while staying inside the Bronze and Steel hues.
   In dark theme bg-subtle is Deep Slate raised, where the existing *-light
   ramps already pass, so the override resolves to a no-op.
   Worth promoting into tokens/qeyas.tokens.css — the gap is in the system,
   not in this site. */
:root,
[data-theme="light"] {
  --qs-fg-accent-subtle: #7C5E31;  /* 4.62:1 on Limestone */
  --qs-fg-muted-subtle:  #5C646A;  /* 4.64:1 on Limestone */
}
[data-theme="dark"] {
  --qs-fg-accent-subtle: var(--qs-c-bronze-light);  /* 5.38:1 on slate-surface */
  --qs-fg-muted-subtle:  var(--qs-c-steel-light);   /* 5.24:1 on slate-surface */
}
.qs-section--subtle,
.qs-page-hero,
.qs-footer {
  --qs-fg-accent: var(--qs-fg-accent-subtle);
  --qs-fg-muted:  var(--qs-fg-muted-subtle);
}

/* ---------------------------------------------------------------------------
   TYPE
--------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--qs-font-display);
  color: var(--qs-fg-strong);
  line-height: var(--qs-lh-heading);
  letter-spacing: var(--qs-ls-heading);
  margin: 0;
  text-wrap: balance;
}
h3, h4 { font-family: var(--qs-font-text); }
h1 { font-size: var(--qs-fs-h1);  font-weight: var(--qs-fw-black); }
h2 { font-size: var(--qs-fs-h2);  font-weight: var(--qs-fw-bold); }
h3 { font-size: var(--qs-fs-h3);  font-weight: var(--qs-fw-bold); }
h4 { font-size: var(--qs-fs-h4);  font-weight: var(--qs-fw-medium); }
p  { margin: 0; }

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 {
  line-height: var(--qs-lh-snug);
  letter-spacing: 0;
}

a { color: inherit; }

.qs-lede {
  font-size: var(--qs-fs-lead);
  line-height: var(--qs-lh-lead);
  color: var(--qs-fg-default);
  max-inline-size: 60ch;
}
:lang(ar) .qs-lede { line-height: 1.7; max-inline-size: 54ch; }

.qs-prose > * + * { margin-block-start: var(--qs-space-5); }
.qs-prose p { max-inline-size: var(--qs-measure); }
.qs-prose p:lang(ar) { max-inline-size: var(--qs-measure-ar); }
.qs-prose h2 {
  font-size: var(--qs-fs-h3);
  margin-block-start: var(--qs-space-7);
  font-family: var(--qs-font-text);
}
.qs-prose h2:first-child { margin-block-start: 0; }

/* ---------------------------------------------------------------------------
   EYEBROW — 12px sans, tracked, uppercase in Latin only
--------------------------------------------------------------------------- */
.qs-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--qs-space-2);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
  color: var(--qs-fg-accent);
  margin: 0;
}
.qs-eyebrow:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-eyebrow::before {
  content: "";
  inline-size: var(--qs-space-5);
  block-size: 1px;
  background: var(--qs-line-accent);
  flex: none;
}

/* ---------------------------------------------------------------------------
   MEASURE RULE — the signature element. One per visual group.
--------------------------------------------------------------------------- */
.qs-rule {
  border: 0;
  margin: 0;
  block-size: 9px;
  background-image: var(--qs-measure-rule);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 100%, auto 4px;
}
[dir="rtl"] .qs-rule { transform: scaleX(-1); }
.qs-rule--short { inline-size: 120px; }

/* ---------------------------------------------------------------------------
   BUTTONS — 700 weight is an accessibility requirement, not a style choice
--------------------------------------------------------------------------- */
.qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qs-space-2);
  block-size: var(--qs-btn-height-md);
  padding-inline: var(--qs-btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--qs-btn-radius);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-body-sm);
  font-weight: var(--qs-fw-bold);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--qs-dur-micro) var(--qs-ease-settle),
              border-color var(--qs-dur-micro) var(--qs-ease-settle),
              color var(--qs-dur-micro) var(--qs-ease-settle);
}
.qs-btn:lang(ar) { letter-spacing: 0; }
.qs-btn--primary   { background: var(--qs-accent); color: var(--qs-c-deep-slate); }
.qs-btn--primary:hover  { background: var(--qs-accent-hover); }
.qs-btn--primary:active { background: var(--qs-accent-active); }
.qs-btn--secondary { background: var(--qs-bg-inverse); color: var(--qs-fg-on-inverse); }
.qs-btn--secondary:hover { background: var(--qs-c-graphite); }
.qs-btn--tertiary  {
  background: transparent;
  color: var(--qs-fg-strong);
  border-color: var(--qs-line-strong);
}
.qs-btn--tertiary:hover { border-color: var(--qs-fg-strong); background: var(--qs-a-slate-04); }
.qs-btn--lg { block-size: var(--qs-btn-height-lg); font-size: var(--qs-fs-body); }
.qs-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* The loading state holds the button's width so nothing reflows. */
.qs-btn[data-state="loading"] { cursor: progress; }
.qs-btn__spinner {
  display: none;   /* only while submitting */
  inline-size: 14px; block-size: 14px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--qs-radius-pill);
  animation: qs-spin 640ms linear infinite;
}
.qs-btn[data-state="loading"] .qs-btn__spinner { display: block; }
@keyframes qs-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   ARROW LINK — the arrow points to the reading end in both directions
--------------------------------------------------------------------------- */
.qs-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--qs-space-2);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-body-sm);
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-accent);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  padding-block-end: 2px;
  transition: border-color var(--qs-dur-micro) var(--qs-ease-settle);
}
.qs-arrow-link::after {
  content: "→";
  transition: transform var(--qs-dur-base) var(--qs-ease-settle);
}
[dir="rtl"] .qs-arrow-link::after { content: "←"; }
.qs-arrow-link:hover { border-block-end-color: var(--qs-line-accent); }
.qs-arrow-link:hover::after { transform: translateX(3px); }
[dir="rtl"] .qs-arrow-link:hover::after { transform: translateX(-3px); }

.qs-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--qs-space-2);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-caption);
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-muted);
  text-decoration: none;
}
.qs-back-link::before { content: "←"; }
[dir="rtl"] .qs-back-link::before { content: "→"; }
.qs-back-link:hover { color: var(--qs-fg-strong); }

/* ---------------------------------------------------------------------------
   ICON BADGE — 24px grid, 1.5px stroke, butt caps, miter joins
--------------------------------------------------------------------------- */
.qs-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border: 1px solid var(--qs-line-default);
  border-radius: var(--qs-radius-md);
  background: var(--qs-bg-accent-soft);
  color: var(--qs-fg-strong);
}
.qs-icon-badge svg {
  inline-size: 24px;
  block-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.qs-icon-badge svg .qs-icon-accent { stroke: var(--qs-c-bronze); }

/* ---------------------------------------------------------------------------
   STAT
--------------------------------------------------------------------------- */
.qs-stat { display: flex; flex-direction: column; gap: var(--qs-space-2); }
.qs-stat__figure {
  font-family: var(--qs-font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--qs-fs-data-xl);
  font-weight: var(--qs-fw-bold);
  line-height: var(--qs-lh-tight);
  color: var(--qs-fg-strong);
  letter-spacing: 0;
}
.qs-stat__unit {
  font-size: 0.5em;
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-accent);
  margin-inline-start: var(--qs-space-1);
}
.qs-stat__label {
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-caption);
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-strong);
}
.qs-stat__basis {
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  color: var(--qs-fg-muted);
  line-height: var(--qs-lh-snug);
}
:lang(ar) .qs-stat__basis { line-height: 1.7; }

.qs-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qs-space-6) var(--qs-space-5);
}
@media (min-width: 1024px) { .qs-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.qs-stats-grid > * { padding-inline-start: var(--qs-space-4); border-inline-start: 1px solid var(--qs-line-strong); }

/* ---------------------------------------------------------------------------
   CARDS
--------------------------------------------------------------------------- */
.qs-card {
  display: flex;
  flex-direction: column;
  background: var(--qs-card-bg);
  border: 1px solid var(--qs-card-border);
  border-radius: var(--qs-card-radius);
  box-shadow: var(--qs-elev-1);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--qs-dur-base) var(--qs-ease-settle),
              border-color var(--qs-dur-base) var(--qs-ease-settle);
}
a.qs-card:hover { box-shadow: var(--qs-elev-2); border-color: var(--qs-line-strong); }
.qs-card__body { padding: var(--qs-card-padding); display: flex; flex-direction: column; gap: var(--qs-space-3); flex: 1; }
.qs-card__meta {
  display: flex;
  align-items: center;
  gap: var(--qs-space-3);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
  color: var(--qs-fg-muted);
  flex-wrap: wrap;
}
.qs-card__meta:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-card__meta .qs-year {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--qs-fg-accent);
}
.qs-card__title { font-size: var(--qs-fs-h4); font-weight: var(--qs-fw-bold); font-family: var(--qs-font-text); }
.qs-card__text { font-size: var(--qs-fs-body-sm); color: var(--qs-fg-default); }
.qs-card__foot { margin-block-start: auto; padding-block-start: var(--qs-space-2); }

/* Visual holder — swap the <svg> for <img> without touching layout. */
.qs-visual {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--qs-c-deep-slate);
  border-block-end: 1px solid var(--qs-line-subtle);
}
.qs-visual > svg, .qs-visual > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.qs-visual--wide { aspect-ratio: 21 / 9; }
.qs-visual--square { aspect-ratio: 4 / 5; }

.qs-cards-grid { display: grid; gap: var(--qs-space-5); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .qs-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qs-cards-grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* First project spans the full row on desktop */
@media (min-width: 768px) {
  .qs-cards-grid--feature > .qs-card:first-child { grid-column: span 2; }
  .qs-cards-grid--feature > .qs-card:first-child .qs-visual { aspect-ratio: 21 / 9; }
  .qs-cards-grid--feature > .qs-card:first-child .qs-card__title { font-size: var(--qs-fs-h3); }
}

/* ---------------------------------------------------------------------------
   SECTION HEAD
--------------------------------------------------------------------------- */
.qs-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--qs-space-3);
  margin-block-end: var(--qs-space-7);
  max-inline-size: 62ch;
}

/* ---------------------------------------------------------------------------
   HEADER — fixed, 72px
--------------------------------------------------------------------------- */
.qs-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--qs-z-sticky);
  block-size: var(--qs-nav-height);
  background: var(--qs-nav-bg);
  border-block-end: 1px solid var(--qs-line-subtle);
  transition: box-shadow var(--qs-dur-base) var(--qs-ease-settle);
}
.qs-header[data-scrolled="true"] { box-shadow: var(--qs-elev-1); }
.qs-header__inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--qs-space-5);
}
.qs-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--qs-space-3);
  text-decoration: none;
  color: var(--qs-fg-strong);
  flex: none;
}
.qs-brand svg { inline-size: 32px; block-size: 32px; flex: none; }
.qs-brand__name {
  font-family: var(--qs-font-display);
  font-size: 1.25rem;
  font-weight: var(--qs-fw-black);
  letter-spacing: 0.04em;
  line-height: 1;
}
.qs-brand__name:lang(ar) { letter-spacing: 0; font-size: 1.4rem; }

.qs-nav { display: none; align-items: center; gap: var(--qs-space-5); margin-inline-start: auto; }
@media (min-width: 1024px) { .qs-nav { display: flex; } }
.qs-nav a {
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-body-sm);
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-default);
  text-decoration: none;
  padding-block: var(--qs-space-2);
  border-block-end: 2px solid transparent;
  transition: color var(--qs-dur-micro) var(--qs-ease-settle),
              border-color var(--qs-dur-micro) var(--qs-ease-settle);
}
.qs-nav a:hover { color: var(--qs-fg-strong); }
.qs-nav a[aria-current="page"] { color: var(--qs-fg-strong); border-block-end-color: var(--qs-c-bronze); }

.qs-header__actions { display: flex; align-items: center; gap: var(--qs-space-3); margin-inline-start: auto; }
@media (min-width: 1024px) { .qs-header__actions { margin-inline-start: 0; } }
.qs-header__cta { display: none; }
@media (min-width: 1024px) { .qs-header__cta { display: inline-flex; } }

/* Language + theme controls */
.qs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 36px;
  block-size: 32px;
  padding-inline: var(--qs-space-2);
  border: 1px solid var(--qs-line-default);
  border-radius: var(--qs-radius-sm);
  background: transparent;
  color: var(--qs-fg-default);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--qs-dur-micro) var(--qs-ease-settle),
              color var(--qs-dur-micro) var(--qs-ease-settle);
}
.qs-toggle:lang(ar) { letter-spacing: 0; }
.qs-toggle:hover { border-color: var(--qs-fg-strong); color: var(--qs-fg-strong); }
.qs-toggle svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.qs-menu-btn { display: inline-flex; }
@media (min-width: 1024px) { .qs-menu-btn { display: none; } }

/* ---------------------------------------------------------------------------
   MOBILE NAV OVERLAY — enters from the reading-origin edge
--------------------------------------------------------------------------- */
.qs-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--qs-z-drawer);
  visibility: hidden;
}
.qs-mobile-nav[data-open="true"] { visibility: visible; }
.qs-mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: var(--qs-bg-scrim);
  opacity: 0;
  transition: opacity var(--qs-dur-enter) var(--qs-ease-settle);
}
.qs-mobile-nav[data-open="true"] .qs-mobile-nav__scrim { opacity: 1; }
.qs-mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(88vw, 380px);
  background: var(--qs-bg-canvas);
  border-inline-end: 1px solid var(--qs-line-default);
  padding: var(--qs-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--qs-space-5);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--qs-dur-enter) var(--qs-ease-settle);
}
[dir="rtl"] .qs-mobile-nav__panel { transform: translateX(100%); }
.qs-mobile-nav[data-open="true"] .qs-mobile-nav__panel { transform: translateX(0); }
.qs-mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--qs-space-4); }
.qs-mobile-nav__links { display: flex; flex-direction: column; }
.qs-mobile-nav__links a {
  font-family: var(--qs-font-text);
  font-size: var(--qs-fs-h4);
  font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-strong);
  text-decoration: none;
  padding-block: var(--qs-space-3);
  border-block-end: 1px solid var(--qs-line-subtle);
}
.qs-mobile-nav__links a[aria-current="page"] { color: var(--qs-fg-accent); }
.qs-mobile-nav__contact {
  display: flex;
  flex-direction: column;
  gap: var(--qs-space-2);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-body-sm);
}
.qs-mobile-nav__contact a { color: var(--qs-fg-default); text-decoration: none; }
.qs-mobile-nav__contact a:hover { color: var(--qs-fg-accent); }

body[data-nav-open="true"] { overflow: hidden; }

/* ---------------------------------------------------------------------------
   HERO
--------------------------------------------------------------------------- */
.qs-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: calc(100svh - var(--qs-nav-height));
  padding-block: var(--qs-space-9);
  background: var(--qs-c-deep-slate);
  color: var(--qs-c-ivory);
  overflow: hidden;
}
.qs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.qs-hero__bg svg, .qs-hero__bg img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
}
/* Scrim keeps headline contrast above 12:1 whatever sits behind it. */
.qs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(35, 48, 59, 0.72);
}
.qs-hero__inner { position: relative; z-index: 2; inline-size: 100%; }
.qs-hero__content { max-inline-size: 50rem; display: flex; flex-direction: column; gap: var(--qs-space-5); }
/* On a short viewport the hero drops one step in the type scale rather than
   overflowing — the primary CTA must stay above the fold. */
@media (max-height: 820px) {
  .qs-hero { padding-block: var(--qs-space-7); }
  .qs-hero h1 { font-size: var(--qs-fs-h1); }
}
.qs-hero__eyebrow { color: var(--qs-c-sandstone); }
.qs-hero__eyebrow::before { background: var(--qs-c-sandstone); }
.qs-hero h1 {
  font-size: var(--qs-fs-hero);
  font-weight: var(--qs-fw-black);
  letter-spacing: var(--qs-ls-hero);
  color: var(--qs-c-ivory);
}
:lang(ar) .qs-hero h1 { letter-spacing: 0; line-height: 1.25; }
.qs-hero__lede { font-size: var(--qs-fs-lead); color: #E4E7EA; max-inline-size: 48ch; line-height: var(--qs-lh-lead); }
:lang(ar) .qs-hero__lede { line-height: 1.75; max-inline-size: 44ch; }
.qs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-space-4); margin-block-start: var(--qs-space-2); }
.qs-hero__actions .qs-arrow-link { color: var(--qs-c-bronze-light); }
.qs-hero__rule { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2; }

/* ---------------------------------------------------------------------------
   PAGE HERO — inner pages
--------------------------------------------------------------------------- */
.qs-page-hero {
  padding-block: var(--qs-space-8) var(--qs-space-7);
  border-block-end: 1px solid var(--qs-line-subtle);
  background: var(--qs-bg-subtle);
}
@media (min-width: 768px) { .qs-page-hero { padding-block: var(--qs-space-9) var(--qs-space-8); } }
.qs-page-hero__content { display: flex; flex-direction: column; gap: var(--qs-space-4); max-inline-size: 60ch; }
.qs-page-hero h1 { font-size: var(--qs-fs-h1); }
.qs-page-hero__actions { margin-block-start: var(--qs-space-2); display: flex; flex-wrap: wrap; gap: var(--qs-space-4); }

/* ---------------------------------------------------------------------------
   SPLIT — image and text
--------------------------------------------------------------------------- */
.qs-split { display: grid; gap: var(--qs-space-6); align-items: start; }
@media (min-width: 1024px) {
  .qs-split { grid-template-columns: 1fr 1fr; gap: var(--qs-space-8); }
  .qs-split--sticky > :first-child {
    position: sticky;
    inset-block-start: calc(var(--qs-nav-height) + var(--qs-space-6));
  }
}
.qs-split__text { display: flex; flex-direction: column; gap: var(--qs-space-4); }

/* ---------------------------------------------------------------------------
   EXPERTISE LIST
--------------------------------------------------------------------------- */
.qs-service {
  display: grid;
  gap: var(--qs-space-4);
  padding-block: var(--qs-space-6);
  border-block-end: 1px solid var(--qs-line-subtle);
}
.qs-service:last-child { border-block-end: 0; }
@media (min-width: 640px) { .qs-service { grid-template-columns: 44px 1fr; gap: var(--qs-space-5); } }
.qs-service__body { display: flex; flex-direction: column; gap: var(--qs-space-3); }
.qs-service__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-space-3);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
  color: var(--qs-fg-muted);
}
.qs-service__meta:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-service__meta .qs-service__period { color: var(--qs-fg-accent); }
.qs-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--qs-space-2); }
.qs-outcomes li {
  position: relative;
  padding-inline-start: var(--qs-space-5);
  font-size: var(--qs-fs-body-sm);
  color: var(--qs-fg-default);
}
.qs-outcomes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: var(--qs-space-3);
  block-size: 1px;
  background: var(--qs-c-bronze);
}

/* ---------------------------------------------------------------------------
   PLAIN LISTS — credentials, standards, principles
--------------------------------------------------------------------------- */
.qs-def-grid { display: grid; gap: var(--qs-space-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .qs-def-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qs-def-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.qs-def {
  display: flex;
  flex-direction: column;
  gap: var(--qs-space-2);
  padding-block-start: var(--qs-space-4);
  border-block-start: 2px solid var(--qs-line-accent);
}
.qs-def__name { font-family: var(--qs-font-text); font-size: var(--qs-fs-h4); font-weight: var(--qs-fw-bold); color: var(--qs-fg-strong); }
.qs-def__org  { font-family: var(--qs-font-sans); font-size: var(--qs-fs-caption); color: var(--qs-fg-muted); }
.qs-def__desc { font-size: var(--qs-fs-body-sm); color: var(--qs-fg-default); }

.qs-principle {
  display: flex; flex-direction: column; gap: var(--qs-space-3);
  padding: var(--qs-space-5);
  background: var(--qs-card-bg);
  border: 1px solid var(--qs-card-border);
  border-radius: var(--qs-card-radius);
}
.qs-principle__num {
  font-family: var(--qs-font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-bold);
  color: var(--qs-fg-accent);
  letter-spacing: var(--qs-ls-label);
}

/* ---------------------------------------------------------------------------
   ARTICLE ROW
--------------------------------------------------------------------------- */
.qs-article-row {
  display: grid;
  gap: var(--qs-space-3);
  padding-block: var(--qs-space-6);
  border-block-end: 1px solid var(--qs-line-subtle);
  text-decoration: none;
  transition: background-color var(--qs-dur-micro) var(--qs-ease-settle);
}
@media (min-width: 768px) { .qs-article-row { grid-template-columns: 12rem 1fr; gap: var(--qs-space-6); } }
.qs-article-row:hover .qs-article-row__title { color: var(--qs-fg-accent); }
.qs-article-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--qs-space-2) var(--qs-space-3);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-label);
  font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label);
  text-transform: uppercase;
  color: var(--qs-fg-muted);
  align-content: start;
}
.qs-article-row__meta:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-article-row__body { display: flex; flex-direction: column; gap: var(--qs-space-2); }
.qs-article-row__title {
  font-family: var(--qs-font-text);
  font-size: var(--qs-fs-h3);
  font-weight: var(--qs-fw-bold);
  color: var(--qs-fg-strong);
  transition: color var(--qs-dur-micro) var(--qs-ease-settle);
}
.qs-article-row__excerpt { font-size: var(--qs-fs-body-sm); color: var(--qs-fg-default); max-inline-size: 62ch; }

.qs-featured-article {
  display: grid; gap: var(--qs-space-5);
  padding: var(--qs-space-6);
  background: var(--qs-card-bg);
  border: 1px solid var(--qs-card-border);
  border-radius: var(--qs-card-radius);
  text-decoration: none;
}
@media (min-width: 1024px) { .qs-featured-article { grid-template-columns: 1.4fr 1fr; gap: var(--qs-space-7); align-items: center; } }

/* ---------------------------------------------------------------------------
   CASE STUDY DETAIL
--------------------------------------------------------------------------- */
.qs-project-hero { position: relative; background: var(--qs-c-deep-slate); color: var(--qs-c-ivory); }
.qs-project-hero__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
.qs-project-hero__bg svg, .qs-project-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.qs-project-hero__inner { position: relative; z-index: 1; padding-block: var(--qs-space-7) var(--qs-space-8); display: flex; flex-direction: column; gap: var(--qs-space-4); }
@media (min-width: 768px) { .qs-project-hero__inner { padding-block: var(--qs-space-8) var(--qs-space-9); } }
.qs-project-hero h1 { color: var(--qs-c-ivory); max-inline-size: 22ch; }
.qs-project-hero .qs-back-link { color: var(--qs-c-steel-light); }
.qs-project-hero .qs-back-link:hover { color: var(--qs-c-ivory); }
.qs-project-hero__summary { font-size: var(--qs-fs-lead); color: #E4E7EA; max-inline-size: 52ch; line-height: var(--qs-lh-lead); }
:lang(ar) .qs-project-hero__summary { line-height: 1.75; }
.qs-project-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--qs-space-5);
  margin-block-start: var(--qs-space-3);
  padding-block-start: var(--qs-space-4);
  border-block-start: 1px solid var(--qs-c-slate-hairline);
}
.qs-fact { display: flex; flex-direction: column; gap: var(--qs-space-1); }
.qs-fact__label {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-label); font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label); text-transform: uppercase; color: var(--qs-c-steel-light);
}
.qs-fact__label:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-fact__value { font-family: var(--qs-font-sans); font-size: var(--qs-fs-body-sm); font-weight: var(--qs-fw-medium); color: var(--qs-c-ivory); }

.qs-narrative { display: flex; flex-direction: column; gap: var(--qs-space-7); }
.qs-narrative__block { display: grid; gap: var(--qs-space-3); }
@media (min-width: 1024px) { .qs-narrative__block { grid-template-columns: 14rem 1fr; gap: var(--qs-space-6); } }
.qs-narrative__heading {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-label); font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label); text-transform: uppercase; color: var(--qs-fg-accent);
}
.qs-narrative__heading:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-narrative__body { font-size: var(--qs-fs-body); max-inline-size: var(--qs-measure); }
.qs-narrative__body:lang(ar) { max-inline-size: var(--qs-measure-ar); }

/* The panel sits on bronze-at-12% (light) / bronze-at-24% (dark), which
   composites to #F2EBDF and #47463F. The standard accent drops to 4.18:1 and
   4.39:1 on those; these two clear 4.5:1 while staying in the Bronze hue. */
.qs-outcome-panel {
  --qs-fg-accent: #846435;   /* 4.62:1 on #F2EBDF */
  display: flex; flex-direction: column; gap: var(--qs-space-3);
  padding: var(--qs-space-6);
  background: var(--qs-bg-accent-soft);
  border-inline-start: 3px solid var(--qs-c-bronze);
  border-radius: var(--qs-radius-md);
}
[data-theme="dark"] .qs-outcome-panel {
  --qs-fg-accent: #DCAE64;   /* 4.66:1 on #47463F */
}

/* ---------------------------------------------------------------------------
   CONTACT
--------------------------------------------------------------------------- */
.qs-contact-grid { display: grid; gap: var(--qs-space-7); align-items: start; }
@media (min-width: 1024px) { .qs-contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--qs-space-8); } }
.qs-contact-list { display: flex; flex-direction: column; gap: var(--qs-space-5); }
.qs-contact-item { display: flex; align-items: flex-start; gap: var(--qs-space-4); }
.qs-contact-item__body { display: flex; flex-direction: column; gap: var(--qs-space-1); }
.qs-contact-item__label {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-label); font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label); text-transform: uppercase; color: var(--qs-fg-muted);
}
.qs-contact-item__label:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-contact-item__value {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-body); font-weight: var(--qs-fw-medium);
  color: var(--qs-fg-strong); text-decoration: none;
}
a.qs-contact-item__value:hover { color: var(--qs-fg-accent); }
.qs-contact-item__value[dir="ltr"] { unicode-bidi: isolate; }

/* --qs-status-risk-fg in dark theme is calibrated against the Deep Slate
   canvas (4.76:1). This panel sits on --qs-bg-raised (#35434F), where it drops
   to 3.59:1 and validation messages stop meeting AA. Same hue, lifted. */
[data-theme="dark"] .qs-form-panel {
  --qs-status-risk-fg: #E59D90;   /* 4.64:1 on #35434F */
}
.qs-form-panel {
  padding: var(--qs-space-6);
  background: var(--qs-card-bg);
  border: 1px solid var(--qs-card-border);
  border-radius: var(--qs-card-radius);
  box-shadow: var(--qs-elev-1);
}
.qs-form,
.qs-form__fields { display: flex; flex-direction: column; gap: var(--qs-space-5); }
.qs-field { display: flex; flex-direction: column; gap: var(--qs-space-2); }
.qs-field__label {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-label); font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label); text-transform: uppercase; color: var(--qs-fg-strong);
}
.qs-field__label:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-field__input, .qs-field__textarea {
  inline-size: 100%;
  block-size: var(--qs-field-height);
  padding-inline: var(--qs-field-padding-x);
  background: var(--qs-bg-raised);
  border: 1px solid var(--qs-line-strong);
  border-radius: var(--qs-field-radius);
  font-family: var(--qs-font-text);
  font-size: var(--qs-fs-body-sm);
  color: var(--qs-fg-default);
  text-align: start;
}
.qs-field__textarea { block-size: auto; min-block-size: 8rem; padding-block: var(--qs-space-3); resize: vertical; line-height: var(--qs-lh-body); }
.qs-field__textarea:lang(ar) { line-height: var(--qs-lh-arabic); }
.qs-field__help  { font-family: var(--qs-font-sans); font-size: var(--qs-fs-caption); color: var(--qs-fg-muted); }
.qs-field__error {
  display: none;
  align-items: center;
  gap: var(--qs-space-2);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-caption);
  color: var(--qs-status-risk-fg);
}
/* Never colour alone — the error carries a glyph and a message. */
.qs-field__error::before { content: "▲"; font-size: 0.75em; }
.qs-field--invalid .qs-field__error { display: flex; }
.qs-field--invalid .qs-field__input,
.qs-field--invalid .qs-field__textarea { border-color: var(--qs-status-risk-line); }

.qs-form__status { display: none; flex-direction: column; gap: var(--qs-space-3); }
.qs-form__status[data-visible="true"] { display: flex; }
.qs-form__status-title { font-family: var(--qs-font-text); font-size: var(--qs-fs-h3); font-weight: var(--qs-fw-bold); color: var(--qs-fg-strong); }
.qs-form__status--error .qs-form__status-title { color: var(--qs-status-risk-fg); }
.qs-form[data-state="success"] .qs-form__fields,
.qs-form[data-state="success"] .qs-form__submit { display: none; }

/* ---------------------------------------------------------------------------
   CTA BAND
--------------------------------------------------------------------------- */
/* Ground and foregrounds are set with .qs-section--inverse at the top of this file. */
.qs-cta-band__inner {
  display: flex; flex-direction: column; gap: var(--qs-space-5);
  padding-block: var(--qs-space-8);
}
@media (min-width: 1024px) {
  .qs-cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--qs-space-8); }
}
.qs-cta-band h2 { color: var(--qs-c-ivory); max-inline-size: 20ch; }
.qs-cta-band__text { color: #E4E7EA; max-inline-size: 46ch; }
.qs-cta-band .qs-eyebrow { color: var(--qs-c-sandstone); }
.qs-cta-band .qs-eyebrow::before { background: var(--qs-c-sandstone); }

/* ---------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------- */
.qs-footer { background: var(--qs-bg-subtle); border-block-start: 1px solid var(--qs-line-subtle); }
.qs-footer__grid {
  display: grid; gap: var(--qs-space-6);
  padding-block: var(--qs-space-8) var(--qs-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .qs-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--qs-space-7); } }
.qs-footer__brand { display: flex; flex-direction: column; gap: var(--qs-space-3); max-inline-size: 40ch; }
.qs-footer__tagline { font-family: var(--qs-font-text); font-size: var(--qs-fs-h4); font-weight: var(--qs-fw-medium); color: var(--qs-fg-strong); }
.qs-footer__blurb { font-size: var(--qs-fs-body-sm); color: var(--qs-fg-default); }
.qs-footer__heading {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-label); font-weight: var(--qs-fw-medium);
  letter-spacing: var(--qs-ls-label); text-transform: uppercase; color: var(--qs-fg-muted);
  margin-block-end: var(--qs-space-3);
}
.qs-footer__heading:lang(ar) { text-transform: none; letter-spacing: 0; }
.qs-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--qs-space-2); }
.qs-footer__list a, .qs-footer__list span {
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-body-sm);
  color: var(--qs-fg-default); text-decoration: none;
}
.qs-footer__list a:hover { color: var(--qs-fg-accent); }
.qs-footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--qs-space-3) var(--qs-space-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--qs-space-4) var(--qs-space-6);
  border-block-start: 1px solid var(--qs-line-default);
  font-family: var(--qs-font-sans); font-size: var(--qs-fs-caption); color: var(--qs-fg-muted);
}

/* ---------------------------------------------------------------------------
   UTILITIES
--------------------------------------------------------------------------- */
.qs-skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--qs-space-4);
  z-index: var(--qs-z-toast);
  padding: var(--qs-space-3) var(--qs-space-4);
  background: var(--qs-bg-inverse);
  color: var(--qs-fg-on-inverse);
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-body-sm);
  text-decoration: none;
  border-radius: var(--qs-radius-sm);
  transition: inset-block-start var(--qs-dur-base) var(--qs-ease-settle);
}
.qs-skip:focus { inset-block-start: var(--qs-space-4); }

.qs-main { padding-block-start: var(--qs-nav-height); }

/* Anchor targets must clear the fixed header, or an in-page jump lands with
   its heading hidden underneath it. Applies to the skip link, the expertise
   index and the case-study narrative index alike.
   scroll-behavior is already forced back to auto under prefers-reduced-motion
   by the token layer's reduced-motion block. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-block-start: calc(var(--qs-nav-height) + var(--qs-space-5)); }
.qs-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qs-num { font-variant-numeric: tabular-nums lining-nums; font-family: var(--qs-font-sans); }

/* Scroll reveals and every other scroll-linked effect live in
   qeyas.motion.css, which the build appends after this file. */


/* ============================================================================
   QEYAS | قياس — Motion extension
   ----------------------------------------------------------------------------
   The base system specifies motion for STATE CHANGE (120/200/320/480ms,
   cubic-bezier(0.2,0,0,1), no overshoot, nothing loops). It says nothing about
   SCROLL, so this file extends it rather than contradicting it:

     · the easing curve is unchanged — --qs-ease-settle everywhere
     · no overshoot, no bounce, no spring, no infinite iteration
     · discrete reveals are one-way and never replay
     · scrubbed effects are tied to scroll position, not to a duration, so the
       480ms ceiling does not apply to them — the user is the clock
     · every effect is decorative; content is fully readable with CSS animation
       unsupported, JS disabled, or prefers-reduced-motion set

   Two mechanisms:
     1. DISCRETE reveals — IntersectionObserver sets [data-in], CSS transitions
        the rest. One-way, so nothing re-animates when scrolling back up.
     2. SCRUBBED effects — native CSS scroll-driven animations (off the main
        thread) where supported; a rAF fallback writes --qs-p otherwise.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 — DISCRETE REVEALS
   Hidden only once JS confirms it can reveal them again (html[data-motion]),
   so a JS failure leaves every element visible.
--------------------------------------------------------------------------- */
[data-motion="on"] [data-anim] {
  opacity: 0;
  transition:
    opacity var(--qs-dur-settle) var(--qs-ease-settle),
    transform var(--qs-dur-settle) var(--qs-ease-settle),
    clip-path var(--qs-dur-settle) var(--qs-ease-settle);
  transition-delay: calc(var(--qs-stagger, 0) * 90ms);
  will-change: opacity, transform;
}

[data-motion="on"] [data-anim="up"]    { transform: translateY(16px); }
[data-motion="on"] [data-anim="lift"]  { transform: translateY(28px); }
[data-motion="on"] [data-anim="fade"]  { transform: none; }

/* Image / visual uncover. The wipe runs from the block-end edge, which reads
   the same in both directions, so no RTL special case is needed. */
[data-motion="on"] [data-anim="mask"] {
  clip-path: inset(0 0 100% 0);
  transform: none;
}

/* The Measure Mark draws along its own axis. The rule already carries
   scaleX(-1) in RTL, so this wipe flips with it and still reads from the
   reading origin — exactly as the tick scale is specified to. */
[data-motion="on"] [data-anim="draw"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 720ms var(--qs-ease-settle);
  transition-delay: calc(var(--qs-stagger, 0) * 90ms);
}

[data-motion="on"] [data-anim][data-in="true"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Once revealed, drop the compositor hint. */
[data-motion="on"] [data-anim][data-in="true"] { will-change: auto; }

/* ---------------------------------------------------------------------------
   2 — SCRUBBED: HERO PARALLAX
   The hero visual drifts slower than the page. Kept deliberately small: this
   is depth, not a ride. The scrim and text never move.
--------------------------------------------------------------------------- */
.qs-hero__bg,
.qs-project-hero__bg {
  /* JS fallback writes --qs-p (0 → 1) across the section's view range. */
  transform: translate3d(0, calc((var(--qs-p, 0) - 0.5) * 7%), 0) scale(1.08);
}

@supports (animation-timeline: view()) {
  .qs-hero__bg,
  .qs-project-hero__bg {
    transform: none;
    animation: qs-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes qs-parallax {
  from { transform: translate3d(0, -3.5%, 0) scale(1.08); }
  to   { transform: translate3d(0,  3.5%, 0) scale(1.08); }
}

/* ---------------------------------------------------------------------------
   3 — SCRUBBED: CARD VISUAL DEPTH
   Project and article visuals scale very gently as they cross the viewport.
   1.00 → 1.06 — enough to feel alive, not enough to read as a zoom.
--------------------------------------------------------------------------- */
.qs-visual > svg,
.qs-visual > img {
  transform: scale(calc(1 + (var(--qs-p, 0) * 0.06)));
  transform-origin: center;
}

@supports (animation-timeline: view()) {
  .qs-visual > svg,
  .qs-visual > img {
    transform: none;
    animation: qs-visual-depth linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes qs-visual-depth {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Card hover depth — a rule-first system, so the border does the work and the
   shadow only separates. */
a.qs-card {
  transition:
    transform var(--qs-dur-base) var(--qs-ease-settle),
    box-shadow var(--qs-dur-base) var(--qs-ease-settle),
    border-color var(--qs-dur-base) var(--qs-ease-settle);
}
@media (hover: hover) {
  a.qs-card:hover { transform: translateY(-3px); box-shadow: var(--qs-elev-3); }
}

/* ---------------------------------------------------------------------------
   4 — PINNED SEQUENCE
   Applied only once JS has measured it (data-pin-ready), so without JS the
   section renders as an ordinary block with every step visible.
--------------------------------------------------------------------------- */
.qs-pin[data-pin-ready="true"] { padding-block: 0; }

.qs-pin[data-pin-ready="true"] .qs-pin__track {
  position: relative;
  block-size: 300vh;
}

.qs-pin[data-pin-ready="true"] .qs-pin__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--qs-nav-height) var(--qs-space-7);
  overflow: hidden;
}

/* Steps advance with scroll. Not a fade loop — each step settles once and
   holds until the sequence moves past it. */
.qs-pin[data-pin-ready="true"] .qs-pin__step {
  opacity: 0.18;
  transform: translateY(10px);
  transition:
    opacity var(--qs-dur-enter) var(--qs-ease-settle),
    transform var(--qs-dur-enter) var(--qs-ease-settle);
}
.qs-pin[data-pin-ready="true"] .qs-pin__step[data-active="true"] {
  opacity: 1;
  transform: none;
}
/* Steps already passed stay legible rather than dimming back out. */
.qs-pin[data-pin-ready="true"] .qs-pin__step[data-passed="true"] {
  opacity: 1;
  transform: none;
}

/* Progress read-out along the bottom of the stage — the Measure Mark used as
   an actual measurement, which is what the brand says it is for. */
.qs-pin[data-pin-ready="true"] .qs-pin__progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 9px;
  background-image: var(--qs-measure-rule);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 100%, auto 4px;
  clip-path: inset(0 calc((1 - var(--qs-p, 0)) * 100%) 0 0);
}
[dir="rtl"] .qs-pin[data-pin-ready="true"] .qs-pin__progress { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   5 — SCROLL-LINKED ACTIVE STATE
   Used by the expertise list and the case-study narrative index. The active
   item is marked by weight and a Bronze rule, never by colour alone.
--------------------------------------------------------------------------- */
.qs-index { display: none; }
@media (min-width: 1024px) {
  .qs-index {
    display: flex;
    flex-direction: column;
    gap: var(--qs-space-1);
    margin-block-start: var(--qs-space-5);
    padding-block-start: var(--qs-space-4);
    border-block-start: 1px solid var(--qs-line-subtle);
  }
}
.qs-index__item {
  display: flex;
  align-items: baseline;
  gap: var(--qs-space-3);
  padding-block: var(--qs-space-2);
  padding-inline-start: var(--qs-space-4);
  border-inline-start: 2px solid transparent;
  font-family: var(--qs-font-sans);
  font-size: var(--qs-fs-caption);
  font-weight: var(--qs-fw-regular);
  color: var(--qs-fg-muted);
  text-decoration: none;
  transition:
    color var(--qs-dur-base) var(--qs-ease-settle),
    border-color var(--qs-dur-base) var(--qs-ease-settle),
    padding-inline-start var(--qs-dur-base) var(--qs-ease-settle);
}
.qs-index__item[data-active="true"] {
  color: var(--qs-fg-strong);
  font-weight: var(--qs-fw-medium);
  border-inline-start-color: var(--qs-c-bronze);
  padding-inline-start: var(--qs-space-5);
}
.qs-index__num {
  font-variant-numeric: tabular-nums;
  font-size: var(--qs-fs-label);
  color: var(--qs-fg-accent);
}

/* The expertise list item currently in view lifts its own leading edge. */
.qs-service {
  transition: border-color var(--qs-dur-base) var(--qs-ease-settle);
}
.qs-service[data-active="true"] .qs-icon-badge {
  border-color: var(--qs-c-bronze);
  transition: border-color var(--qs-dur-base) var(--qs-ease-settle);
}

/* ---------------------------------------------------------------------------
   6 — HEADER CONDENSE
   The header tightens once the page has moved. Height is the only thing that
   changes, so nothing reflows around it.
--------------------------------------------------------------------------- */
.qs-header {
  transition:
    block-size var(--qs-dur-base) var(--qs-ease-settle),
    box-shadow var(--qs-dur-base) var(--qs-ease-settle),
    background-color var(--qs-dur-base) var(--qs-ease-settle);
}
@media (min-width: 1024px) {
  .qs-header[data-scrolled="true"] { block-size: 60px; }
}

/* Reading progress along the header's bottom edge. */
.qs-header__progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--qs-c-bronze);
  transform: scaleX(var(--qs-read, 0));
  transform-origin: left center;
  opacity: 0;
  transition: opacity var(--qs-dur-base) var(--qs-ease-settle);
}
[dir="rtl"] .qs-header__progress { transform-origin: right center; }
.qs-header[data-scrolled="true"] .qs-header__progress { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .qs-header__progress {
    transform: scaleX(0);
    animation: qs-read linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes qs-read {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
   7 — REDUCED MOTION
   Everything above is decoration. Turn all of it off and the page must be
   complete, static and fully legible.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] [data-anim],
  [data-motion="on"] [data-anim][data-in="true"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .qs-hero__bg,
  .qs-project-hero__bg,
  .qs-visual > svg,
  .qs-visual > img {
    transform: none !important;
    animation: none !important;
  }
  a.qs-card:hover { transform: none; }
  .qs-pin[data-pin-ready="true"] .qs-pin__step,
  .qs-pin[data-pin-ready="true"] .qs-pin__step[data-active="true"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .qs-header__progress { animation: none !important; }
}