/* ============================================================================
   RANCO — Concept E · DATUM
   The second premium register, and the dark one: not Ajyal's cinematic warmth
   (A/B) and not D's premium-LIGHT counterpoint — a quiet, monochrome-luxury
   dark. Near-black ground throughout the body of the page, vast air, hairline
   rules, ONE metallic-cool accent (a steel/silver-blue sampled DOWN from the
   logo's own brand blue #328FCE, deliberately desaturated so it reads as
   engineering steel rather than "brand blue" — A already owns the vivid blue).
   Think engineering atelier / technical-drawing register, not oilfield sunset.
   A "datum" is itself an engineering term — a fixed reference plane or point
   everything else is measured against — which is the idea behind the name and
   behind the signature move below.

   THE LOGO CONSTRAINT, answered a third way. RANCO's mark is navy #223566 +
   blue #328FCE and is NEVER recoloured, so like A it cannot sit on the near-
   black shell directly. A already solved this with plain light paper bands
   top and bottom; E reuses exactly that trick (brief: "A's trick, executed
   more minimally") — no chip, no shadow, no border-radius card, just a flat
   paper band with a single hairline edge. The restraint is deliberate: this
   is the one place on the page allowed to be "undecorated", because the mark
   itself is the decoration.

   Signature move: oversized OUTLINED (stroke-only) numerals behind the seven-
   service index — a technical-drawing / blueprint annotation, not a filled
   ghost block (that is D's move, and a stroke-only numeral reads as a
   genuinely different object: an outline is a measurement mark, a fill is a
   watermark). Progressive enhancement via `-webkit-text-stroke` (shipped in
   every evergreen engine, including Firefox's compat shim); browsers with no
   stroke support fall back to a plain, low-opacity SOLID numeral — never
   invisible, never broken, just a different (still correct) look.

   Photography: 2 real RANCO photographs (of the licence-cleared set — see
   ASSET-LICENSES.md), each framed as a "plate": a full paper mat behind the
   photo, echoing the header/footer's own paper-plate language rather than a
   plain border — the closest thing to hanging a print in a drafting office.

   Every ratio below is generated by design/snippets/contrast-check.py — see
   the @contrast comments; never hand-typed (D-16).
   ========================================================================= */

:root{
  --ink:#0A0C10;             /* shell — near-black, never pure #000 */
  --ink-2:#12151A;           /* raised band (QHSE card ground, evidence-plate mat's shadow side) */
  --ink-3:#171B21;           /* card on dark */
  --paper:#F2F4F6;           /* header / footer / photo-mat ground — cool, steel-family */
  --paper-2:#E7EBEE;
  --txt:#ECEEF1;             /* on dark */                  /* @contrast --ink >=4.5 = 16.84:1 */
  --txt-dim:#777C81;         /* on dark, muted */            /* @contrast --ink >=4.5 = 4.65:1 */
  --txt-faint:#5F6367;       /* on dark, decorative */       /* @contrast --ink >=3.0 = 3.23:1 */
  --ink-txt:#14171C;         /* on paper */                  /* @contrast --paper >=4.5 = 16.29:1 */
  --ink-dim:#636F80;         /* on paper, muted (steel-tinted grey) */ /* @contrast --paper >=4.5 = 4.63: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 brand blue must carry it */ /* @contrast --paper >=4.5 = 4.93:1 */
  /* THE single metallic-cool accent — a steel/silver-blue derived from the
     logo's own blue, desaturated toward grey so it reads as engineering
     steel, not RANCO's vivid brand blue (that vividness is Concept A's). */
  --accent:#7E93AB;          /* steel — on-ink small text/decoration */ /* @contrast --ink >=4.5 = 6.20:1 */
  --accent-hi:#8297B0;       /* lifted steel — kickers, mono labels on ink */ /* @contrast --ink >=4.5 = 6.53:1 */
  --accent-link:#537097;     /* darker steel — text-safe AND >=3:1-decorative on the PAPER bands */ /* @contrast --paper >=4.5 = 4.61:1 */
  --accent-btn:#223566;      /* CTA ground = navy, white-text-safe */ /* @contrast white >=4.5 = 11.87:1 */
  --line:rgba(255,255,255,.10);   /* quieter than A's .13 — vast air, restrained ornament */
  --line-ink:rgba(20,23,28,.14);
}

