/* ============================================================================
   RANCO — Concept A · NIGHTSHIFT
   Closest to Ajyal's own register: a dark cinematic shell, mono kickers, a
   numbered strip, a stat band. The ONE thing this concept resolves differently
   from Ajyal is the logo problem: RANCO's mark is navy #223566 + blue #328FCE
   and is NEVER recoloured, so it cannot sit on the near-black shell the rest
   of the page uses. Here the header AND footer are light "paper" bands — the
   mark gets its own ground, top and bottom, and everything between stays dark.
   Signature move: the stat band count-up, including one HONEST empty slot —
   RANCO has given no founding year, so this concept shows the cost of that
   gap rather than inventing one (see #stats below).
   Every ratio below is generated by design/snippets/contrast-check.py — see
   the @contrast comments; never hand-typed (D-16).
   ========================================================================= */

:root{
  --ink:#0B0C0E;            /* shell */                 /* @contrast --txt >=4.5 = 16.88:1 */
  --ink-2:#101216;          /* raised band */
  --ink-3:#16181D;          /* card on dark */
  --paper:#F3F5F8;          /* header / footer ground — cool, matches the brand's blue family */
  --paper-2:#E8ECF1;
  --txt:#EDEEF2;            /* on dark */                /* @contrast --ink >=4.5 = 16.88:1 */
  --txt-dim:#A7ADB6;        /* on dark, muted */          /* @contrast --ink >=4.5 = 8.66:1 */
  --txt-faint:#7B818B;      /* on dark, decorative */     /* @contrast --ink >=3.0 = 4.99:1 */
  --ink-txt:#17181B;        /* on paper */                /* @contrast --paper >=4.5 = 16.25:1 */
  --ink-dim:#4A5B7D;        /* on paper, muted (RANCO's own brand-navy-derived grey) */ /* @contrast --paper >=4.5 = 6.24:1 */
  --navy:#223566;           /* logo — road swoosh, truck, wordmark. NEVER edited. */
  --blue:#328FCE;           /* logo — bar/skyline motif, Arabic رانكو. NEVER edited. */
  --blue-link:#1F6FA8;      /* on-paper small text where blue must carry it */ /* @contrast --paper >=4.5 = 4.93:1 */
  --accent:#328FCE;         /* true brand blue, body-text-safe even on ink */  /* @contrast --ink >=4.5 = 5.55:1 */
  --accent-hi:#5CB3EF;      /* lifted blue — kickers, small mono labels on dark */ /* @contrast --ink >=4.5 = 8.53:1 */
  --accent-btn:#1F6FA8;     /* solid button ground, white text */ /* @contrast white >=4.5 = 5.39:1 */
  --line:rgba(255,255,255,.13);
  --line-ink:rgba(23,24,27,.16);
}

body{ background:var(--ink) }

/* header + footer are the ONLY paper in this concept — the mark's own ground */
#top-bar{ --header-bg:var(--paper); --header-line:var(--line-ink);
  --nav-txt:var(--ink-dim); --nav-txt-hover:var(--ink-txt); --line-btn:var(--line-ink) }
#site-footer{ --footer-line:var(--line-ink); --footer-muted:var(--ink-dim); --footer-accent:var(--navy);
  background:var(--paper); color:var(--ink-txt) }
#site-footer .ibix-credit{ color:var(--footer-muted) }

#hero{ background:var(--ink) }
.hero-scrim{ background:
  radial-gradient(70% 76% at 12% 46%, rgba(6,7,8,.86), rgba(6,7,8,0) 58%),
  linear-gradient(90deg, rgba(6,7,8,.92) 0%, rgba(6,7,8,.32) 46%, rgba(6,7,8,.05) 100%),
  linear-gradient(0deg, rgba(6,7,8,.6) 0%, rgba(6,7,8,0) 30%) }
.hero-media img{ filter:saturate(1.02) contrast(1.06) brightness(.82) }
.hero-foot{ background:var(--ink); border-top-color:var(--line) }

#stats{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
#about{ background:var(--ink-3) }
#services{ background:var(--ink) }
#trust{ background:var(--ink-2) }
#qhse{ background:var(--ink-3) }
#careers{ background:var(--ink) }
#contact{ background:var(--ink-2) }

.logo-tile{ border:1px solid transparent }

/* ---------------------------------------------------------------------------
   SIGNATURE MOVE — the stat band. Numbers count up on scroll-in
   (motion-kit.js's [data-count-to]); one slot is deliberately left unfilled
   because RANCO has not supplied a founding year. Dashed border + an
   em-dash instead of a number makes the gap a design fact, not a bug. */
.stat--pending b{ color:var(--txt-faint) }
.stat--pending{ border-inline-start-color:var(--txt-faint) }