/* ============================================================
   WAVE 4 · BESPOKE PROCESS-PAGE PRIMITIVES
   ============================================================ */

/* --- Shared: small editorial process photo --- */
.process-photo-sm {
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.process-photo-sm.size-40-30 { width: 40mm; height: 30mm; }
.process-photo-sm.size-50-35 { width: 50mm; height: 35mm; }
.process-photo-sm.size-60-40 { width: 60mm; height: 40mm; }

/* --- FF&E: vertical micro-stage timeline + hardware column --- */
.ffe-process-split {
  display: grid; grid-template-columns: 65% 35%;
  gap: 6mm; margin-top: 4mm; align-items: start;
}
.timeline-vertical {
  display: flex; flex-direction: column; gap: 4.5mm;
  position: relative;
  padding-inline-start: 0;
}
.timeline-vertical::before {
  content: ''; position: absolute;
  inset-inline-start: 4mm; top: 4mm; bottom: 4mm;
  width: 0.4pt; background: var(--hairline);
}
.tv-step {
  position: relative; display: grid;
  grid-template-columns: 8mm 1fr 42mm;
  gap: 3mm; align-items: start;
}
.tv-dot {
  width: 3mm; height: 3mm; border-radius: 50%;
  background: var(--gold); margin-top: 1.5mm;
  margin-inline-start: 2.5mm;
  box-shadow: 0 0 0 0.6pt var(--page-bg, #fff);
  z-index: 1;
}
.tv-body {
  display: flex; flex-direction: column; gap: 0.5mm;
}
.tv-body .tv-num {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.16em; color: var(--gold);
  text-transform: uppercase;
}
.tv-body .tv-title-ar {
  font-family: 'Tajawal', sans-serif; font-size: 13pt;
  font-weight: 700; color: var(--navy); line-height: 1.15;
}
.tv-body .tv-title-en {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  letter-spacing: 0.08em; color: var(--ink-soft);
  text-transform: uppercase;
}
.tv-body .tv-desc {
  font-family: 'Inter', sans-serif; font-size: 9pt;
  color: var(--ink-soft); line-height: 1.4; margin-top: 0.6mm;
}
.tv-img {
  width: 40mm; height: 30mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.hardware-column {
  display: flex; flex-direction: column; gap: 3mm;
  border-inline-start: 0.4pt solid var(--hairline);
  padding-inline-start: 4mm;
}
.hardware-column .hc-title {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; color: var(--gold);
  text-transform: uppercase; margin-bottom: 1mm;
}
.hc-tile {
  display: flex; flex-direction: column; gap: 1mm;
}
.hc-tile .hc-img {
  width: 100%; height: 24mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.hc-tile .hc-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.14em; color: var(--ink-soft);
  text-transform: uppercase;
  position: relative; padding-inline-start: 4mm;
}
.hc-tile .hc-eyebrow::before {
  content: ''; position: absolute;
  inset-inline-start: 0; top: 50%;
  width: 2.5mm; height: 2.5mm;
  background: var(--gold); border-radius: 50%;
  transform: translateY(-50%);
}
.hc-tile .hc-name {
  font-family: 'Tajawal', sans-serif; font-size: 10pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
}

/* --- Veneer: press-cycle ribbon SVG wrapper --- */
.press-curve-svg {
  width: 100%; height: auto;
  display: block; margin-top: 2mm;
  border: 0.4pt solid var(--hairline);
  background: #fff; padding: 3mm 4mm;
}
.press-curve-svg svg { width: 100%; height: auto; display: block; }
.svg-section-title {
  font-family: 'Tajawal', sans-serif; font-size: 11pt;
  font-weight: 700; color: var(--navy); margin-top: 4mm;
}
.svg-section-title .en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 10pt;
  color: var(--ink-soft); margin-inline-start: 4mm;
}

/* --- Doors: exploded axonometric SVG wrapper --- */
.exploded-axo-svg {
  width: 100%;
  border: 0.4pt solid var(--hairline);
  background: #fff; padding: 3mm 4mm; margin-top: 2mm;
}
.exploded-axo-svg svg { width: 100%; height: auto; display: block; }

/* --- Curtains: plan-view SVG wrapper --- */
.plan-view-svg {
  width: 100%;
  border: 0.4pt solid var(--hairline);
  background: #fff; padding: 3mm 4mm; margin-top: 2mm;
}
.plan-view-svg svg { width: 100%; height: auto; display: block; }

/* --- Vitrines: edge quad-grid --- */
.edge-quad-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4mm; margin-top: 3mm;
}
.eq-tile {
  display: flex; flex-direction: column;
  border: 0.4pt solid var(--hairline); background: #fff;
  break-inside: avoid;
}
.eq-tile .eq-img {
  height: 38mm;
  background-size: cover; background-position: center;
  border-bottom: 0.4pt solid var(--hairline);
}
.eq-tile .eq-body {
  padding: 2mm 3mm 2.5mm;
  display: flex; flex-direction: column; gap: 0.6mm;
}
.eq-micron {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.16em; color: var(--gold);
  text-transform: uppercase;
}
.eq-tile .eq-name {
  font-family: 'Tajawal', sans-serif; font-size: 11pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
}
.eq-tile .eq-name .en {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 9pt; color: var(--ink-soft);
  margin-top: 0.4mm;
}

/* --- Replicas: pipeline strip --- */
.pipeline-strip {
  display: grid; grid-template-columns: repeat(11, auto);
  align-items: start; gap: 1.5mm;
  margin-top: 4mm;
}
.ps-step {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.5mm;
  width: 28mm;
}
.ps-icon {
  width: 24mm; height: 24mm;
  display: flex; align-items: center; justify-content: center;
  border: 0.4pt solid var(--hairline);
  background: #fff;
}
.ps-icon svg { width: 100%; height: 100%; display: block; }
.ps-step .ps-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 7.5pt;
  letter-spacing: 0.14em; color: var(--gold);
  text-transform: uppercase; text-align: center;
}
.ps-step .ps-title-ar {
  font-family: 'Tajawal', sans-serif; font-size: 10.5pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
  text-align: center;
}
.ps-step .ps-desc {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  color: var(--ink-soft); line-height: 1.35;
  text-align: center;
}
.ps-step .ps-img {
  width: 28mm; height: 20mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline); margin-top: 1mm;
}
.ps-arrow {
  display: flex; align-items: center;
  height: 24mm;
}
.ps-arrow svg { width: 8mm; height: 6mm; }

