/* ============================================================================
   RANCO — Concept C · DAYLIGHT
   Ajyal's structure, typography and rhythm, but paper-dominant — the safest
   resolution of the logo constraint, since the mark's navy and blue were
   always drawn for a light ground. Two dark bands (the service strip, QHSE)
   give the page the same alternating rhythm Ajyal uses, without making dark
   the default the way concept A does.
   Accent = RANCO's own navy #223566 (drives kickers, buttons, underlines on
   paper); the DEVELON orange #D84800 is used as a SIGNAL only — the active
   state in the services list below, one badge, one border — never the
   default accent. "One accent colour used sparingly and hard" plus one
   signal colour used sparingly and pointedly.
   Signature move: the seven-service index gets a live scroll-linked progress
   rail — the tick beside the service currently in view lights up navy, then
   the row's index number switches to the orange signal colour. Pure
   enhancement: with JS off or IntersectionObserver absent the list is a
   complete, readable, correctly numbered index with a static navy rail.
   Ratios generated by design/snippets/contrast-check.py (D-16).
   ========================================================================= */

:root{
  --ink:#0B0C0E;
  --ink-2:#101216;
  --ink-3:#16181D;
  --paper:#F3F5F8;
  --paper-2:#E8ECF1;
  --txt:#EDEEF2;                                              /* @contrast --ink >=4.5 = 16.88:1 */
  --txt-dim:#A7ADB6;                                          /* @contrast --ink >=4.5 = 8.66:1 */
  --txt-faint:#7B818B;                                        /* @contrast --ink >=3.0 = 4.99:1 */
  --ink-txt:#17181B;                                          /* @contrast --paper >=4.5 = 16.25:1 */
  --ink-dim:#4A5B7D;                                          /* @contrast --paper >=4.5 = 6.24:1 */
  --navy:#223566;           /* logo + primary accent. NEVER edited as a logo asset. */
  --blue:#328FCE;           /* logo. NEVER edited. */
  --blue-link:#1F6FA8;                                        /* @contrast --paper >=4.5 = 4.93:1 */
  --accent:#223566;         /* = --navy: the default accent everywhere on paper */ /* @contrast --paper >=4.5 = 10.87:1 */
  --accent-hi:#223566;      /* kickers on paper use navy directly */
  --accent-btn:#223566;     /* buttons on paper — white text */ /* @contrast white >=4.5 = 11.87:1 */
  --signal:#D84800;         /* the ORANGE signal — large/decorative use only */ /* @contrast --paper >=3.0 = 3.97:1 (large/non-text only) */
  --signal-hi:#F0783A;      /* signal, lifted for the two dark bands */         /* @contrast --ink >=4.5 = 6.94:1 */
  --line:rgba(255,255,255,.13);
  --line-ink:rgba(23,24,27,.16);
}

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

/* -------------------------------------------------------- split hero (paper) */
#hero{ background:var(--paper); padding-block-start:clamp(140px,16vh,180px); padding-block-end:clamp(64px,8vh,96px) }
/* short-laptop trim (ibix-base.css's .hero-fit-pad pattern, re-specified here
   because the id rule above outranks that class) — keeps the CTA clear of the
   fold at 1440x760-class viewports instead of letting it kiss the bottom edge */
@media (max-height:820px){
  #hero{ padding-block-start:clamp(96px,13vh,140px); padding-block-end:clamp(28px,5vh,56px) }
}
.hero-split{ display:grid; grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);
  gap:clamp(32px,5vw,72px); align-items:center }
@media (max-width:900px){ .hero-split{ grid-template-columns:1fr } }
.hero-split .kicker{ color:var(--navy) }
/* Fixed 2026-08-05 alongside concept A/B's .hero-h — same bug, worse here:
   the split layout's copy column is narrower again (measured 558px at 1440,
   455px at 1024) so 13ch + the old size clamp forced "Engineering &
   industrial services you can trust." into FOUR lines ("Engineering" / "&
   industrial" / "services you" / "can trust."), a staccato break with a
   bare ampersand fragment. The column width is fixed by the split grid, not
   by ch, so this needed a size drop (an extra step below A/B, since the
   column itself is already the narrower of the two) rather than a wider
   measure — max-width is raised to 22ch mainly so it never becomes the
   binding constraint again. Verified two clean lines — "Engineering &
   industrial / services you can trust." — at every checked width
   (1440/1366/1024/900/768/390). */
.hero-split h1{ color:var(--ink-txt); font-size:clamp(1.75rem, min(4vw,4.9vh), 3.1rem);
  line-height:1.05; letter-spacing:-.02em; max-width:22ch; text-wrap:balance }
.hero-split .hero-sub{ margin-top:22px; max-width:48ch; color:var(--ink-dim);
  font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.7 }
.hero-split .hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:16px }
.hero-split .hero-tagline{ margin-top:28px; color:var(--ink-dim); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase }
.hero-fig{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 24px 60px -24px rgba(23,24,27,.35) }
.hero-fig img{ width:100%; height:100%; object-fit:cover }
.hero-fig::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(23,24,27,.28) 0%, rgba(23,24,27,0) 34%) }

/* --------------------------------------------------- dark band #1: strip --- */
/* Both dark bands redefine --accent-hi to the lifted ORANGE signal, not navy —
   navy is unreadable on ink, and the kicker/strip-number/QHSE-index rules all
   resolve through var(--accent-hi, var(--accent)). */
#service-strip, #qhse{ --accent-hi:var(--signal-hi); --accent:var(--signal-hi) }
#service-strip{ background:var(--ink) }
#service-strip .hero-foot{ background:var(--ink); border-top:0 }
#service-strip .hs-tabs{ padding-block:6px }

#stats{ background:var(--paper) }
#about{ background:var(--paper) }
#services{ background:var(--paper) }
#trust{ background:var(--paper) }
#qhse{ background:var(--ink) }              /* dark band #2 */
#careers{ background:var(--paper) }
#contact{ background:var(--paper) }

.logo-tile{ border:1px solid var(--line-ink) }

/* ---------------------------------------------------------------------------
   SIGNATURE MOVE — the services progress rail.
   Base state (no JS, or IO absent): every row shows a plain navy tick and a
   navy index number — a complete, correctly numbered list either way.
   Enhanced state: JS adds .rail-armed to the list only once an
   IntersectionObserver exists (motion-kit's `watch()` hardening pattern,
   reused directly), then toggles .act on whichever row is centred in the
   viewport. The tick and the index number both switch to the orange signal —
   colour only, nothing regarding layout/visibility ever depends on JS. */
/* the tick and the row wash are non-text UI — 3:1 is the binding threshold and
   the signal orange clears it there; the index NUMBER stays navy throughout so
   it is never a moment where the "active" state depends on 4.5:1 text-orange */
.svc-row{ position:relative; transition:background-color .3s var(--ease) }
.svc-row::before{ content:""; position:absolute; inset-inline-start:-1px; top:14px; bottom:14px;
  width:3px; border-radius:999px; background:var(--navy); opacity:.28;
  transition:background .3s var(--ease), opacity .3s var(--ease) }
.rail-armed .svc-row.act::before{ background:var(--signal); opacity:1 }
.rail-armed .svc-row.act{ background-color:rgba(216,72,0,.05) }