/* ============================================================
   institutional.css — institutional / strategic-studies aesthetic
   ============================================================
   Inspired by SC Strategy (scstrategy.co.uk).
   - Dark navy primary  #2e4752
   - Off-white text     #f5f6f0
   - Muted red accent   #ad4e49
   - Serif display      "Playfair Display" (Google Fonts) for headlines
   - Sans body          "Inter" (already loaded by pages) for prose
   - Generous whitespace, large type, two-column body layouts where useful

   Loaded LAST in <head> so it overrides earlier theme rules.
   Uses !important sparingly — only where the page's inline <style>
   would otherwise win.
   ============================================================ */

:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Institutional palette */
  --inst-ink:        #2e4752;   /* primary navy */
  --inst-ink-deep:   #1f323b;
  --inst-paper:      #f5f6f0;   /* off-white */
  --inst-paper-warm: #ede9df;
  --inst-accent:     #ad4e49;   /* muted red */
  --inst-accent-dim: rgba(173, 78, 73, 0.18);
  --inst-rule:       rgba(46, 71, 82, 0.18);
  --inst-rule-light: rgba(245, 246, 240, 0.18);
  --inst-muted:      rgba(46, 71, 82, 0.65);
  --inst-muted-light:rgba(245, 246, 240, 0.65);

  /* Override the existing page tokens so existing components
     pick up the institutional palette without rewriting every selector. */
  --bg:              var(--inst-paper);
  --bg-subtle:       var(--inst-paper-warm);
  --bg-card:         #ffffff;
  --bg-card-hover:   var(--inst-paper-warm);
  --border:          var(--inst-rule);
  --border-hover:    var(--inst-ink);
  --text:            var(--inst-ink);
  --text-muted:      var(--inst-muted);
  --text-dim:        var(--inst-muted);
  --accent:          var(--inst-ink);
  --accent-dark:     var(--inst-ink-deep);
  --accent-mid:      var(--inst-accent);
  --accent-soft:     var(--inst-accent-dim);
  --glow:            rgba(46, 71, 82, 0.04);
  --glow-soft:       rgba(46, 71, 82, 0.02);
  --surface-light:   #ffffff;
  --surface-warm:    var(--inst-paper-warm);
  --surface-border:  var(--inst-rule);
  --apps-pill-bg:    transparent;
  --apps-pill-text:  var(--inst-ink);
  --apps-pill-border:var(--inst-ink);
  --apps-pill-hover-bg:   var(--inst-ink);
  --apps-pill-hover-text: var(--inst-paper);
  --radius:          0px;
  --radius-lg:       0px;
}

[data-theme="dark"] {
  --bg:              var(--inst-ink);
  --bg-subtle:       var(--inst-ink-deep);
  --bg-card:         var(--inst-ink-deep);
  --bg-card-hover:   #2a4250;
  --border:          var(--inst-rule-light);
  --border-hover:    var(--inst-paper);
  --text:            var(--inst-paper);
  --text-muted:      var(--inst-muted-light);
  --text-dim:        var(--inst-muted-light);
  --accent:          var(--inst-paper);
  --accent-dark:     var(--inst-paper-warm);
  --accent-mid:      var(--inst-accent);
  --accent-soft:     var(--inst-accent-dim);
  --glow:            rgba(245, 246, 240, 0.04);
  --glow-soft:       rgba(245, 246, 240, 0.02);
  --surface-light:   var(--inst-ink-deep);
  --surface-warm:    #263a44;
  --surface-border:  var(--inst-rule-light);
  --apps-pill-bg:    transparent;
  --apps-pill-text:  var(--inst-paper);
  --apps-pill-border:var(--inst-paper);
  --apps-pill-hover-bg:   var(--inst-paper);
  --apps-pill-hover-text: var(--inst-ink);
}

/* ============================================================
   Typography
   ============================================================ */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em !important;
  color: var(--inst-ink);
  background: var(--inst-paper);
}