.replica-pull-quote {
  margin-top: 6mm; padding-top: 4mm;
  border-top: 0.6pt solid var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 22pt;
  color: var(--navy); line-height: 1.3;
  text-align: center;
}

/* --- Print: ICC flow + ΔE chip strip --- */
.icc-flow-svg {
  width: 100%;
  border: 0.4pt solid var(--hairline);
  background: #fff; padding: 3mm 4mm; margin-top: 2mm;
}
.icc-flow-svg svg { width: 100%; height: auto; display: block; }

.delta-e-strip {
  display: flex; gap: 1.5mm; margin-top: 3mm;
  align-items: center;
}
.dec-chip {
  width: 12mm; height: 16mm;
  border: 0.3pt solid var(--hairline);
}
.delta-e-strip .dec-caption {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.14em; color: var(--gold);
  text-transform: uppercase; margin-inline-start: 4mm;
}

/* --- Process compact strip helper (existing .process-arc reused) --- */
.proc-arc-compact { margin-top: 2mm; }

/* --- Macros row (3-tile) for process variants --- */
.macro-row-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4mm; margin-top: 3mm;
}
.macro-row-3 .macro-tile {
  display: flex; flex-direction: column;
  break-inside: avoid;
}
.macro-row-3 .macro-tile .imgph {
  height: 28mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.macro-row-3 .macro-cap {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.12em; color: var(--ink-soft);
  text-transform: uppercase; margin-top: 1.5mm;
  position: relative; padding-inline-start: 4mm;
}
.macro-row-3 .macro-cap::before {
  content: ''; position: absolute;
  inset-inline-start: 0; top: 50%;
  width: 2.2mm; height: 2.2mm;
  background: var(--gold); border-radius: 50%;
  transform: translateY(-50%);
}

/* --- Macros row (4-tile) for vitrines bottom etc --- */
.macro-row-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4mm; margin-top: 3mm;
}
.macro-row-4 .macro-tile {
  display: flex; flex-direction: column;
  break-inside: avoid;
}
.macro-row-4 .macro-tile .imgph {
  height: 26mm;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
}
.macro-row-4 .macro-cap {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.12em; color: var(--ink-soft);
  text-transform: uppercase; margin-top: 1.5mm;
  position: relative; padding-inline-start: 4mm;
}
.macro-row-4 .macro-cap::before {
  content: ''; position: absolute;
  inset-inline-start: 0; top: 50%;
  width: 2mm; height: 2mm;
  background: var(--gold); border-radius: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   WAVE 5 — Systems & Governance (8 pages)
   ============================================================ */

/* Reusable scope hero overlay (full-bleed photo + lower-left text) */
.scope-hero-overlay {
  position: relative; width: 100%;
  background-size: cover; background-position: center;
  border: 0.4pt solid var(--hairline);
  overflow: hidden;
}
.scope-hero-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,24,51,0.78) 0%, rgba(6,24,51,0.30) 45%, rgba(6,24,51,0) 70%);
  pointer-events: none;
}
.scope-hero-overlay .sho-text {
  position: absolute; inset-inline-start: 8mm; bottom: 6mm;
  color: #fff; z-index: 2; max-width: 60%;
}
.scope-hero-overlay .sho-text .eyebrow {
  color: var(--gold-light);
  border-color: rgba(255,255,255,0.22);
}
.scope-hero-overlay .sho-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 38pt; line-height: 1.05;
  color: #fff; margin-top: 2mm;
}
.scope-hero-overlay .sho-text .sho-en {
  font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 11pt; color: rgba(255,255,255,0.82);
  margin-top: 2mm; letter-spacing: 0.02em;
}

