/* ============================================================================
   RANCO — Concept B · FIELD
   Warmest of the three, closest to Ajyal's sunset feel — but the accent is
   #D84800, sampled from the DEVELON orange on RANCO's OWN excavators, never
   Ajyal's crimson. The logo problem is solved with a white lockup chip in the
   header: the mark sits in its own small white card on the dark shell, so it
   is never touching the ink directly and is never recoloured.
   Signature move: the hero photo does a one-shot load-in settle (scale 1.06
   -> 1) under a warm multiply/screen relight, echoing Ajyal's own per-slide
   grade technique but in RANCO's fleet colour. One-shot, not scroll-driven,
   so it plays once and the photo is fully visible from frame one either way.
   Ratios generated by design/snippets/contrast-check.py (D-16).
   ========================================================================= */

:root{
  --ink:#0B0C0E;
  --ink-2:#120D0A;          /* raised band, warmed a shade toward the accent */
  --ink-3:#171310;
  --paper:#F3F5F8;
  --paper-2:#E8ECF1;
  --txt:#F1EEEA;            /* on dark, warmed off-white */  /* @contrast --ink >=4.5 = 16.92:1 */
  --txt-dim:#AAA49C;                                          /* @contrast --ink >=4.5 = 7.92:1 */
  --txt-faint:#7E7871;      /* decorative only */             /* @contrast --ink >=3.0 = 4.48:1 (below 4.5 — never body text) */
  --ink-txt:#17181B;
  --ink-dim:#4A5B7D;
  --navy:#223566;           /* logo. NEVER edited. */
  --blue:#328FCE;           /* logo. NEVER edited. */
  --blue-link:#1F6FA8;
  --accent:#D84800;         /* DEVELON orange, sampled from RANCO's own fleet */ /* @contrast --ink >=4.5 = 4.52:1 */
  --accent-hi:#F0783A;      /* lifted — kickers, small mono labels on dark */    /* @contrast --ink >=4.5 = 6.94:1 */
  --accent-btn:#B83A00;     /* solid button ground, white text */               /* @contrast white >=4.5 = 5.76:1 */
  --line:rgba(255,255,255,.13);
  --line-ink:rgba(23,24,27,.16);
}

body{ background:var(--ink) }

#top-bar{ --header-bg:var(--ink); --header-line:var(--line);
  --nav-txt:var(--txt-dim); --nav-txt-hover:#fff; --line-btn:var(--line); color:var(--txt) }
#site-footer{ --footer-line:var(--line); --footer-muted:var(--txt-dim); --footer-accent:var(--accent-hi);
  background:var(--ink-2); color:var(--txt) }
#site-footer .ibix-credit{ color:var(--footer-muted) }
/* the mark is never on ink directly — footer reuses the header's white
   lockup chip so the logo still gets a light ground on this dark band */
#site-footer .foot-logo{ background:#fff; border-radius:6px; padding:10px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.08) }

#hero{ background:var(--ink) }
.hero-scrim{ background:
  radial-gradient(72% 76% at 10% 48%, rgba(10,6,4,.86), rgba(10,6,4,0) 58%),
  linear-gradient(90deg, rgba(10,6,4,.9) 0%, rgba(10,6,4,.3) 46%, rgba(10,6,4,.04) 100%),
  linear-gradient(0deg, rgba(10,6,4,.62) 0%, rgba(10,6,4,0) 30%) }
.hero-media img{ filter:saturate(1.05) contrast(1.04) brightness(.9);
  transform:scale(1.05) }
.hero-warm{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(140,64,20,.18) 0%, rgba(110,48,16,.2) 55%, rgba(130,58,18,.22) 100%) }
.hero-glow{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:radial-gradient(46% 60% at 82% 20%, rgba(255,175,110,.5), rgba(200,110,50,.14) 45%, rgba(0,0,0,0) 74%) }
.hero-foot{ background:var(--ink-2); border-top-color:var(--line) }

/* one-shot settle on load — the signature move. Content is fully visible at
   every frame; only the crop scale moves. Skipped under reduced-motion so the
   image simply renders at its resting scale (base ibix-base.css already
   collapses all animation-duration to .001ms there — this rule only needs to
   supply the resting transform, not a second override). */
@media (prefers-reduced-motion: no-preference){
  .hero-media img{ animation:field-settle 3s cubic-bezier(.22,1,.36,1) both }
}
@keyframes field-settle{ from{ transform:scale(1.05) } to{ transform:scale(1) } }

#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 }