/* ============================================================
   Provenience — sections.css
   Homepage section-specific CSS (Sections 1–10) + the v1.1
   inline infographic styles. Loaded after design-system.css
   and theme.css. Consumes design tokens only.
   ============================================================ */

/* NOTE: --color-text-on-dark-secondary is defined site-wide in
   design-system.css (so it resolves on pillar/interior pages too,
   not only here). No local alias needed. */

/* ---------- SECTION-SPECIFIC (hero → closing) ---------- */
/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:120px;
  padding-bottom:100px;
}
.hero .display-hero{ margin-bottom:var(--space-lg); }
.hero p.body-large{ margin-bottom:var(--space-2xl); }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   MANIFESTO (Section 2)
   ============================================================ */
.manifesto-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:var(--space-2xl);
}
.manifesto-left{ max-width:480px; }
.manifesto-right{
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  padding-top:8px;
}
.manifesto-right-text{
  font-size:16px;
  line-height:26px;
  color:var(--color-text-secondary);
}
.manifesto-statement{
  font-family:var(--font-body);
  font-size:24px;
  line-height:34px;
  font-weight:400;
  color:var(--color-text-primary);
  margin-bottom:var(--space-md);
}
.manifesto-statement .emphasis{
  display:block;
  font-weight:700;
  letter-spacing:0.02em;
  margin-top:8px;
}
.manifesto-statement-secondary{
  font-size:18px;
  line-height:28px;
  color:var(--color-text-secondary);
  margin-top:var(--space-lg);
}
.vcr-anchor{
  margin-top:var(--space-2xl);
  padding-top:var(--space-xl);
  border-top:1px solid var(--color-divider);
  font-family:var(--font-body);
  font-size:18px;
  line-height:28px;
  color:var(--color-text-secondary);
  max-width:760px;
}
.vcr-anchor strong{
  color:var(--color-text-primary);
  font-weight:600;
}

/* ============================================================
   CREDIBILITY ANCHOR (Section 3) — Minimalist strip
   ============================================================ */
.stats-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.stat{
  text-align:center;
  padding:var(--space-md) var(--space-lg);
  border-right:1px solid var(--color-border);
}
.stat:last-child{ border-right:none; }
.stat-number{
  font-family:var(--font-display);
  font-size:56px;
  line-height:60px;
  font-weight:600;
  color:var(--color-text-primary);
  margin-bottom:var(--space-sm);
  letter-spacing:-0.02em;
}
.stat-label{
  font-size:14px;
  line-height:20px;
  font-weight:500;
  color:var(--color-text-secondary);
  max-width:200px;
  margin:0 auto;
}

/* ============================================================
   FRAMEWORK (Section 4)
   ============================================================ */
.framework-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  margin-bottom:var(--space-3xl);
}
.framework-text p.body-large{ margin-top:var(--space-md); max-width:480px; }
.framework-visual{ width:100%; }
.framework-visual svg{ width:100%; height:auto; display:block; }

.pillar-cards-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-lg);
}
.pillar-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-xl);
  transition:all var(--motion-base) var(--easing);
}
.pillar-card:hover{
  background:var(--color-card-hover);
  border-color:var(--color-border-strong);
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}
.pillar-card h4{ margin-bottom:10px; }
.pillar-card p{ font-size:15px; line-height:23px; margin-bottom:var(--space-lg); }
.pillar-card .cta{
  font-size:14px;
  font-weight:500;
  color:var(--color-navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color var(--motion-base) var(--easing);
}
.pillar-card .cta:hover{ color:var(--color-gold); }
.pillar-card .cta .arrow{ transition:transform var(--motion-base) var(--easing); }
.pillar-card:hover .cta .arrow{ transform:translateX(4px); }

/* ============================================================
   STRATEGIC MOMENTS (Section 5)
   ============================================================ */
.triggers-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-lg);
  margin-top:var(--space-2xl);
}
.trigger-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:all var(--motion-base) var(--easing);
}
.trigger-card:hover{
  border-color:var(--color-border-strong);
  background:var(--color-card-hover);
}
.trigger-num{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  font-style:italic;
  color:var(--color-gold);
  margin-bottom:var(--space-md);
  letter-spacing:0.02em;
}
.trigger-card h4{
  font-size:20px;
  line-height:28px;
  margin-bottom:var(--space-sm);
}
.trigger-card p{
  font-size:14px;
  line-height:22px;
  color:var(--color-text-secondary);
}