/* 13.1 — Signage Family Card */
.signage-family-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 5mm;
}
.signage-family-card {
  border: 0.5pt solid var(--hairline);
  padding: 5mm 5mm 4mm; background: #fff;
  display: flex; flex-direction: column; gap: 2.5mm;
  break-inside: avoid;
}
.signage-family-card .sfc-icon {
  width: 24mm; height: 24mm; display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 0.4pt solid var(--hairline);
  margin-bottom: 1mm;
}
.signage-family-card .sfc-icon svg { width: 100%; height: 100%; }
.signage-family-card .sfc-name {
  font-family: 'Tajawal', sans-serif; font-size: 13pt; font-weight: 700;
  color: var(--navy); line-height: 1.2;
}
.signage-family-card .sfc-name .en {
  display: block; font-family: 'Inter', sans-serif; font-style: italic;
  font-size: 9pt; font-weight: 400; color: var(--ink-soft);
  margin-top: 0.5mm; letter-spacing: 0.02em;
}
.signage-family-card .sfc-desc {
  font-family: 'Tajawal', sans-serif; font-size: 9pt;
  color: var(--ink-soft); line-height: 1.5;
}
.signage-family-card .sfc-materials {
  display: flex; gap: 1.5mm; margin-top: 2mm;
  padding-top: 2mm; border-top: 0.3pt dotted var(--hairline);
}
.signage-family-card .sfc-mat-swatch {
  width: 6mm; height: 6mm; border: 0.3pt solid var(--hairline);
}

/* 13.1 — Bilingual hierarchy strip */
.bilingual-hierarchy {
  margin-top: 4mm; padding: 4mm 5mm;
  border-top: 0.4pt solid var(--hairline);
  border-bottom: 0.4pt solid var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6mm; align-items: center;
}
.bilingual-hierarchy .bh-label {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.bilingual-hierarchy .bh-sample {
  font-family: 'Tajawal', sans-serif; font-weight: 700;
  font-size: 22pt; color: var(--navy); line-height: 1;
}
.bilingual-hierarchy .bh-sample .en-sup {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 11pt; font-weight: 500; color: var(--ink-soft);
  margin-top: 1mm; letter-spacing: 0.04em;
}
.bilingual-hierarchy .bh-ratio {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14pt; color: var(--gold); text-align: center;
}

/* 13.2 — Two-column editorial checklist */
.checklist-2col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8mm; margin-top: 4mm;
}
.checklist-2col .cl-col h4 {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2mm;
  padding-bottom: 1.5mm; border-bottom: 0.4pt solid var(--gold);
}
.checklist-2col .cl-col h4 .ar {
  display: block; font-family: 'Tajawal', sans-serif;
  font-size: 11pt; font-weight: 700; color: var(--navy);
  letter-spacing: 0; text-transform: none; margin-top: 1mm;
}
.checklist-item {
  display: flex; align-items: flex-start; gap: 3mm;
  padding: 2.5mm 0; border-bottom: 0.3pt dotted var(--hairline);
  break-inside: avoid;
}
.checklist-item:last-child { border-bottom: 0; }
.checklist-item .cli-dot {
  flex-shrink: 0; width: 2.4mm; height: 2.4mm;
  background: var(--gold); border-radius: 50%;
  margin-top: 1.6mm;
}
.checklist-item .cli-text {
  font-family: 'Tajawal', sans-serif; font-size: 10pt;
  color: var(--ink); line-height: 1.4; flex: 1;
}
.checklist-item .cli-text .en {
  display: block; font-family: 'Inter', sans-serif;
  font-style: italic; font-size: 8pt; color: var(--ink-soft);
  margin-top: 0.5mm; letter-spacing: 0.02em;
}

