/* ==========================================================================
   rivei.css: site-wide layer for riveiholdings.com (Holdings, Advisors, root)
   Loaded on every page AFTER its page-type stylesheet, so it wins ties.
   Anything that must look identical across Holdings and Advisors lives here:
   header chrome, labels, contrast, motion, focus, footer, shared components.
   Change it once here; do not re-add these rules to the page-type files.
   Updated 2026-10 (refresh: glass header, label case, editorial components).
   ========================================================================== */

:root {
  --tan-ink: #80603B;              /* tan for text on light backgrounds: 4.7:1 on off-white */
  --tan-light: #C9A57A;            /* tan for text on dark backgrounds: 4.9:1 on teal */
  --blue-ink: #3B6F7F;             /* mid-blue for links on light backgrounds */
  --label-color: var(--tan-ink);
  --content-w: 1080px;
  --glass: rgba(25, 40, 45, 0.30);
  --glass-firm: rgba(25, 40, 45, 0.88);
  --rule-light: rgba(34, 63, 69, 0.22);
  --rule-dark: rgba(230, 233, 226, 0.14);
}

/* Dark sections: labels switch to the light tan */
.hero, .page-header, .detail-hero, .criteria, .principles, .connect, .problems, .avoid,
.contact-form-section, .stakes, .cta-band, .detail-cta, footer, .footnotes, .disclaimer {
  --label-color: var(--tan-light);
}

/* --------------------------------------------------------------------------
   1. Header chrome: one translucent slab over the hero, firms up over content
   -------------------------------------------------------------------------- */
.cross-line-inner, .nav-inner { max-width: calc(var(--content-w) + 4rem); }