/* ============================================================
   SECTORAL CONTEXT (Section 6)
   Desktop styling lives in the .sector-matrix block below;
   mobile .sector-card styling lives in theme.css. The older
   .sectors-grid / .sector-name / .sector-hook card model was
   removed (it was never emitted by the markup).
   ============================================================ */

/* ============================================================
   TESTIMONIALS (Section 7)
   ============================================================ */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-lg);
  margin-top:var(--space-2xl);
}
.testimonial{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  transition:all var(--motion-base) var(--easing);
}
.testimonial:hover{ border-color:var(--color-border-strong); }
.testimonial .quote-mark{
  position:absolute;
  top:18px;
  left:24px;
  font-family:var(--font-display);
  font-size:64px;
  line-height:1;
  color:var(--color-gold);
  opacity:0.3;
}
.testimonial blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:17px;
  line-height:26px;
  color:var(--color-text-primary);
  margin-bottom:var(--space-lg);
  padding-left:48px;
}
.testimonial-author{ padding-left:48px; }
.author-name{
  font-size:14px;
  font-weight:600;
  color:var(--color-text-primary);
  margin-bottom:2px;
}
.author-role{
  font-size:13px;
  color:var(--color-text-tertiary);
}

/* ============================================================
   ADVISORY ENTRY POINT (Section 8)
   ============================================================ */
.advisory-entry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3xl);
  align-items:start;
}
.advisory-entry .lead-sentence{ margin-bottom:var(--space-lg); }

/* ============================================================
   INSIGHTS (Section 9)
   ============================================================ */
.insights-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-lg);
  margin-top:var(--space-2xl);
  margin-bottom:var(--space-2xl);
}
.insight-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:all var(--motion-base) var(--easing);
  display:flex;
  flex-direction:column;
}
.insight-card:hover{
  background:var(--color-card-hover);
  border-color:var(--color-border-strong);
}
.insight-meta{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-text-muted);
  margin-bottom:var(--space-md);
}
.insight-card h4{
  font-size:18px;
  line-height:26px;
  margin-bottom:var(--space-md);
  font-weight:600;
}
.insight-card:hover h4{ color:var(--color-gold); }
.insight-card p{
  font-size:14px;
  line-height:22px;
  color:var(--color-text-secondary);
  margin-bottom:var(--space-md);
  flex-grow:1;
}
.insight-card .read{
  font-size:13px;
  font-weight:500;
  color:var(--color-navy);
}
.insights-all-cta{
  text-align:left;
}
.insights-all-cta a{
  font-size:15px;
  font-weight:500;
  color:var(--color-text-primary);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--color-text-primary);
  padding-bottom:4px;
}
.insights-all-cta a:hover{
  color:var(--color-gold);
  border-bottom-color:var(--color-gold);
}

/* ============================================================
   CLOSING CTA (Section 10) — Dark
   ============================================================ */
.closing-cta{ text-align:left; }
.closing-cta h2{ color:var(--color-text-on-dark); max-width:720px; margin-bottom:var(--space-md); }
.closing-cta .body-large{ color:var(--color-text-on-dark-secondary); margin-bottom:var(--space-2xl); }
.closing-cta .btn-accent{ margin-bottom:var(--space-2xl); }
.contact-strip{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:14px;
  color:var(--color-text-on-dark-secondary);
  flex-wrap:wrap;
}
.contact-strip a{ color:var(--color-text-on-dark); transition:color var(--motion-base) var(--easing); }
.contact-strip a:hover{ color:var(--color-gold); }
.contact-strip .divider{ color:var(--color-text-muted); }