[data-theme="dark"] body {
  color: var(--inst-paper);
  background: var(--inst-ink);
}

/* All display headlines use the serif. */
h1, h2, h3,
.hero h1, .hero h2,
.hero-title, .section-title, .display, .editorial,
.heading-serif, .inst-headline {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  color: inherit;
}

h1, .hero-title, .inst-hero-title {
  font-size: clamp(2.6rem, 6vw, 5.6rem) !important;
  font-weight: 500 !important;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
  line-height: 1.25 !important;
  font-family: 'Playfair Display', serif !important;
}

p, li, dd {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: inherit;
}

/* Section eyebrows in small-caps — SC Strategy style. */
.eyebrow, .small-heading, .label, .section-label {
  font-family: 'Inter', sans-serif !important;
  font-variant: small-caps !important;
  letter-spacing: 0.12em !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--inst-muted);
  text-transform: none !important;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .small-heading,
[data-theme="dark"] .label,
[data-theme="dark"] .section-label {
  color: var(--inst-muted-light);
}

/* ============================================================
   Layout primitives
   ============================================================ */

.inst-page {
  background: var(--inst-paper);
  color: var(--inst-ink);
  min-height: 100vh;
}

.inst-page.dark {
  background: var(--inst-ink);
  color: var(--inst-paper);
}