.cross-line-strip, nav {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 0;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.cross-line-strip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
nav { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transition: opacity 0.35s ease;
}
body.is-scrolled .cross-line-strip, body.is-scrolled nav { background: var(--glass-firm); }
body.is-scrolled nav { border-bottom-color: rgba(95, 158, 176, 0.16); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5); }
body.is-scrolled nav::after { opacity: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cross-line-strip, nav { background: rgba(25, 40, 45, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .cross-line-strip, nav { background: #19282D; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.cross-line-links a { color: rgba(230, 233, 226, 0.74); }
.cross-line-lang .lang-inactive { color: rgba(230, 233, 226, 0.66); }
.cross-line-lang .lang-sep { color: rgba(230, 233, 226, 0.35); }
.nav-links a { color: rgba(230, 233, 226, 0.84); }
.nav-links a[aria-current="page"] { color: var(--off-white); border-bottom-color: var(--tan); }
.nav-links { gap: 2.25rem; }

/* Phone-only platform + language row inside the menu */
.menu-platform { display: none; }

@media (max-width: 768px) {
  .cross-line-strip { display: none; }
  nav { top: 0; }
  .nav-inner { height: 60px; padding: 0 1.25rem; }
  .nav-logo img { height: 30px; width: auto; }
  [id] { scroll-margin-top: 76px; }
  .nav-links.open {
    top: 60px; left: 0; right: 0;
    background: #19282D;               /* solid: glass cannot blur inside the bar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 1.1rem;
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .nav-links.open .menu-platform {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding-top: 1rem; margin-top: 0.35rem; border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .menu-platform .mp-links { display: flex; gap: 1.1rem; }
  .menu-platform a, .menu-platform button, .menu-platform .lang-active {
    border: 0 !important; padding: 0 !important; background: none;
    font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(230, 233, 226, 0.74); cursor: pointer;
  }
  .menu-platform a.is-active, .menu-platform .lang-active { color: var(--off-white); }
  .menu-platform .mp-lang { display: flex; gap: 0.5rem; align-items: center; color: rgba(230, 233, 226, 0.35); font-size: 0.72rem; }
  .hero h1 .br-wide { display: none; }
  .hero h1 { font-size: clamp(2.1rem, 9.2vw, 2.6rem); }
  .detail-hero { padding-top: 120px; }
}

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -200px; z-index: 300;
  background: var(--off-white); color: var(--navy); padding: 0.6rem 1rem; border-radius: 3px;
  font: 600 0.9rem 'Montserrat', sans-serif; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mid-blue); outline-offset: 3px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   2. Labels: normal capitalization, no bar, contrast-safe tan
   -------------------------------------------------------------------------- */
.section-label {
  text-transform: none; letter-spacing: 0.01em; font-size: 1.05rem; font-weight: 600;
  color: var(--label-color); margin-bottom: 0.4rem;
}
.section-label::after, .section-label-center::after { display: none; }
.manifesto-eyebrow, .detail-hero-eyebrow, .stage-active-eyebrow, .compare-eyebrow, .stakes-eyebrow,
.step-eyebrow, .facts-label {
  text-transform: none; letter-spacing: 0.01em; font-weight: 600;
}
.manifesto-eyebrow { font-size: 1.05rem; color: var(--tan-light); }
.detail-hero-eyebrow { font-size: 1.05rem; color: var(--tan-light); }
.facts-label { font-size: 1rem; color: var(--tan-ink); }
.fact-stat { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; color: var(--tan-ink); }
.asset-card .asset-tag { text-transform: none; letter-spacing: 0.01em; font-size: 0.9rem; color: var(--tan-ink); }
.tile-audience { text-transform: none; letter-spacing: 0.01em; font-size: 0.85rem; }
.team-title { color: var(--tan-ink); }
.footnote-ref { color: var(--tan-ink); }

/* Inline text link (replaces the old uppercase link with an arrow) */
.text-link {
  color: var(--tan-ink); text-decoration: none; font-size: 0.95rem; font-weight: 600;
  border-bottom: 1px solid rgba(128, 96, 59, 0.45); padding-bottom: 2px;
}
.text-link:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* Body copy: regular weight reads better than 300 at 16px */
.section-body, .criteria-sub, .approach-card p, .benefit-desc, .step-desc, .principle-desc, .team-bio { font-weight: 400; }

/* --------------------------------------------------------------------------
   3. Motion: one entrance on the hero, nothing else fades in
   -------------------------------------------------------------------------- */
.fade-in, .fade-in-card { opacity: 1 !important; transform: none !important; }
.hero-content.fade-in { opacity: 1; animation: rv-rise 0.8s ease-out both; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fact-card:hover, .criteria-card:hover, .benefit-card:hover, .kpi:hover, .related-card:hover {
  transform: none; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   4. Holdings: Approach as editorial columns, Criteria left-aligned
   -------------------------------------------------------------------------- */
.approach-grid { gap: 3rem; margin-top: 2.75rem; }
.approach-card {
  background: none; padding: 1.5rem 0 0; min-height: 0; border-radius: 0; overflow: visible;
  border-top: 1px solid var(--rule-light);
}
.approach-card::before, .approach-card::after, .approach-card-accent { display: none !important; }
.approach-card:hover, .approach-card.fade-in-card.visible:hover { transform: none; box-shadow: none; }
.approach-card h3 { color: var(--teal); font-size: 1.6rem; margin-bottom: 0.75rem; }
.approach-card p { color: var(--text); font-size: 1rem; line-height: 1.7; }

.criteria-card { text-align: left; padding: 1.6rem 1.5rem; }
.criteria-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(230, 233, 226, 0.1); }
.criteria-icon { justify-content: flex-start; margin-bottom: 0.85rem; }
.criteria-sub { color: rgba(230, 233, 226, 0.76); }

/* --------------------------------------------------------------------------
   5. Principles (Holdings + Advisors): readable at rest; first letter spells D-RIVEI
   -------------------------------------------------------------------------- */
.principles .container { max-width: var(--content-w); }
.principles .section-title, .principles .section-label, .principles-intro { text-align: left; margin-left: 0; margin-right: 0; }
.principles-grid, .principles-grid.horizontal {
  grid-template-columns: repeat(3, 1fr); gap: 0 3rem; max-width: none; margin-left: 0; margin-right: 0; grid-auto-rows: auto;
}
.principle-item, .principles-grid.horizontal .principle-item {
  background: none !important; border: 0; border-top: 1px solid var(--rule-dark); border-radius: 0;
  text-align: left; align-items: flex-start; justify-content: flex-start; padding: 1.4rem 0 1.6rem !important; min-height: 0;
}
.principle-desc, .principles-grid.horizontal .principle-desc {
  visibility: visible !important; opacity: 1 !important; font-size: 0.95rem; color: rgba(230, 233, 226, 0.8); margin-top: 0.45rem;
}
.principle-name, .principles-grid.horizontal .principle-name { font-size: 1.35rem; }
.principle-name::first-letter { color: var(--tan-light); }
.principle-item:hover .principle-name, .principle-item.active .principle-name { color: var(--off-white); }
@media (max-width: 768px) {
  .principles-grid, .principles-grid.horizontal { grid-template-columns: 1fr; gap: 0; }
  .principle-item, .principles-grid.horizontal .principle-item { padding: 1rem 0 1.15rem !important; }
}

/* --------------------------------------------------------------------------
   6. Advisors: benefits are not a sequence (no numerals, no accent bar)
   -------------------------------------------------------------------------- */
.approach-benefits { gap: 3rem; margin-top: 2rem; }
.benefit-card { background: none; box-shadow: none; border-top: 1px solid var(--rule-light); border-radius: 0; padding: 1.4rem 0 0; }
.benefit-numeral { display: none; }
.benefit-label { font-size: 1.45rem !important; }

/* KPI tiles (Advisors home): same editorial treatment, no tan bar */
.kpi { background: none; border-bottom: 0; border-top: 1px solid var(--rule-light); padding: 1.4rem 0 0; text-align: left; align-items: flex-start; }
.kpi-label { text-align: left; }

/* --------------------------------------------------------------------------
   7. Advisors: the process IS a sequence, shown on a quiet rail
   -------------------------------------------------------------------------- */
.plan-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; justify-content: stretch;
  border-top: 1px solid rgba(34, 63, 69, 0.25); padding-top: 2.25rem; margin-top: 3rem;
}
.step-arrow { display: none; }
.step { align-items: flex-start; text-align: left; position: relative; flex: none; max-width: none; }
.step::before {
  content: ''; position: absolute; top: calc(-2.25rem - 6px); left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tan); box-shadow: 0 0 0 4px var(--rail-gap, var(--off-white));
}
.step-eyebrow { font-size: 1rem; color: var(--tan-ink); margin-bottom: 0.3rem; }
.step-circle { width: auto !important; height: auto !important; border-radius: 0; background: none !important; padding: 0 !important; margin: 0 0 0.7rem; display: block; text-align: left; }
.step-circle:hover, .step.step-link:hover .step-circle-1 { transform: none; box-shadow: none; outline: none; }
.step-circle-label { color: var(--teal) !important; font-size: 1.5rem !important; text-align: left; }
.step-desc { text-align: left; max-width: none; }
@media (max-width: 900px) {
  .plan-row { grid-template-columns: 1fr; gap: 2rem; border-top: 0; border-left: 1px solid rgba(34, 63, 69, 0.25); padding: 0 0 0 1.5rem; }
  .step { max-width: none; }
  .step::before { top: 0.35rem; left: calc(-1.5rem - 6px); }
  .step-circle-label { font-size: 1.3rem !important; }
}

/* --------------------------------------------------------------------------
   8. Forms and legal text: same component on every page, readable contrast
   -------------------------------------------------------------------------- */
.form-submit-row { justify-content: center; }
.fam-advisors .contact-form-submit { background: var(--tan); border-color: var(--tan); color: var(--navy); }
.fam-advisors .contact-form-submit:hover:not(:disabled) { background: var(--off-white); border-color: var(--off-white); }
.connect-intro, .contact-form-intro { color: rgba(230, 233, 226, 0.74); }
.form-optional { color: rgba(230, 233, 226, 0.64); }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(230, 233, 226, 0.5); }
.footnotes p { color: rgba(230, 233, 226, 0.66); }
.footnotes sup { color: var(--tan-light); }
.disclaimer p, .footer-disclaimer, .footer-disclaimer p { color: rgba(230, 233, 226, 0.66); }
.footer-copy { color: rgba(230, 233, 226, 0.62); }
.footer-links { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.footer-linkedin { color: var(--mid-blue); display: flex; transition: color 0.2s; }
.footer-linkedin:hover { color: #fff; }
.team-linkedin { color: var(--blue-ink); }
@media (max-width: 768px) { .footer-links { justify-content: center; } }

/* --------------------------------------------------------------------------
   9. Advisors home hero: a soft scrim behind the text so it reads over the bridge
   -------------------------------------------------------------------------- */
.fam-advisors .hero-bg::after {
  background:
    radial-gradient(ellipse 62% 48% at 50% 54%, rgba(25, 40, 45, 0.58) 0%, rgba(25, 40, 45, 0.25) 60%, rgba(25, 40, 45, 0) 100%),
    linear-gradient(180deg, rgba(25, 40, 45, 0.32) 0%, rgba(25, 40, 45, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   10. QA follow-ups (2026-10)
   -------------------------------------------------------------------------- */
/* Mega menu sits inside the glass bar, where a second blur cannot work: keep it solid */
.megamenu { background: #1B2B30; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* KPI tiles: no fixed height once the boxes are gone; two per row on phones */
.kpi { min-height: 0; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; } }
/* Rail dots sit on a white section on the Advisors home */
.pt-advisors-home #plan { --rail-gap: #fff; }
/* Advisors hero: a little more separation for the text over the bridge */
.fam-advisors .hero h1, .fam-advisors .hero-sub, .fam-advisors .hero-guide { text-shadow: 0 1px 16px rgba(25, 40, 45, 0.6); }
.connect-email-line { color: rgba(230, 233, 226, 0.72); }
.spread-meta { color: var(--tan-light); }
.related-card-link { color: var(--tan-ink); }
@media (max-width: 768px) { .megamenu { background: transparent; } }
.page-header .section-label { font-weight: 600; font-size: 1.05rem; }
.page-header p:not(.section-label) { font-weight: 400; color: rgba(230, 233, 226, 0.82); }

/* Holdings has seven menu items: below 1180 px they collided with the logo and wrapped
   (pre-existing). Use the menu button from 1180 px down instead. */
.nav-links .nav-login { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1180px) {
  .fam-holdings .nav-toggle { display: block; }
  .fam-holdings .nav-links { display: none; }
  .fam-holdings .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: #19282D; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem calc((100% - var(--content-w)) / 2 + 2rem); padding-left: max(2rem, calc((100% - var(--content-w)) / 2)); gap: 1.1rem;
  }
  .fam-holdings .nav-links.open li { list-style: none; }
}
/* Advisors (three items) fits tablets once nothing wraps */
.fam-advisors .nav-links a { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1024px) {
  .fam-advisors .nav-links { gap: 1.25rem; }
  .fam-advisors .nav-links a { font-size: 0.7rem; letter-spacing: 0.1em; }
  .fam-advisors .nav-cta { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
}
@media (min-width: 769px) and (max-width: 880px) {
  .fam-advisors .nav-logo img { height: 30px; width: auto; }
  .fam-advisors .nav-links { gap: 1rem; }
}

/* Menu open: the bar and the sheet become one solid surface (no photo tint above a navy sheet) */
/* keep nav's backdrop-filter: it anchors the fixed mega menu; the solid color makes it invisible anyway */
body.menu-open nav, nav:has(.nav-links.open),
body.menu-open .cross-line-strip { background: #19282D; box-shadow: none; }
body.menu-open nav::after, nav:has(.nav-links.open)::after { opacity: 0; }
@media (max-width: 768px) {
  .megamenu, .has-megamenu.open .megamenu { background: transparent !important; border: 0; box-shadow: none; }
  .megamenu-col-title { color: var(--tan-light); }
}
/* Same on desktop while the Advisors mega menu is open */
nav:has(.has-megamenu.open), nav:has(.has-megamenu.is-hovered), nav:has(.has-megamenu:hover) { background: #19282D; }
body:has(.has-megamenu.open) .cross-line-strip, body:has(.has-megamenu.is-hovered) .cross-line-strip,
body:has(.has-megamenu:hover) .cross-line-strip { background: #19282D; }
nav:has(.has-megamenu.open)::after, nav:has(.has-megamenu.is-hovered)::after, nav:has(.has-megamenu:hover)::after { opacity: 0; }

/* Phones: iOS 26 Safari paints the status-bar band from the top fixed bar's solid color and
   cannot read a blurred, see-through bar, so it falls back to the page navy. A glass bar there
   sits under a flat navy band and looks like two colors. On phones the bar is solid navy and
   reads as one piece with Safari's band; the glass effect stays on tablet and desktop. */
@media (max-width: 768px) {
  nav, body.is-scrolled nav {
    background: #19282D; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none;
  }
  nav::after { display: none; }
}