/* RJ Consulting Group ... shared stylesheet */

:root {
  --ink: #12202b;
  --ink-soft: #47606f;
  --line: #dfe6ea;
  --bg: #ffffff;
  --bg-alt: #f5f8f9;
  --brand: #16506e;
  --brand-dark: #0e3a51;
  --accent: #c8781f;
  --max: 1120px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

a { color: var(--brand); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  line-height: 1.25;
  color: var(--ink);
  font-weight: 650;
  margin: 0 0 .6em;
}
h1 { font-size: 2.45rem; letter-spacing: -.02em; }
h2 { font-size: 1.6rem; margin-top: 2.2em; }
h3 { font-size: 1.16rem; margin-top: 1.8em; }
p { margin: 0 0 1.15em; }

/* ---------- header ---------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}
.brand {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Gauge mark. The dial and pivot take currentColor so the mark sits on the white
   header in brand blue; the needle keeps the accent. */
.brand .mark {
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--brand);
}
.brand .brand-text { display: block; }
.brand .brand-name { color: var(--brand); }
.brand small {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .93rem;
  font-weight: 550;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }

/* ---------- hero ----------
   Full-bleed image hero with the headline set over the photograph. The image
   is a real <img> rather than a CSS background so the browser preloader can
   find it and so it carries alt text. A gradient scrim sits between the image
   and the text: the photographs are dark steel-blue on the left third, and the
   scrim guarantees the copy clears contrast requirements regardless of which
   image is behind it. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0a1a24;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 76px 0;
}
.hero-sm { min-height: 420px; padding: 62px 0; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  /* The source photographs are deliberately dark and moody. Under a scrim
     heavy enough to carry white text they go almost black, so lift them
     slightly first and keep the scrim lighter than it would otherwise need
     to be. Tuned against the darkest image in the set (the night corridor
     on /services/quality-control/) and the brightest (the rooftop). */
  filter: brightness(1.16) contrast(1.02);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(8,22,31,.90) 0%, rgba(8,22,31,.74) 32%,
                           rgba(8,22,31,.40) 60%, rgba(8,22,31,.14) 100%),
    linear-gradient(to top, rgba(8,22,31,.34) 0%, rgba(8,22,31,0) 38%);
}

/* width:100% is load-bearing: .hero is display:flex, which makes .wrap a flex
   item that shrinks to its content width. Without this the block collapses to
   the width of the lede and margin:0 auto then centers it, pushing the text
   toward the middle. Forcing full width restores the normal centered 1120
   column so the copy left-aligns directly under the logo. */
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero h1 { color: #fff; max-width: 19ch; text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.hero-sm h1 { max-width: 24ch; font-size: 2.1rem; }
.hero .lede {
  font-size: 1.18rem;
  color: #cbdbe5;
  max-width: 58ch;
  margin-bottom: 1.7em;
}
.hero-sm .lede { margin-bottom: 0; }
.hero .eyebrow { color: #f0a544; }
.hero .breadcrumb { color: #91a9b8; }
.hero .breadcrumb a { color: #bcd0dd; }
.hero .breadcrumb a:hover { color: #fff; }

/* buttons need to invert on the dark hero */
.hero .btn {
  background: #fff;
  color: #0e3a51;
  border-color: #fff;
}
.hero .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.hero .btn-ghost:hover { background: #fff; color: #0e3a51; border-color: #fff; }

.page-head {
  border-bottom: 1px solid var(--line);
  padding: 54px 0 40px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 14px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
  border: 1px solid var(--brand);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand); color: #fff; }

/* ---------- sections ---------- */
section { padding: 62px 0; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-intro { max-width: 66ch; margin-bottom: 8px; }
.section-intro h2 { margin-top: 0; }

.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: #fff;
}
.card h3 { margin-top: 0; font-size: 1.06rem; }
.card p { margin-bottom: .8em; color: var(--ink-soft); font-size: .96rem; }
.card a.more { font-size: .9rem; font-weight: 600; text-decoration: none; }
.card a.more:after { content: " \203A"; }

ul.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
ul.ticks li {
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .97rem;
}
ul.ticks li:before {
  content: "";
  position: absolute;
  left: 4px; top: 18px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: 20px 24px;
  margin: 1.8em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- article ---------- */
.article { padding: 46px 0 70px; }
.article p, .article ul, .article ol { max-width: 74ch; }
.meta { color: var(--ink-soft); font-size: .88rem; margin-bottom: 2em; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { border-bottom: 1px solid var(--line); padding: 24px 0; }
.post-list h3 { margin: 0 0 .35em; font-size: 1.2rem; }
.post-list h3 a { text-decoration: none; }
.post-list p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- form ---------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: .97rem;
  background: #fff;
  color: var(--ink);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

/* ---------- cta band ---------- */
.cta-band {
  background: var(--brand);
  color: #fff;
  padding: 54px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: #d5e5ee; max-width: 58ch; margin: 0 auto 1.6em; }
.cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink);
  color: #9fb3c0;
  padding: 52px 0 30px;
  font-size: .93rem;
}
.site-foot a { color: #cddbe4; text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.foot-grid h4 {
  color: #fff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 14px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 9px; }
.foot-bottom {
  border-top: 1px solid #24384a;
  margin-top: 38px;
  padding-top: 22px;
  font-size: .85rem;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.breadcrumb { font-size: .85rem; color: var(--ink-soft); margin-bottom: 18px; }
.breadcrumb a { text-decoration: none; }

@media (max-width: 900px) {
  .g3, .g2, .foot-grid { grid-template-columns: 1fr; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
  .nav ul { gap: 16px; }
  h1 { font-size: 1.95rem; }
  section { padding: 46px 0; }

  /* On narrow screens the scrim goes vertical, because there is no longer a
     left third to keep clear. */
  .hero { min-height: 420px; padding: 52px 0; }
  .hero-sm { min-height: 330px; padding: 44px 0; }
  .hero-sm h1 { font-size: 1.7rem; }
  .hero .lede { font-size: 1.05rem; }
  .hero-bg::after {
    background: linear-gradient(to top, rgba(8,22,31,.95) 0%, rgba(8,22,31,.86) 45%, rgba(8,22,31,.62) 100%);
  }
  .hero .btn { display: block; text-align: center; margin-bottom: 10px; }
}

/* honeypot for the Web3Forms spam check: off-screen rather than display:none,
   because well-behaved bots skip fields that are explicitly hidden */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}