.inst-container {
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

/* Dark hero — full viewport navy + cream, SC-Strategy style.
   Force regardless of the page's data-theme value. */
.inst-hero-dark,
.hero.inst-hero-dark,
section.inst-hero-dark,
section.hero.inst-hero-dark {
  background: var(--inst-ink) !important;
  background-image: none !important;
  color: var(--inst-paper) !important;
  min-height: auto !important;
  padding: 9rem 0 4rem 0 !important;
  position: relative !important;
  border-bottom: 0 !important;
  /* Defeat per-page .hero rules: grid/flex layout, max-width, centering,
     padding, and competing !important backgrounds across all pages. */
  display: block !important;
  grid-template-columns: none !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  text-align: left !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Ensure inner container (and any per-page .hero descendant CSS) doesn't
   reintroduce centering, narrow max-widths, or unwanted text-align. */
.inst-hero-dark .inst-container,
.inst-hero-dark .container {
  text-align: left !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.inst-hero-dark h1,
.inst-hero-dark .inst-hero-title,
.inst-hero-dark p,
.inst-hero-dark .inst-eyebrow {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.inst-hero-dark .inst-hero-title,
.inst-hero-dark .inst-two-col p {
  max-width: none !important;
}

/* Defeat per-page .hero p / .hero h1 sizing & centering that would
   otherwise leak through to descendants in the dark hero. */
.inst-hero-dark .inst-two-col > div > p {
  font-size: 1.18rem !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.55 !important;
  color: var(--inst-paper) !important;
  margin: 0 0 1.25rem 0 !important;
}

.inst-hero-dark *,
.inst-hero-dark h1,
.inst-hero-dark h2,
.inst-hero-dark h3,
.inst-hero-dark p,
.inst-hero-dark a,
.inst-hero-dark li,
.inst-hero-dark .eyebrow,
.inst-hero-dark .inst-eyebrow {
  color: var(--inst-paper) !important;
}

.inst-hero-dark .muted,
.inst-hero-dark p.muted,
.inst-hero-dark .inst-muted-text {
  color: var(--inst-muted-light) !important;
}

/* The .reveal class on per-page heroes sets opacity:0 + translateY(30px)
   and waits for an IntersectionObserver to add .visible. If that JS
   doesn't run, fires late, or is interrupted mid-animation, the title
   renders as a ghost rectangle with cream-tinted text. Within the dark
   hero we don't want any of that — just show the content immediately.
   Selectors below cover every nesting depth a per-page CSS might use. */
.inst-hero-dark .reveal,
.inst-hero-dark .reveal-d1,
.inst-hero-dark .reveal-d2,
.inst-hero-dark .reveal-d3,
.inst-hero-dark .reveal-d4,
.hero.inst-hero-dark .reveal,
section.hero.inst-hero-dark .reveal,
section.hero.inst-hero-dark .reveal.reveal-d1,
section.hero.inst-hero-dark .reveal.reveal-d2,
section.hero.inst-hero-dark .reveal.reveal-d3,
section.hero.inst-hero-dark .reveal.reveal-d4,
section.hero.inst-hero-dark h1.reveal,
section.hero.inst-hero-dark p.reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Belt-and-braces: the title itself, no matter what the per-page CSS does. */
section.hero.inst-hero-dark h1.inst-hero-title,
section.hero.inst-hero-dark .inst-hero-title,
.hero.inst-hero-dark h1.inst-hero-title {
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--inst-paper) !important;
  -webkit-text-fill-color: var(--inst-paper) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  outline: 0 !important;
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif !important;
  font-weight: 400 !important;
}

/* Suppress per-page decorative pseudo-elements that sit on top of the
   dark hero (radial-glow ::before, repeating-stripe ::after, etc.). On
   the original light hero these were subtle background flourishes; on
   our shortened dark hero they collide with the title and render as a
   bright rectangle behind the text. */
.inst-hero-dark::before,
.inst-hero-dark::after,
.hero.inst-hero-dark::before,
.hero.inst-hero-dark::after,
section.inst-hero-dark::before,
section.inst-hero-dark::after,
section.hero.inst-hero-dark::before,
section.hero.inst-hero-dark::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.inst-hero-dark .inst-hero-title {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif !important;
  font-size: clamp(3.4rem, 8vw, 7rem) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.015em !important;
  max-width: 16ch !important;
  margin: 0 0 4rem 0 !important;
  color: var(--inst-paper) !important;
}

.inst-hero-dark .inst-eyebrow {
  display: inline-block;
  padding: 0;
  border: 0 !important;
  font-variant: small-caps !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
  opacity: 0.85 !important;
}

.inst-hero-dark .inst-two-col {
  margin-top: 6rem !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 5rem !important;
  align-items: start !important;
}

@media (max-width: 880px) {
  .inst-hero-dark .inst-two-col {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .inst-hero-dark { padding: 6rem 0 4rem 0 !important; min-height: auto !important; }
}

.inst-hero-dark .inst-two-col p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
  margin-bottom: 1.5rem !important;
  color: var(--inst-paper) !important;
}

.inst-hero-dark .inst-arrow-list li {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.6rem !important;
  color: var(--inst-paper) !important;
}

.inst-hero-dark .inst-arrow-list li a {
  color: var(--inst-paper) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.inst-hero-dark .inst-arrow-list li a::after {
  content: " →" !important;
  display: inline-block !important;
  margin-left: 0.5rem !important;
  transition: transform 0.2s !important;
  color: var(--inst-paper) !important;
}

.inst-hero-dark .inst-arrow-list li a:hover::after {
  transform: translateX(0.3rem) !important;
}

/* Subtle thin rule above the two-column block, like SC Strategy */
.inst-hero-dark .inst-divider {
  border: 0;
  border-top: 1px solid var(--inst-rule-light);
  margin: 0 0 4rem 0;
  width: 100%;
}

/* Buttons in the dark hero */
.inst-hero-dark .btn,
.inst-hero-dark a.btn {
  border-color: var(--inst-paper) !important;
  color: var(--inst-paper) !important;
  background: transparent !important;
}

.inst-hero-dark .btn:hover,
.inst-hero-dark a.btn:hover {
  background: var(--inst-paper) !important;
  color: var(--inst-ink) !important;
}

.inst-hero-dark .btn:hover *,
.inst-hero-dark a.btn:hover * {
  color: var(--inst-ink) !important;
}

.inst-hero-dark .btn-primary {
  background: var(--inst-paper) !important;
  color: var(--inst-ink) !important;
  border-color: var(--inst-paper) !important;
}

.inst-hero-dark .btn-primary:hover {
  background: var(--inst-accent) !important;
  color: var(--inst-paper) !important;
  border-color: var(--inst-accent) !important;
}

.inst-hero-dark .btn-primary:hover * {
  color: var(--inst-paper) !important;
}

/* Hide all the old hero-meta icons / app sub-nav inside the dark hero;
   they were the old AI-shouty chips. Keep DOM for SEO, hide visually. */
.inst-hero-dark .hero-meta,
.inst-hero-dark .apps-subnav,
.inst-hero-dark .hero-illustration {
  display: none !important;
}

/* The old "<section class='hero'>" wrapper still has its own padding/bg
   from the inline <style>. Neutralise it when .inst-hero-dark is applied. */
section.hero.inst-hero-dark {
  background: var(--inst-ink) !important;
  margin: 0 !important;
}

/* Light section that follows the dark hero — SC-style ABOUT block */
.inst-section-light {
  background: var(--inst-paper) !important;
  color: var(--inst-ink) !important;
  padding: 6rem 0 !important;
}

.inst-section-light * { color: var(--inst-ink); }
.inst-section-light h2 {
  font-size: clamp(2.2rem, 5vw, 4.2rem) !important;
  margin-bottom: 2rem !important;
}

/* Old hero-bg gradients etc. */
section.hero.inst-hero-dark::before,
section.hero.inst-hero-dark::after {
  display: none !important;
}

/* ============================================================
   SC-style "big menu" — 4 large arrowed links to subpages,
   continues the dark hero on the same navy background.
   ============================================================ */

.inst-big-menu-section {
  background: var(--inst-ink) !important;
  color: var(--inst-paper) !important;
  padding: 4rem 0 8rem 0 !important;
  border-top: 1px solid var(--inst-rule-light) !important;
}

.inst-big-menu {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 3rem !important;
}

@media (max-width: 900px) {
  .inst-big-menu {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .inst-big-menu {
    grid-template-columns: 1fr !important;
  }
}

.inst-big-menu a {
  display: block !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid var(--inst-rule-light) !important;
  color: var(--inst-paper) !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}

.inst-big-menu a:hover {
  opacity: 0.7 !important;
}

.inst-big-menu .inst-small-label {
  font-family: 'Inter', sans-serif !important;
  font-variant: small-caps !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  opacity: 0.75 !important;
  margin-bottom: 1rem !important;
  display: block !important;
  color: var(--inst-paper) !important;
}

.inst-big-menu .inst-big-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.7rem, 2.2vw, 2.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  color: var(--inst-paper) !important;
}

.inst-big-menu .inst-big-heading::after {
  content: "→" !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  transition: transform 0.2s !important;
  color: var(--inst-paper) !important;
}

.inst-big-menu a:hover .inst-big-heading::after {
  transform: translateX(0.4rem) !important;
}

/* ============================================================
   Hide legacy QNeura sections on the home page only.
   Keeps them in the DOM for SEO crawlers but visually removes
   the engagement-card / architecture-diagram / founder-card
   blocks that don't fit the SC-Strategy one-screen home.
   The data still lives on engagements/apps/about subpages.
   ============================================================ */

body.inst-home-minimal section:not(.hero):not(.inst-big-menu-section):not(.inst-footer-section),
body.inst-home-minimal #engagements,
body.inst-home-minimal #founder,
body.inst-home-minimal #contact,
body.inst-home-minimal .hero-illustration,
body.inst-home-minimal .arch-diagram {
  display: none !important;
}

.inst-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 2.5rem;
}

@media (max-width: 820px) {
  .inst-two-col { grid-template-columns: 1fr; gap: 2rem; }
  .inst-hero { padding: 5rem 0 4rem 0; }
}

.inst-two-col h3 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  margin-bottom: 1.5rem !important;
}

.inst-two-col p {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.2rem !important;
}

.inst-arrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inst-arrow-list li {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  margin-bottom: 0.6rem;
}

.inst-arrow-list li::after {
  content: " →";
  color: var(--inst-accent);
  margin-left: 0.4rem;
}

/* Section dividers and rules */
.inst-rule {
  border: 0;
  border-top: 1px solid var(--inst-rule);
  margin: 4rem 0;
}

.inst-page.dark .inst-rule {
  border-top-color: var(--inst-rule-light);
}

/* ============================================================
   Buttons — institutional, restrained
   ============================================================ */

.btn, .cta, .nav-cta,
button.btn, a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.85rem 1.5rem !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: background 0.2s, color 0.2s !important;
  cursor: pointer !important;
}

.btn:hover, .cta:hover, .nav-cta:hover {
  background: currentColor !important;
}

.btn:hover *, .cta:hover *, .nav-cta:hover * {
  color: var(--inst-paper) !important;
}

[data-theme="dark"] .btn:hover *,
[data-theme="dark"] .cta:hover * {
  color: var(--inst-ink) !important;
}

/* Primary/filled button */
.btn-primary {
  background: var(--inst-ink) !important;
  color: var(--inst-paper) !important;
  border-color: var(--inst-ink) !important;
}

.btn-primary:hover {
  background: var(--inst-accent) !important;
  border-color: var(--inst-accent) !important;
}

[data-theme="dark"] .btn-primary {
  background: var(--inst-paper) !important;
  color: var(--inst-ink) !important;
  border-color: var(--inst-paper) !important;
}

/* ============================================================
   Cards — restrained, low-shadow
   ============================================================ */

.card, .feature-card, .service-card, .pricing-card,
.app-card, .book-card, .pub-card {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--inst-rule) !important;
  box-shadow: none !important;
  padding: 2rem !important;
  transition: border-color 0.2s !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .app-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .pub-card {
  border-color: var(--inst-rule-light) !important;
}

.card:hover, .feature-card:hover, .service-card:hover,
.app-card:hover, .book-card:hover, .pub-card:hover {
  border-color: currentColor !important;
}

/* ============================================================
   Navigation — minimal serif logo + sans menu
   ============================================================ */

#nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 1rem 0 !important;
}

