/* ============================================================================
   RANCO — Concept F · TRUE
   A structural twin of Concept E, Datum — same layout, same sections, same
   signature move — with ONE change: the accent stops being a desaturated
   "engineering steel" and becomes RANCO's OWN navy and blue, at full
   strength, on a navy-tinted dark ground instead of a neutral near-black.
   Brief, verbatim: "make the premium one make duplicate but in ranco theme
   colours." "True" as in showing RANCO's true (brand) colours, and as in
   the engineering sense — true to spec, plumb and true — which keeps it in
   the same register as E's "Datum" without re-using that word.

   WHAT DID NOT CHANGE FROM E (this is a token swap, not a redesign):
   layout, spacing, type scale, the paper header/footer bands (the logo's
   ground never changes), the photo "plate" treatment (still paper), the
   stroke-only outlined-numeral signature move, all copy, all animation.
   Everything below is either a token value or a comment describing one.

   WHAT DID CHANGE — the palette:
   - Shell: --ink is now #0C1730, RANCO's own deep navy (the value proven in
     the withdrawn 2026-07-31 dark coming-soon build), not E's neutral
     #0A0C10. This is what makes the ground read as "RANCO's dark" rather
     than generic dark. Raised panel --ink-2 is #12203F — the brand navy
     #223566 darkened, same precedent.
   - Accent: RANCO's own brand blue #328FCE, used at FULL strength for
     large/decorative elements (the outline-numeral stroke, hairline dashes,
     card rules) — this is Concept A's territory in the rest of the set, but
     here it sits on E's premium-dark structure instead of a cinematic shell.
   - Small text on the dark ground needs its own lift: --accent-hi is a
     lifted blue (#5CB3EF-class, the same class of value the withdrawn build
     verified) rather than the raw brand blue, because small mono labels
     (kickers, stat units, service ordinals) sit closer to the 4.5:1 text
     threshold than large decoration does — see the @contrast lines below,
     regenerated against THIS shell, not copied from the withdrawn build's
     different surface.

   THE LOGO CONSTRAINT — unchanged from E. RANCO's mark is navy #223566 +
   blue #328FCE and is NEVER recoloured, so it still cannot sit on the dark
   shell directly. Header and footer stay E's plain light paper bands,
   byte-identical: no chip, no shadow, a single hairline edge. The photo
   "plate" mat stays paper too, for the same reason the caption below it
   still needs on-dark contrast, not on-paper.

   Signature move — unchanged from E: oversized OUTLINED (stroke-only)
   numerals behind the seven-service index, `-webkit-text-stroke` with a
   plain low-opacity solid-fill fallback, `z-index:-1` load-bearing exactly
   as documented in E and D. Now drawn in the brand-blue accent instead of
   steel, so it reads as "RANCO's own technical drawing" rather than a
   neutral one.

   Every ratio below is generated by design/snippets/contrast-check.py
   against THIS file's own --ink/--paper, not copied from E or the withdrawn
   build — a shell this different in luminance genuinely shifts what clears
   4.5:1 (E's old --txt-dim measures 4.22:1 here, a real fail, which is why
   --txt-dim/--txt-faint both needed new values, not just new accent values).
   ========================================================================= */

:root{
  --ink:#0C1730;             /* shell — deep RANCO navy, NOT neutral black (brief) */
  --ink-2:#12203F;           /* raised panel — brand navy #223566, darkened */
  --ink-3:#182A4C;           /* card-on-dark step; declared for token-system parity, unused on this page — same as E's own --ink-3 */
  --paper:#F2F4F6;           /* header / footer / photo-mat ground — unchanged from E, the logo's ground doesn't change */
  --paper-2:#E7EBEE;
  --txt:#ECEEF1;             /* on dark */                  /* @contrast --ink >=4.5 = 15.30:1 */
  --txt-dim:#7E848C;         /* on dark, muted — re-solved for the new shell (E's #777C81 measures 4.22:1 here, a fail) */ /* @contrast --ink >=4.5 = 4.71:1 */
  --txt-faint:#646972;       /* on dark, decorative — re-solved for the new shell */ /* @contrast --ink >=3.0 = 3.22:1 */
  --ink-txt:#14171C;         /* on paper — unchanged, paper surface unchanged */ /* @contrast --paper >=4.5 = 16.29:1 */
  --ink-dim:#636F80;         /* on paper, muted — unchanged, paper surface unchanged */ /* @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.89:1 */
  /* THE accent — RANCO's OWN brand blue, full strength, not desaturated.
     Two shades because one value cannot serve both roles cleanly on this
     shell: the raw brand blue clears large/decorative easily (5.04:1, so it
     would even pass small text) but the LIFTED shade below gives small mono
     labels real headroom rather than sitting just over the line. */
  --accent:#328FCE;          /* brand blue, full strength — large/decorative (outline-numeral stroke, hairline dashes, card rules) */ /* @contrast --ink >=3.0 = 5.04:1 */
  --accent-hi:#5CB3EF;       /* lifted brand blue — kickers, mono labels, small text on ink */ /* @contrast --ink >=4.5 = 7.75:1 */
  --accent-link:#1F6FA8;     /* brand blue on the PAPER bands — footer hairline */ /* @contrast --paper >=4.5 = 4.89: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 — unchanged from E */
  --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 and Concept E, deliberately undecorated: no chip, no shadow, a
   single hairline edge is the whole treatment. Byte-identical to E; the
   logo's ground does not change between E and F. */
#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 accent, in its paper-safe brand-blue
   shade — the on-ink --accent-hi would also pass here, but --accent-link is
   the value already solved for on-paper use, same role E gave 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, unchanged from E, now drawn in
   RANCO's own brand blue. Fallback state (no stroke support): a plain,
   low-opacity SOLID numeral in the brand-blue 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 brand-blue 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 and E's own
   numeral (playbook: z-index:0 on an absolutely-positioned element still
   paints ABOVE static in-flow siblings; only -1 sits behind). */
.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 and
   E's own ghost numeral got, 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) }