/* HudsonRoux — Brochure brand tokens & print system */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  --navy:       #0B1530;
  --navy-2:     #142348;
  --navy-3:     #1B2E5C;
  --gold:       #C89844;
  --gold-2:     #E0B968;
  --gold-dim:   #8A6A30;
  --teal:       #3BC5C9;
  --teal-dim:   #1E7F86;
  --orange:     #E07A3F;
  --green:      #2A8B5F;
  --green-2:    #3DA67A;
  --green-dim:  #1B5E3F;
  --steel:      #2E5DA6;
  --steel-2:    #5A82C7;
  --steel-dim:  #1F4078;

  /* Per-brochure service accent (default = gold, ERD inherits) */
  --service:     var(--gold);
  --service-2:   var(--gold-2);
  --service-dim: var(--gold-dim);

  --cream:      #F5F1E8;
  --cream-2:    #EAE3D2;
  --paper:      #FBF8F0;

  --ink:        #131B2F;
  --ink-2:      #2B3550;
  --ink-muted:  #5C6680;
  --rule:       #D6CFBE;

  --serif:      "Geist", system-ui, sans-serif;
  --sans:       "Geist", system-ui, sans-serif;
  --mono:       "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #2a2a2a;
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "kern";
}

/* ============================================================
   PAGE SYSTEM (A4 portrait — 210 × 297 mm)
============================================================ */
.page {
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  margin: 0 auto 24px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55), 0 8px 24px -8px rgba(0,0,0,0.3);
}

.page--dark {
  background: var(--navy);
  color: var(--cream);
}

@page { size: A4 portrait; margin: 0; }

@media print {
  html, body {
    background: white;
    margin: 0 !important;
    padding: 0 !important;
  }
  .viewport-pad { padding: 0 !important; }
  .page {
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page:last-child { page-break-after: auto; break-after: auto; }
  .no-print { display: none !important; }
}

/* ============================================================
   TYPOGRAPHY
============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--service);
}

.eyebrow--ink { color: var(--service-dim); }
.eyebrow--cream { color: var(--service-2); }

h1, h2, h3, h4, h5 { font-family: var(--sans); font-weight: 600; margin: 0; letter-spacing: -0.01em; line-height: 1.05; }
h1 { font-size: 62pt; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 22pt; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
h3 { font-size: 14pt; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 11pt; font-weight: 600; font-family: var(--serif); font-style: italic; }

p, li { font-size: 10.25pt; line-height: 1.55; margin: 0 0 0.7em; text-wrap: pretty; }
.lede { font-size: 12.5pt; line-height: 1.45; font-style: italic; color: var(--ink-2); }
.lede--cream { color: rgba(245,241,232,0.85); }

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* ============================================================
   LAYOUT HELPERS
============================================================ */
.pad {
  position: absolute;
  inset: 18mm 16mm;
}
.pad--snug { inset: 14mm 14mm; }

.col-2 { column-count: 2; column-gap: 8mm; column-rule: 1px solid var(--rule); }

.divider {
  height: 1px;
  background: var(--rule);
  margin: 6mm 0;
}
.divider--cream { background: rgba(245,241,232,0.18); }

.rule-thick {
  height: 2px;
  background: var(--service);
  width: 32mm;
}

/* ============================================================
   PAGE FURNITURE (running headers/footers)
============================================================ */
.running {
  position: absolute;
  left: 16mm;
  right: 16mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.running--top { top: 8mm; }
.running--bot { bottom: 8mm; }

.running--cream { color: rgba(245,241,232,0.5); }

.folio {
  font-family: var(--mono);
  font-weight: 500;
}

/* ============================================================
   LOGO LOCKUP
============================================================ */
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup__mark {
  width: 44px; height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}
.lockup__wordmark {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 13pt;
  line-height: 1;
}
.lockup__sub {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 6.5pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--service);
}

/* ============================================================
   COVER PAGE
============================================================ */
.cover {
  position: absolute;
  inset: 0;
  background: var(--navy);
  color: var(--cream);
}

.cover__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cover__tag {
  position: absolute;
  top: 22mm;
  left: 16mm;
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--service-2);
}

.cover__lockup {
  position: absolute;
  top: 22mm;
  right: 16mm;
  transform: translateY(-50%);
}

.cover__title {
  position: absolute;
  left: 16mm;
  right: 16mm;
  bottom: 70mm;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 58pt;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--cream);
}
.cover__title em {
  font-style: normal;
  color: var(--service-2);
}

.cover__sub {
  position: absolute;
  left: 16mm;
  right: 60mm;
  bottom: 40mm;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13pt;
  line-height: 1.4;
  color: rgba(245,241,232,0.85);
}