#nav.scrolled {
  background: rgba(245, 246, 240, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 1px 0 var(--inst-rule) !important;
}

[data-theme="dark"] #nav.scrolled {
  background: rgba(46, 71, 82, 0.92) !important;
  box-shadow: 0 1px 0 var(--inst-rule-light) !important;
}

#nav .nav-logo {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.01em !important;
  color: var(--inst-ink) !important;
}

[data-theme="dark"] #nav .nav-logo {
  color: var(--inst-paper) !important;
}

#nav .nav-links a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  font-variant: small-caps !important;
  letter-spacing: 0.08em !important;
  color: var(--inst-muted) !important;
  text-transform: none !important;
  padding: 0.5rem 0.8rem !important;
}

#nav .nav-links a:hover,
#nav .nav-links a.active {
  color: var(--inst-ink) !important;
  background: transparent !important;
}

[data-theme="dark"] #nav .nav-links a {
  color: var(--inst-muted-light) !important;
}

[data-theme="dark"] #nav .nav-links a:hover,
[data-theme="dark"] #nav .nav-links a.active {
  color: var(--inst-paper) !important;
}

/* When a page uses the dark hero, the nav sits on navy at top of page.
   Force the menu to be cream-on-navy while NOT scrolled. */
body.inst-home-minimal #nav:not(.scrolled) .nav-logo,
body.inst-page-dark #nav:not(.scrolled) .nav-logo {
  color: var(--inst-paper) !important;
}