/* ---------- INLINE INFOGRAPHICS (v1.1 placeholders) ---------- */
/* ============================================================
   INFOGRAPHIC — Architecture-model diagram (Section 2)
   Side-by-side SVG comparison of the Vendor vs Provenience
   operating model. Editorial diagram, not decoration.
   ============================================================ */
.architecture-diagram{
  margin-top:var(--space-2xl);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-bg);
  overflow:hidden;
}
.architecture-pane{
  padding:32px 36px 28px;
  display:flex;
  flex-direction:column;
}
.architecture-pane + .architecture-pane{
  border-left:1px solid var(--color-border);
  background:var(--color-bg);
}
.architecture-pane-label{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-text-tertiary);
  margin-bottom:6px;
}
.architecture-pane.is-provenience .architecture-pane-label{
  color:var(--color-navy);
}
.architecture-pane h5{
  font-family:var(--font-body);
  font-size:20px;
  font-weight:600;
  line-height:28px;
  color:var(--color-text-primary);
  margin-bottom:24px;
  letter-spacing:-0.005em;
}
.architecture-svg{
  width:100%;
  height:auto;
  margin-bottom:20px;
}
.architecture-pane ul{
  list-style:none;
  margin:auto 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:18px;
  border-top:1px solid var(--color-divider);
}
.architecture-pane li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:22px;
  color:var(--color-text-secondary);
}
.architecture-pane li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:8px;
  height:1px;
  background:var(--color-text-tertiary);
}
.architecture-pane.is-provenience li::before{
  background:var(--color-gold);
}

/* ============================================================
   INFOGRAPHIC — Credibility micro-charts (Section 3)
   Hairline visual under each stat number. No decoration —
   each chart encodes the magnitude shown by the number above.
   ============================================================ */
.stat-mini{
  margin-top:14px;
  display:flex;
  justify-content:center;
}
.stat-mini-years{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:18px;
}
.stat-mini-years span{
  width:5px;
  background:var(--color-text-muted);
  border-radius:1px;
}
.stat-mini-years span:nth-child(1){ height:6px; }
.stat-mini-years span:nth-child(2){ height:8px; }
.stat-mini-years span:nth-child(3){ height:9px; }
.stat-mini-years span:nth-child(4){ height:11px; }
.stat-mini-years span:nth-child(5){ height:12px; }
.stat-mini-years span:nth-child(6){ height:13px; }
.stat-mini-years span:nth-child(7){ height:14px; }
.stat-mini-years span:nth-child(8){ height:15px; }
.stat-mini-years span:nth-child(9){ height:16px; }
.stat-mini-years span:nth-child(10){ height:18px; background:var(--color-navy); }

.stat-mini-grid{
  display:block;
}
.stat-mini-grid circle{
  fill:var(--color-text-muted);
}

.stat-mini-jurisdictions{
  display:grid;
  grid-template-columns:repeat(6, 12px);
  gap:5px;
  align-items:center;
}
.stat-mini-jurisdictions span{
  width:12px;
  height:12px;
  border:1px solid var(--color-text-muted);
  border-radius:1px;
  background:var(--color-bg);
}
.stat-mini-jurisdictions span.home{
  background:var(--color-navy);
  border-color:var(--color-navy);
}

.stat-mini-bar{
  width:140px;
  height:6px;
  border:1px solid var(--color-text-muted);
  border-radius:1px;
  position:relative;
  overflow:hidden;
  background:var(--color-bg);
}
.stat-mini-bar::before{
  content:'';
  position:absolute;
  top:0; left:0; bottom:0;
  width:99%;
  background:var(--color-navy);
}