body{ background:var(--ink) }

/* header + footer are the ONLY paper in this concept — same trick as
   Concept A, deliberately undecorated: no chip, no shadow, a single
   hairline edge is the whole treatment. */
#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);
  --header-accent:var(--navy) }
#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) }
/* the footer's top hairline carries the one accent, in its paper-safe darker
   shade (the on-ink --accent fails 3:1 on paper — see the on-paper hairline
   note under .plate-frame below; --accent-link is the value solved for it) */
#site-footer .foot-legal-row{ border-top-color:var(--accent-link) }

/* the mark needs no chip and no band beyond the paper it already sits on —
   deliberately no rule here at all beyond what .brand already does */

/* --------------------------------------------------------------- section bg */
#hero, #stats, #about, #services, #trust, #qhse, #careers, #contact{
  background:var(--ink);
}

/* ------------------------------------------------------------------ hero --- */
/* No photograph behind the hero on purpose — vast air on the near-black
   ground IS the move here, the way a big statement headline on paper is D's.
   A cinematic photo hero is A and B's territory. */
#hero{ padding-block-start:clamp(160px,20vh,232px); padding-block-end:clamp(88px,11vh,132px) }
@media (max-height:820px){
  #hero{ padding-block-start:clamp(110px,15vh,160px); padding-block-end:clamp(48px,7vh,80px) }
}
.hero-e-in{ max-width:1080px }
#hero .kicker{ color:var(--accent-hi) }
#hero .kicker::after{ background:var(--accent); opacity:1; width:44px }
.hero-h-e{ color:var(--txt); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(2.2rem, min(7.2vw, 9.8vh), 5.6rem); line-height:1.06;
  max-width:18ch; text-wrap:balance }
.hero-sub-e{ margin-top:clamp(24px,3vw,32px); max-width:54ch; color:var(--txt-dim);
  font-size:clamp(1.02rem,1.3vw,1.16rem); line-height:1.7 }
.hero-actions-e{ margin-top:clamp(34px,4vw,42px); display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.hero-tagline-e{ margin-top:clamp(28px,3.5vw,38px); color:var(--txt-dim); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase }

/* Primary CTA — a solid PAPER pill (near-black text) rather than any of the
   other concepts' navy/orange/blue solids. On a near-black page a light
   button reads as confident and deliberate, and it echoes the header/
   footer's own "paper plate" language instead of introducing a fourth
   button colour to the house set. */
.btn-paper{ background:var(--paper); color:var(--ink-txt) }
.btn-paper:hover{ filter:brightness(.96); transform:translateY(-1px) }
.btn-ghost{ border-color:rgba(255,255,255,.32) }

/* --------------------------------------------------------------- stat band - */
#stats{ padding-block-start:clamp(52px,7vh,76px); padding-block-end:clamp(52px,7vh,76px);
  border-block:1px solid var(--line) }
#stats .stat em{ color:var(--accent-hi) }

/* ------------------------------------------------------------------ about -- */
#about{ padding-block-start:var(--pad-section-lg); padding-block-end:var(--pad-section-lg) }
#about .pull{ border-inline-start-color:var(--accent) }

/* photo "plate" — a full paper mat behind the photograph, not just a border.
   The closest thing on a screen to a print hung in a drafting office; reused
   for both the About and QHSE photographs so the treatment reads as one
   consistent idea, not a one-off. */
.plate-frame{ background:var(--paper); padding:14px; border-radius:2px }
.plate-frame figure{ overflow:hidden; overflow:clip; background:var(--paper-2) }
.plate-frame img{ width:100%; height:100%; object-fit:cover }
.plate-cap{ margin-top:14px; display:flex; justify-content:space-between; gap:8px 20px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-dim) }

