/* ============================================================================
   RANCO — Concept D · SUMMIT
   The premium-minimal counterpoint to A/B/C's Ajyal cinematic register. Where
   A/B/C alternate dark shells against the light bands the logo forces, D never
   leaves the light ground at all — one continuous paper canvas, restrained
   navy ink, and exactly ONE further accent (RANCO's own brand blue, sampled
   from the logo's bar motif) used in five deliberate, static places and
   nowhere else:
     1. the hero kicker's trailing hairline
     2. the About pull-quote's left rule
     3. the evidence-plate photo frame (six-excavator line-up)
     4. the QHSE photo frame (toolbox-talk briefing)
     5. the footer's top hairline
   Everywhere else that shared.css would reach for --accent-hi (kickers, the
   stat band's <em>, the services' small ordinal, QHSE card index, contact
   labels) is pinned to navy instead, so the page reads as two colours plus a
   whisper of blue, never "blue everywhere". Display type is allowed larger
   than A/B/C on purpose (see .hero-h-d) — on a light ground with real air, a
   big statement headline IS the premium move, not a photograph.
   Signature move: an oversized ghost-numeral editorial index for the seven
   services (like a magazine contents page) — huge, near-invisible navy
   numerals sitting BEHIND each row's heading and copy. z-index:-1 on the
   numeral is load-bearing (playbook: z-index:0 on an absolutely-positioned
   element still paints above static in-flow siblings; only -1 sits behind).
   A small, fully-contrasted mono ordinal ("01") sits beside the heading for
   anyone who can't see the low-opacity ghost — the ghost is aria-hidden and
   decoration-only, never the only copy of the number.
   Ratios generated by design/snippets/contrast-check.py (D-16).
   ========================================================================= */

:root{
  --paper:#FAF9F6;
  --paper-2:#F1EEE8;
  --ink-txt:#14171D;                                          /* @contrast --paper >=4.5 = 17.05:1 */
  --ink-dim:#565F6D;                                          /* @contrast --paper >=4.5 = 6.13:1 */
  --navy:#223566;           /* logo + ink accent. NEVER edited as a logo asset. */ /* @contrast --paper >=4.5 = 11.27:1 */
  --blue:#328FCE;           /* logo. NEVER edited. Decorative/non-text use only. */ /* @contrast --paper >=3.0 = 3.35:1 (large/non-text only) */
  --blue-link:#1F6FA8;                                        /* @contrast --paper >=4.5 = 5.12:1 */
  --line-ink:rgba(20,23,29,.14);
  --accent:var(--blue);       /* the SINGLE hairline accent — five static uses, see header comment */
  --accent-hi:var(--navy);    /* everything shared.css would tint via --accent-hi stays ink navy */
  --accent-btn:var(--navy);
  /* D's own section-padding tier — the top of the shared scale "or beyond"
     (brief instruction): D breathes more than A/B/C, so every content
     section below uses this instead of shared.css's --pad-section /
     --pad-section-lg tiers. */
  --pad-d: clamp(7rem, 13vh, 10.5rem);
}

body{ background:var(--paper) }

#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) }
/* Accent use #5 — the footer's top hairline, in place of the usual --line-ink */
#site-footer .foot-legal-row{ border-top-color:var(--blue) }

/* the logo needs no chip and no band on this ground — deliberately no rule
   here at all beyond what .brand already does; that absence IS the point */

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

/* ------------------------------------------------------------------ hero --- */
#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-d-in{ max-width:1180px }
/* Accent use #1 — hero kicker's own hairline, blue instead of the shared
   default's currentColor-on-navy. Kicker text itself stays navy (readable,
   consistent with every other kicker on the page). */
#hero .kicker::after{ background:var(--blue); opacity:1; width:48px }
/* Measured 2026-08-05 (Playwright, 1920/1440/1366/1024/768/390): the manual
   <br> below deliberately forces the editorial two-line break ("Seven
   disciplines." / "One standard of work.") on desktop and tablet, where the
   widened container (above) and this max-width comfortably hold the longer
   second line (22ch) on one line at every checked width down to 768px. Below
   640px the container itself is narrower than that line needs at any
   readable size, so the <br> is hidden there instead (see .hero-br) and
   text-wrap:balance is left to find a clean natural break — the fixed break
   only ever applies where it's proven to fit. max-width raised 20ch -> 27ch:
   the old value was narrower than "One standard of work." itself (22ch) and
   forced a bad wrap regardless of container width. */
.hero-h-d{ color:var(--ink-txt); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(2.35rem, min(8.4vw, 11.5vh), 7.2rem); line-height:1.05;
  max-width:27ch; text-wrap:balance }
@media (max-width:640px){
  .hero-br{ display:none }
}
.hero-sub-d{ margin-top:clamp(26px,3vw,36px); max-width:52ch; color:var(--ink-dim);
  font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.7 }
.hero-actions-d{ margin-top:clamp(36px,4vw,44px); display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.hero-tagline-d{ margin-top:clamp(30px,3.5vw,40px); color:var(--ink-dim); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase }

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

/* ------------------------------------------------------------------ about -- */
#about{ padding-block-start:var(--pad-d); padding-block-end:calc(var(--pad-d) * .55) }
.about-d{ max-width:760px }
.about-d h2{ font-size:clamp(2.1rem, 3.6vw, 3.4rem); max-width:16ch; color:var(--ink-txt) }
.about-d .split-lead{ max-width:54ch }
.about-d .split-body{ max-width:60ch }
.about-d .pull{ border-inline-start-color:var(--accent) } /* accent use #2 */

/* ------------------------------------------------------------- evidence --- */
/* The standalone "evidence plate" — one full-measure framed photograph,
   captioned like an exhibit label, between About and the services index.
   This is the fleet photo the client's own facts call the strongest hero
   candidate; here it earns its place as proof rather than atmosphere,
   never full-bleed (1600px source ceiling). */
#evidence{ padding-block-start:0; padding-block-end:var(--pad-d) }
.evidence-frame{ border:1px solid var(--blue); padding:10px; border-radius:2px } /* accent use #3 */
.evidence-frame figure{ overflow:hidden; overflow:clip; background:var(--paper-2) }
.evidence-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1600/639 }
.evidence-cap{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:8px 24px; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim) }