/* ============================================================
   INFOGRAPHIC — Entity lifecycle ruler (Section 5)
   Horizontal ruler showing five entity stages. The six trigger
   numbers are pinned to the stage at which they typically arise.
   ============================================================ */
.lifecycle-ruler{
  margin:var(--space-2xl) 0 var(--space-md);
  padding:32px 8px 0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-bg);
  position:relative;
}
.lifecycle-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:end;
  padding:0 32px;
}
.lifecycle-stage{
  position:relative;
  text-align:center;
  padding:0 8px 16px;
  border-right:1px solid var(--color-divider);
}
.lifecycle-stage:last-child{ border-right:none; }
.lifecycle-stage-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-text-tertiary);
  margin-bottom:24px;
}
.lifecycle-baseline{
  height:1px;
  background:var(--color-border-strong);
  margin:8px 24px 0;
  position:relative;
}
.lifecycle-pins{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  padding:0 32px;
  margin-top:16px;
}
.lifecycle-pin-group{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:0 4px;
}
.lifecycle-pin{
  font-family:var(--font-display);
  font-style:italic;
  font-size:14px;
  font-weight:600;
  color:var(--color-gold);
  letter-spacing:0.02em;
  padding:4px 10px;
  border:1px solid var(--color-border);
  border-radius:99px;
  background:var(--color-bg);
}
.lifecycle-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 32px 18px;
  margin-top:8px;
  border-top:1px solid var(--color-divider);
  font-size:13px;
  color:var(--color-text-tertiary);
  letter-spacing:0.01em;
}
.lifecycle-caption strong{
  color:var(--color-text-primary);
  font-weight:600;
}

/* ============================================================
   INFOGRAPHIC — Pillar × Sector matrix (Section 6)
   Replaces the previous 4-card sector grid. Four architectural
   components × four sectors. Each cell carries the regulatory
   hook for that pillar in that sector.
   ============================================================ */
.sector-matrix{
  margin-top:var(--space-2xl);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-bg);
  overflow:hidden;
  display:grid;
  grid-template-columns:200px repeat(4, 1fr);
}
.matrix-cell{
  padding:18px 20px;
  border-right:1px solid var(--color-divider);
  border-bottom:1px solid var(--color-divider);
  font-size:14px;
  line-height:20px;
  color:var(--color-text-secondary);
}
.matrix-cell:nth-child(5n){ border-right:none; }
.sector-matrix > .matrix-cell:nth-last-child(-n+5){ border-bottom:none; }
.matrix-header{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-text-secondary);
  background:var(--color-bg-alt);
  padding:18px 20px;
}
.matrix-row-header{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--color-text-primary);
  background:var(--color-bg-alt);
  padding:18px 20px;
  line-height:20px;
}
.matrix-row-header small{
  display:block;
  margin-top:4px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:13px;
  font-weight:400;
  color:var(--color-text-tertiary);
  letter-spacing:0.01em;
}
.matrix-cell.is-corner{
  background:var(--color-bg-alt);
}


/* ============================================================
   CARD BORDER STRENGTHENING (alternating-background fix)
   With strict cream/grey section alternation, cream cards sit on
   cream sections in places. The default --color-border (#E6E8EC) is
   too faint there. Use the stronger border so cards read on ANY
   section background.
   ============================================================ */
.trigger-card,
.sector-card,
.insight-card,
.testimonial,
.pillar-card {
  border-color: var(--color-border-strong);
}

/* ============================================================
   HERO EYEBROW — gold, letter-spaced (homepage hero only)
   The .eyebrow base is grey; in the hero we want it gold per
   brand. Scoped to .hero (which exists only on the homepage),
   so no other section's eyebrow is affected. Gold stays within
   the 5% accent cap (one short line).
   ============================================================ */
.hero .eyebrow {
  color: var(--color-gold);
  margin-bottom: 20px;
}
.hero .eyebrow::before {
  background: var(--color-gold);
}