/* --------------------------------------------------------------- services - */
/* No photo tiles on this index — the outline numeral occupies the same
   visual role a tile would, so the two are never run together (same reason
   D drops tiles for its own ghost numerals). */
#services{ padding-block-start:var(--pad-section); padding-block-end:var(--pad-section) }
.svc-index-e{ list-style:none }
.svc-row-e{ position:relative; overflow:clip; padding-block:clamp(2.1rem,4.6vw,3.4rem);
  border-top:1px solid var(--line) }
.svc-row-e:last-child{ border-bottom:1px solid var(--line) }
.svc-row-e .svc-i-e{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--accent-hi) }
.svc-row-e h3{ margin-top:12px; font-size:var(--step-2); font-weight:600; color:var(--txt);
  max-width:22ch; position:relative; transition:transform .2s var(--ease) }
.svc-row-e p{ margin-top:12px; max-width:56ch; color:var(--txt-dim); line-height:1.65;
  font-size:.96rem; position:relative }
.svc-row-e:hover h3{ transform:translateX(4px) }

/* SIGNATURE MOVE — the outline numeral. Fallback state (no stroke support):
   a plain, low-opacity SOLID numeral in the steel accent — never invisible,
   never a blank rectangle where a number should be. Enhanced state (stroke
   support, effectively every evergreen engine incl. Firefox's -webkit- shim):
   the fill drops to transparent and a 1.5px steel stroke draws the outline
   only — a technical-drawing annotation rather than a filled watermark.
   z-index:-1 is load-bearing exactly as it is on D's ghost numeral (playbook:
   z-index:0 on an absolutely-positioned element still paints ABOVE static
   in-flow siblings; only -1 sits behind) — proved with Playwright at every
   checked width, elementFromPoint() at the overlap resolves to the heading
   text, never the numeral. */
.svc-num-outline{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:.05em; inset-inline-start:-.04em;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(5.5rem, 12.5vw, 11.5rem); line-height:1;
  color:var(--accent); opacity:.16;               /* fallback: solid, low-opacity fill */
}
@supports (-webkit-text-stroke: 1px black){
  .svc-num-outline{
    color:transparent;
    -webkit-text-stroke:1.5px var(--accent);
    opacity:.55;
  }
}
@media (max-width:640px){
  .svc-num-outline{ font-size:clamp(4.5rem,28vw,6.5rem); opacity:.2 }
  @supports (-webkit-text-stroke: 1px black){ .svc-num-outline{ opacity:.6 } }
}
.svc-row-e:hover .svc-num-outline{ opacity:.26 }
@supports (-webkit-text-stroke: 1px black){
  .svc-row-e:hover .svc-num-outline{ opacity:.78 }
}

/* few-px scroll-linked drift on the numeral — the same enhancement D's own
   ghost numeral got in this pass, transform-only, @supports-gated so
   non-view-timeline browsers just keep the static numeral. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .svc-num-outline{
      animation:ranco-datum-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes ranco-datum-drift{ from{ transform:translateY(8px) } to{ transform:translateY(-8px) } }
  }
}

/* ------------------------------------------------------------------ trust - */
#trust{ padding-block-start:var(--pad-section); padding-block-end:var(--pad-section) }
.logo-tile{ border:1px solid transparent }

/* ------------------------------------------------------------------- qhse - */
#qhse{ padding-block-start:var(--pad-section-lg); padding-block-end:var(--pad-section-lg) }
#qhse .q-card{ border-inline-start-color:var(--accent) }
#qhse .q-card h3 i{ color:var(--accent-hi) }

/* --------------------------------------------------------------- careers -- */
#careers{ padding-block-start:var(--pad-section); padding-block-end:var(--pad-section) }

/* --------------------------------------------------------------- contact -- */
#contact{ padding-block-start:var(--pad-section); padding-block-end:var(--pad-section) }
.con-card{ border-color:var(--line) }
.con-card .mono{ color:var(--accent-hi) }