body.inst-home-minimal #nav:not(.scrolled) .nav-links a,
body.inst-page-dark #nav:not(.scrolled) .nav-links a {
  color: var(--inst-muted-light) !important;
}

body.inst-home-minimal #nav:not(.scrolled) .nav-links a:hover,
body.inst-home-minimal #nav:not(.scrolled) .nav-links a.active,
body.inst-page-dark #nav:not(.scrolled) .nav-links a:hover,
body.inst-page-dark #nav:not(.scrolled) .nav-links a.active {
  color: var(--inst-paper) !important;
  background: transparent !important;
}

body.inst-home-minimal #nav:not(.scrolled) .nav-cta,
body.inst-page-dark #nav:not(.scrolled) .nav-cta {
  color: var(--inst-paper) !important;
  border-color: var(--inst-rule-light) !important;
}

body.inst-home-minimal #nav:not(.scrolled) .theme-btn,
body.inst-page-dark #nav:not(.scrolled) .theme-btn {
  color: var(--inst-paper) !important;
}

/* When scrolled, nav switches to paper bg — restore dark text/icons
   so the menu remains legible over light content below the hero. */
body.inst-home-minimal #nav.scrolled .nav-logo,
body.inst-page-dark #nav.scrolled .nav-logo {
  color: var(--inst-ink) !important;
}