/* 14 — AV rack hero & SLD */
.av-rack-hero { height: 60mm; }
.sld-svg-wrap {
  margin-top: 4mm; padding: 4mm 5mm;
  border-top: 0.4pt solid var(--hairline);
  border-bottom: 0.4pt solid var(--hairline);
}
.sld-svg-wrap h4 {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2mm;
}
.sld-svg { width: 100%; height: auto; display: block; }

/* 14 — AV evidence 4-tile */
.av-evidence-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3mm; margin-top: 4mm;
}
.av-evidence-4 .ave-tile { display: flex; flex-direction: column; }
.av-evidence-4 .ave-tile .imgph {
  height: 24mm; border: 0.4pt solid var(--hairline);
}

/* 15 — LOD ladder */
.lod-ladder-wrap {
  margin-top: 5mm; padding: 4mm 0;
}
.lod-ladder-wrap h4 {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2mm; text-align: center;
}
.lod-ladder { width: 100%; height: auto; display: block; }

/* 16 — KPI row 3 */
.kpi-row-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8mm; margin-top: 6mm;
  padding: 4mm 0; border-top: 0.4pt solid var(--hairline);
  border-bottom: 0.4pt solid var(--hairline);
}
.kpi-row-3 .kpi-cell { text-align: center; }
.kpi-row-3 .kpi-cell .numeral-display-md {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 110pt; line-height: 0.95; color: var(--gold);
  letter-spacing: -0.02em;
}
.kpi-row-3 .kpi-cell .kpi-eb {
  font-family: 'Inter', sans-serif; font-size: 8pt;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1.5mm;
}
.kpi-row-3 .kpi-cell .kpi-eb .ar {
  display: block; font-family: 'Tajawal', sans-serif;
  font-size: 10pt; font-weight: 700; color: var(--navy);
  letter-spacing: 0; text-transform: none; margin-top: 0.5mm;
}

/* 17 — Hold Point card */
.hold-points-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 5mm; margin-top: 5mm;
}
.hold-point-card {
  border: 0.5pt solid var(--hairline);
  padding: 4mm 5mm; background: #fff;
  display: grid; grid-template-columns: auto 1fr;
  gap: 4mm; align-items: center; break-inside: avoid;
}
.hold-point-card .hpc-mark {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 32pt; color: var(--gold); line-height: 1;
  letter-spacing: -0.02em;
}
.hold-point-card .hpc-name {
  font-family: 'Tajawal', sans-serif; font-size: 12pt;
  font-weight: 700; color: var(--navy); line-height: 1.2;
}
.hold-point-card .hpc-name .en {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 9pt; font-weight: 400; color: var(--ink-soft);
  margin-top: 0.5mm; letter-spacing: 0.02em;
}
.hold-point-card .hpc-desc {
  font-family: 'Tajawal', sans-serif; font-size: 8.5pt;
  color: var(--ink-soft); margin-top: 1mm; line-height: 1.4;
}

/* 17 — Approval flow nodes */
.approval-flow {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 3mm; margin-top: 5mm; align-items: start;
}
.approval-flow .af-node {
  display: flex; flex-direction: column; align-items: center;
  gap: 2mm; text-align: center;
}
.approval-flow .af-circle {
  width: 18mm; height: 18mm; border-radius: 50%;
  background: var(--navy); border: 1.2pt solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Cormorant Garamond', serif;
  font-size: 18pt; font-weight: 500;
}
.approval-flow .af-name {
  font-family: 'Tajawal', sans-serif; font-size: 10pt;
  font-weight: 700; color: var(--navy); margin-top: 1mm;
}
.approval-flow .af-name .en {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 8pt; font-weight: 400; color: var(--ink-soft);
  margin-top: 0.5mm;
}

/* 18 — Compliance badges 4 */
.compliance-badges {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6mm; margin-top: 8mm; padding: 4mm 0;
}
.compliance-badges .cb-tile {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 2mm; break-inside: avoid;
}
.compliance-badges .cb-icon-circle {
  width: 30mm; height: 30mm; border-radius: 50%;
  border: 0.6pt solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.compliance-badges .cb-icon-circle svg { width: 14mm; height: 14mm; }
.compliance-badges .cb-name {
  font-family: 'Tajawal', sans-serif; font-size: 11pt;
  font-weight: 700; color: var(--navy); margin-top: 1.5mm;
}
.compliance-badges .cb-name .en {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 8pt; font-weight: 400; color: var(--ink-soft);
  margin-top: 0.5mm; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 18 — File-cover montage 2x2 */
.file-cover-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4mm; margin-top: 6mm;
}
.file-cover-grid .fc-cover {
  break-inside: avoid;
}
.doc-cover-svg {
  width: 100%; height: auto; display: block;
  border: 0.4pt solid var(--hairline);
}