/* ─────────────────────────────────────────────────────────
   v11 — Storm-slate nav banner + canopy-over-"rainy" wordmark
   (J2) with a single ochre raindrop above the dotless i.

   The wordmark architecture:
   - Storm-slate bar (the awning) sits low above just the
     x-height letters of "rainy" — the brand-metaphor word.
     Stops cleanly over the y; "day security" carries itself.
   - Ochre cap finishes the awning's right end, floating in
     the breath of space between "rainy" and "day".
   - The "i" in "rainy" is rendered as a dotless glyph (ı).
     Its tittle has migrated above the canopy as a single
     ochre raindrop falling onto the word below.
   ───────────────────────────────────────────────────────── */

/* ─── Canopy: spans "rainy" only, sits low in macron position.
   Applied universally — em-scales identically at hero / nav /
   footer. The macron sits above the x-height letters with no
   ascenders to clear, so the bar reads as typographic mark
   rather than floating architecture. ─── */
.rds-wordmark::before {
  width: 2.18em !important;
  left: 0.10em !important;
  top: 0.12em !important;
  height: 0.11em !important;
}
.rds-wordmark::after {
  left: 2.30em !important;
  top: 0.12em !important;
  width: 0.20em !important;
  height: 0.11em !important;
}

/* ─── Raindrop above the dotless i (universal).
   Sits just above the lowered macron, falling onto the i below. ─── */
.rds-wordmark .i {
  position: relative;
  display: inline-block;
}
.rds-wordmark .i::before {
  content: '';
  position: absolute;
  top: -0.22em;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.072em solid transparent;
  border-right: 0.072em solid transparent;
  border-top: 0.260em solid var(--rds-ochre);
  pointer-events: none;
}

/* ─── HERO ONLY: signal/filter cascade above the i ─────
   Storm-grey drops scatter above the awning (raw signal,
   noise, threats falling toward you). The ochre raindrop
   at the base is the filtered output — what made it
   through. The mark itself becomes a small diagram of
   what RDS does.
   ─────────────────────────────────────────────────────── */
.hero-mark .cascade {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 0.023em solid transparent;
  border-right: 0.023em solid transparent;
  border-top: 0.084em solid var(--rds-storm);
  pointer-events: none;
}
.hero-mark .c1 { top: -0.88em; opacity: 0.25; transform: translateX(calc(-50% + 0.22em)); }
.hero-mark .c2 { top: -0.70em; opacity: 0.35; transform: translateX(calc(-50% - 0.18em)); }
.hero-mark .c3 { top: -0.54em; opacity: 0.50; border-top-width: 0.096em; transform: translateX(calc(-50% + 0.08em)); }
.hero-mark .c4 { top: -0.38em; opacity: 0.65; border-top-width: 0.096em; transform: translateX(calc(-50% - 0.04em)); }

/* ─── Storm-slate nav ─── */
.nav {
  background: var(--rds-storm);
  border-bottom: 1px solid rgba(244, 241, 235, 0.08);
}

/* Wordmark flips to bone — the storm bar (currentColor) follows;
   the ochre cap stays ochre and reads as a warm spark on slate. */
.nav .rds-wordmark { color: var(--rds-bone); }

/* Nav links: bone with ochre hover */
.nav .nav-links { color: var(--rds-bone); }
.nav .nav-link  { color: var(--rds-bone); }
.nav .nav-link:hover { color: var(--rds-ochre); }

/* CTA: variant A (default) — ochre on storm */
.nav .btn-primary {
  background: var(--rds-ochre);
  color: var(--rds-storm);
}
.nav .btn-primary:hover {
  background: var(--rds-ochre-deep);
  color: var(--rds-bone);
}

/* CTA: variant B — bone on storm (apply .nav.cta-bone on <header>) */
.nav.cta-bone .btn-primary {
  background: var(--rds-bone);
  color: var(--rds-storm);
}
.nav.cta-bone .btn-primary:hover {
  background: var(--rds-ochre);
  color: var(--rds-storm);
}

/* Nav wordmark size — slightly larger so the macron + teardrop
   have enough pixels to read at the top of the page. */
.nav .nav-mark { font-size: 26px; }

/* ─── Small-scale brand-spark boost ───
   Em-scaled values give the same proportion at every size, but
   the teardrop loses identity at nav/footer scale — a 1.9px-wide
   triangle reads as a smudge, not a raindrop. Bump the teardrop
   em dimensions only on the small contexts so the brand-spark
   moment carries enough mass to register. Bar/cap stay at their
   universal proportion. Hero stays untouched. */
.nav .rds-wordmark .i::before,
.site-footer .rds-wordmark .i::before {
  top: -0.26em !important;
  border-left-width: 0.115em !important;
  border-right-width: 0.115em !important;
  border-top-width: 0.42em !important;
}

/* Nav + footer only: beefier ochre cap on the right end of the
   macron. Right edge stays anchored (no closer to "day"); the cap
   grows wider by eating leftward INTO the storm-slate bar. Storm
   portion of the macron shortens to make room; the cap reads as a
   confident warm tile finishing the awning. Hero untouched. */
.nav .rds-wordmark::before,
.site-footer .rds-wordmark::before {
  width: 2.04em !important;
}
.nav .rds-wordmark::after,
.site-footer .rds-wordmark::after {
  left: 2.16em !important;
  width: 0.34em !important;
}

/* Mobile menu */
.nav .nav-toggle-bar { background: var(--rds-bone); }
@media (max-width: 900px) {
  .nav .nav-links.open {
    background: var(--rds-storm);
    border-top: 1px solid rgba(244, 241, 235, 0.08);
  }
  .nav .nav-links.open .nav-link { color: var(--rds-bone); }
}