body.inst-home-minimal #nav.scrolled .nav-links a,
body.inst-page-dark #nav.scrolled .nav-links a {
  color: var(--inst-muted) !important;
}

body.inst-home-minimal #nav.scrolled .nav-links a:hover,
body.inst-home-minimal #nav.scrolled .nav-links a.active,
body.inst-page-dark #nav.scrolled .nav-links a:hover,
body.inst-page-dark #nav.scrolled .nav-links a.active {
  color: var(--inst-ink) !important;
  background: transparent !important;
}

body.inst-home-minimal #nav.scrolled .nav-cta,
body.inst-page-dark #nav.scrolled .nav-cta {
  color: var(--inst-paper) !important;
  background: var(--inst-ink) !important;
  border-color: var(--inst-ink) !important;
}

body.inst-home-minimal #nav.scrolled .theme-btn,
body.inst-page-dark #nav.scrolled .theme-btn {
  color: var(--inst-ink) !important;
}

/* Footer badge pills — fix low-contrast text/bg combo from the
   per-page .modern-footer styles where text was rgba(255,255,255,0.58)
   over a near-black bg and read as invisible. */
.modern-footer .footer-badge,
.footer-badge {
  background: transparent !important;
  border: 1px solid rgba(245, 246, 240, 0.35) !important;
  color: var(--inst-paper) !important;
  opacity: 0.92 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
}

/* Subpage dark-hero variant: shorter than home, same look.
   Selectors mirror the ones used by the full dark hero rule above so
   specificity wins, and min-height: 100vh does not leak through. */
.inst-hero-dark.inst-hero-subpage,
.hero.inst-hero-dark.inst-hero-subpage,
section.inst-hero-dark.inst-hero-subpage,
section.hero.inst-hero-dark.inst-hero-subpage {
  min-height: auto !important;
  padding: 8rem 0 4rem 0 !important;
}

/* ============================================================
   Footer
   ============================================================ */

footer, .site-footer {
  background: var(--inst-ink) !important;
  color: var(--inst-paper) !important;
  padding: 4rem 0 2rem 0 !important;
  border-top: 0 !important;
}

footer * { color: var(--inst-paper) !important; }

footer a {
  color: var(--inst-paper) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--inst-rule-light) !important;
  transition: border-color 0.2s !important;
}

footer a:hover {
  border-bottom-color: var(--inst-paper) !important;
}

/* ============================================================
   Misc resets that the old palette imposed
   ============================================================ */

.gradient, .rainbow, .shimmer, .gradient-bg {
  background: var(--inst-ink) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--inst-paper) !important;
  -webkit-text-fill-color: var(--inst-paper) !important;
}

.glow, .glow-card {
  box-shadow: none !important;
}

/* Pull-quote blocks */
blockquote, .pullquote {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
  border-left: 2px solid var(--inst-accent) !important;
  padding-left: 1.5rem !important;
  margin: 2rem 0 !important;
}

/* Selection */
::selection {
  background: var(--inst-accent);
  color: var(--inst-paper);
}