/* --------------------------------------------------------------- services - */
#services{ padding-block-start:var(--pad-d); padding-block-end:var(--pad-d) }
#services .svc-head h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); max-width:20ch }
.svc-index-d{ list-style:none }
.svc-row-d{ position:relative; overflow:clip; padding-block:clamp(2.5rem,5.5vw,4.25rem);
  border-top:1px solid var(--line-ink) }
.svc-row-d:last-child{ border-bottom:1px solid var(--line-ink) }
.svc-row-d .svc-i-d{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  color:var(--navy) }
.svc-row-d h3{ margin-top:12px; font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:600;
  color:var(--ink-txt); max-width:22ch; position:relative }
.svc-row-d p{ margin-top:14px; max-width:56ch; color:var(--ink-dim); line-height:1.65;
  font-size:1rem; position:relative }
/* SIGNATURE MOVE — the ghost numeral. Anchored to the row's LEFT edge, under
   the heading, deliberately sized to sit partly behind "01"/"02"'s own
   glyphs — the classic editorial-index look only works if the heading
   genuinely overlaps the numeral, not merely shares the row with it.
   z-index:-1 is the whole trick: a z-index of 0 on this same absolutely-
   positioned element still paints ABOVE the row's own static in-flow
   heading/copy (the exact bug the playbook already shipped once on five
   other pages, all five caught only by measuring, never by reading the CSS);
   only -1 sits behind them. Proved with Playwright, not assumed: at every
   checked width (1920/1440/1366/1024/768/390) the heading's own bounding
   box overlaps the ghost's, and elementFromPoint() at the overlap resolves
   to the heading text, never the ghost span. */
.svc-num-ghost{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  top:.08em; inset-inline-start:-.05em;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(6rem, 13.5vw, 12.5rem); line-height:1;
  color:var(--navy); opacity:.07;
}
@media (max-width:640px){
  /* Measured 2026-08-05: at mobile's smaller footprint the same .07 opacity
     that reads clearly at desktop size all but disappeared (less ink area
     per glyph) — confirmed by screenshot, not assumed. Slightly larger +
     slightly stronger keeps the signature move visible on a phone too. */
  .svc-num-ghost{ font-size:clamp(5rem,30vw,7rem); opacity:.1 }
}

/* Animation pass, 2026-08-05 (later). Two small additions to the existing
   signature move — kept deliberately barely-there, per the brief ("D is the
   quiet one"): the row already fades/rises as a whole via `[data-stagger]`
   (shared.css/motion-kit.css — `.svc-row-d` is a direct child of the
   `data-stagger` list, so heading, copy AND the ghost numeral behind it all
   arrive together, no separate wiring needed). What was missing was any
   sense that the numeral has its own depth — added here as a few-px
   scroll-linked drift, transform-only, progressive enhancement via
   @supports so browsers with no view-timeline support (Firefox — no shipped
   support, D2) simply keep the static numeral they already had. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .svc-num-ghost{
      animation:ranco-ghost-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes ranco-ghost-drift{ from{ transform:translateY(10px) } to{ transform:translateY(-10px) } }
  }
}

/* Hover — a quiet discovery interaction: the heading nudges right and the
   ghost numeral brightens a shade, never the reverse of "barely-there". */
.svc-row-d h3{ transition:transform .2s var(--ease) }
.svc-row-d:hover h3{ transform:translateX(4px) }
.svc-row-d:hover .svc-num-ghost{ opacity:.12 }
@media (max-width:640px){ .svc-row-d:hover .svc-num-ghost{ opacity:.15 } }

/* ------------------------------------------------------------------ trust - */
#trust{ padding-block-start:var(--pad-d); padding-block-end:var(--pad-d) }
#trust .trust-head h2{ font-size:clamp(1.7rem,2.8vw,2.3rem) }
.logo-tile{ border:1px solid var(--line-ink); filter:grayscale(1) contrast(.92); opacity:.82;
  transition:filter .25s var(--ease), opacity .25s var(--ease) }
.logo-tile:hover{ filter:none; opacity:1 }

/* ------------------------------------------------------------------- qhse - */
#qhse{ padding-block-start:var(--pad-d); padding-block-end:var(--pad-d) }
#qhse .split-copy h2{ font-size:clamp(2rem,3.4vw,3rem); color:var(--ink-txt) }
#qhse .q-card{ border-inline-start-color:var(--navy) }
#qhse .q-card h3 i{ color:var(--navy) }
.qhse-frame{ border:1px solid var(--blue); padding:10px; border-radius:2px } /* accent use #4 */
.qhse-frame figure{ overflow:hidden; overflow:clip; background:var(--paper-2) }
.qhse-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }

/* --------------------------------------------------------------- careers -- */
#careers{ padding-block-start:var(--pad-d); padding-block-end:var(--pad-d) }
#careers h2{ font-size:clamp(2rem,3.4vw,3rem); color:var(--ink-txt) }

/* --------------------------------------------------------------- contact -- */
#contact{ padding-block-start:var(--pad-d); padding-block-end:var(--pad-d) }
#contact .con-head h2{ font-size:clamp(2.1rem,3.6vw,3.2rem); color:var(--ink-txt) }
.con-card{ border-color:var(--line-ink) }
.con-card .mono{ color:var(--navy) }