/* ============================================================
   REGISTER B — HERITAGE NAVY — THE SYSTEM'S OUTPUTS
   For: services, methodology, health-check, sectors
   Loaded after varnham.css; overrides accent variables.
   ============================================================ */

:root {
  --accent: #1a2b47;
  --accent-deep: #0f1c33;
  --accent-soft: #e6ebf2;
  --accent-on-dark: #e6ebf2;
}

/* Register strip — appears at top of Register B pages */
.page-strip {
  background: var(--accent);
}

/* Register B hero — wider title, attestation strip beneath */
.hero-b {
  padding: 90px 0 100px 0;
  border-bottom: 1px solid var(--rule);
}
.hero-b h1 {
  margin-bottom: 32px;
  max-width: 920px;
}
.hero-b .standfirst {
  max-width: 720px;
}

/* Attestation strip — sits beneath hero in Register B
   Says "Every output reviewed and signed by Matthew Varnham" */
.attestation {
  margin-top: 60px;
  padding: 26px 32px;
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.attestation .left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.attestation .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.attestation .name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.attestation .right {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}

/* ============================================================
   COMPARISON TABLE — for service tiers
   ============================================================ */
.comparison {
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.comp-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  background: var(--accent);
  color: var(--paper-cool);
}
.comp-head .cell {
  padding: 32px 28px;
  border-right: 1px solid rgba(250, 248, 244, 0.15);
}
.comp-head .cell:last-child { border-right: none; }
.comp-head .cell .tier {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250, 248, 244, 0.6);
  margin-bottom: 12px;
}
.comp-head .cell .name {
  font-weight: 600;
  font-size: 22px;
  color: var(--paper-cool);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.comp-head .cell .price {
  font-weight: 600;
  font-size: 28px;
  color: var(--paper-cool);
  line-height: 1;
  letter-spacing: -0.01em;
}
.comp-head .cell .price .pcm {
  font-size: 0.45em;
  color: rgba(250, 248, 244, 0.6);
  font-weight: 400;
  margin-left: 4px;
}
.comp-head .cell .desc {
  font-size: 13px;
  color: rgba(250, 248, 244, 0.7);
  line-height: 1.55;
  margin-top: 14px;
}

.comp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.comp-row .cell {
  padding: 22px 28px;
  border-right: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.comp-row .cell:last-child { border-right: none; }
.comp-row .cell:first-child {
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-warm);
}
.comp-row .check {
  color: var(--accent);
  font-weight: 600;
}
.comp-row .check::before {
  content: "✓";
  font-size: 16px;
  margin-right: 8px;
}
.comp-row .dash {
  color: var(--muted);
}
.comp-row .dash::before {
  content: "—";
  margin-right: 8px;
}
.comp-row .with-detail {
  color: var(--ink);
  font-weight: 500;
}

.comp-section-head {
  grid-column: 1 / -1;
  background: var(--paper-warm);
  padding: 16px 28px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  border-top: 1px solid var(--rule);
}

@media (max-width: 1100px) {
  .comp-head, .comp-row { grid-template-columns: 1fr; }
  .comp-head .cell, .comp-row .cell {
    border-right: none;
    border-bottom: 1px solid rgba(250, 248, 244, 0.1);
  }
  .comp-row .cell { border-bottom: 1px solid var(--rule); }
}

/* ============================================================
   METHODOLOGY GRID — four-step process pattern
   ============================================================ */
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(250, 248, 244, 0.15);
  border: 1px solid rgba(250, 248, 244, 0.15);
}
.method-step {
  background: var(--accent);
  padding: 36px 30px 40px;
}
.method-step .step-num {
  font-weight: 600;
  font-size: 14px;
  color: rgba(250, 248, 244, 0.5);
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}
.method-step h4 {
  font-size: 19px;
  line-height: 1.2;
  color: var(--paper-cool);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.method-step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(250, 248, 244, 0.75);
}

@media (max-width: 1100px) { .methodology-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .methodology-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SECTOR BLOCKS — extended sector descriptions
   ============================================================ */
.sector-block {
  padding: 50px 0;
  border-bottom: 1px solid var(--rule);
}
.sector-block:last-child { border-bottom: none; }
.sector-block .sector-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 14px;
}
.sector-block h3 {
  margin-bottom: 22px;
  max-width: 640px;
}
.sector-block .sector-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 28px;
}
.sector-block .sector-lead strong { color: var(--ink); font-weight: 600; }
.sector-block .sector-points {
  list-style: none;
  margin-top: 24px;
}
.sector-block .sector-points li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
}
.sector-block .sector-points li::before {
  content: "—";
  color: var(--accent);
  font-weight: 600;
}
.sector-block .sector-points li strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   ASSESSMENT AREAS — for health check page
   ============================================================ */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.area-cell {
  background: var(--paper-cool);
  padding: 20px 28px;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.area-cell .num {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.05em;
  min-width: 36px;
}
.area-cell .label {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 800px) { .areas-grid { grid-template-columns: 1fr; } }