.cover__foot {
  position: absolute;
  left: 16mm;
  right: 16mm;
  bottom: 14mm;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}

/* ============================================================
   FACET / GEOMETRIC ACCENTS (echoing journal cover)
============================================================ */
.facet-grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* ============================================================
   STAT / PILL / KEY BLOCKS
============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kpi {
  padding: 5mm 4mm;
  border-right: 1px solid var(--rule);
}
.kpi:last-child { border-right: 0; }
.kpi__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22pt;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.kpi__num span { color: var(--service); }
.kpi__label {
  font-family: var(--mono);
  font-size: 7.5pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

.phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 0;
  align-items: start;
}
.phase {
  padding: 5mm 4mm 5mm 0;
  position: relative;
  border-top: 2px solid var(--service);
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}
.phase + .phase { padding-left: 4mm; }
.phase__num {
  font-family: var(--mono);
  font-size: 7.5pt;
  letter-spacing: 0.2em;
  color: var(--service-dim);
  margin-bottom: 4mm;
}
.phase__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12pt;
  margin-bottom: 3mm;
  letter-spacing: -0.01em;
}
.phase__body {
  font-size: 9pt;
  line-height: 1.5;
  color: var(--ink-2);
}

.outcome {
  padding: 4mm 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 16mm 1fr;
  gap: 4mm;
  align-items: baseline;
}
.outcome__n {
  font-family: var(--mono);
  font-size: 9pt;
  letter-spacing: 0.18em;
  color: var(--service-dim);
}
.outcome__t { font-size: 10pt; line-height: 1.5; }
.outcome__t strong { font-family: var(--sans); font-weight: 600; display: block; margin-bottom: 2mm; font-size: 10.5pt; min-height: 3em; }

/* Outcome icon in place of the number — top-aligned so it sits with the heading
   and lines up cleanly across columns (text blocks vary in height). */
.outcome:has(.outcome__icon) { align-items: start; }
.outcome__icon { width: 10mm; height: 10mm; display: block; }

/* Corner icon for a "What we build" theme box */
.theme-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4mm; }
.theme-icon { width: 11mm; height: 11mm; display: block; flex-shrink: 0; }

/* Compact component grid for "What we build" */
.build-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5mm 6mm; margin-top: 0; }
.build-mini__icon { width: 11mm; height: 11mm; display: block; margin-bottom: 2mm; }
.build-mini__title { font-family: var(--sans); font-weight: 600; font-size: 10pt; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.5mm; }
.build-mini__desc { font-size: 8pt; line-height: 1.35; color: var(--ink-2); margin: 0; }

.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm;
}
.filter {
  border-left: 2px solid var(--service);
  padding: 0 0 0 4mm;
}
.filter h4 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 10pt;
  letter-spacing: -0.005em;
  margin-bottom: 2mm;
  color: var(--ink);
}
.filter p { font-size: 9pt; line-height: 1.5; color: var(--ink-2); margin: 0; }

.callout {
  background: var(--navy);
  color: var(--cream);
  padding: 9mm 10mm;
  margin: 0;
}
.callout .eyebrow { color: var(--service-2); }
.callout h3 {
  font-size: 18pt;
  line-height: 1.15;
  margin: 3mm 0 4mm;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.callout p { font-size: 10.5pt; line-height: 1.5; color: rgba(245,241,232,0.8); margin: 0; }
.callout p em { color: var(--service-2); font-style: italic; }

/* "How I work" — full-bleed navy feature band (page 4) */
.how-band {
  background: var(--navy);
  color: var(--cream);
  margin: 0 -16mm;            /* full-bleed past the .pad 16mm side insets to page edges */
  padding: 7mm 16mm;
}
.how-band .eyebrow { color: var(--service-2); }
.how-rule { width: 32mm; height: 2px; background: var(--service); margin: 3mm 0 5mm; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; }
.how-col__num  { font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.2em; color: var(--service-2); margin-bottom: 3mm; }
.how-col__name { font-family: var(--sans); font-weight: 600; font-size: 13pt; line-height: 1.15; letter-spacing: -0.01em; color: var(--cream); margin-bottom: 3mm; min-height: 2.3em; }
.how-col__body { font-size: 9.5pt; line-height: 1.5; color: rgba(245,241,232,0.8); margin: 0; }

/* ============================================================
   PRINT TOOLBAR (screen only)
============================================================ */
.toolbar {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 100;
  display: flex;
  gap: 8px;
  background: rgba(11,21,48,0.95);
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.toolbar a, .toolbar button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(245,241,232,0.2);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.toolbar a:hover, .toolbar button:hover {
  background: var(--service);
  color: var(--navy);
  border-color: var(--service);
}

.viewport-pad { padding: 32px 0; }