/* =============================================
   ONO Advisory — Operations, Numbers, Outcomes
   Light tan theme — warm sand background,
   dark bronze accent text
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces — barely-there warm white */
  --dark:       #FDFCF9;   /* page background (near-white) */
  --dark-2:     #F8F5EF;   /* alternate section, footer (whisper step) */
  --dark-3:     #FFFFFF;   /* cards / panels / inputs (pure white) */
  --dark-4:     #FFFFFF;   /* hover lift */
  --black:      #FFFFFF;
  --navy:       #F5F1E8;

  /* =========================================================
     ACCENT COLOR — SINGLE SOURCE OF TRUTH   [ACCENT-SWAP]
     ---------------------------------------------------------
     Currently set to BLACK (placeholder). To introduce a brand
     accent color later, change ONLY the values below and it will
     propagate everywhere automatically — every element listed
     here pulls from these variables (no hard-coded accent colors
     elsewhere). When the user says "add the accent color back,"
     update these values:
         --gold / --accent          = main accent
         --gold-light / --accent-light = hover / lifted shade
         --gold-deep                = deepest shade (ONO hover)
         --accent-glow              = button shadow tint (rgba)
         --accent-rgb               = R,G,B triplet that drives ALL
                                      the subtle accent tints below
                                      (borders, hovers, focus ring,
                                      selection) via rgba(var(--accent-rgb), a)

     WHERE THE ACCENT IS APPLIED (the bullet-3 list):
       1. Filled action buttons ............. .btn-gold, .nav-cta
       2. Hero headline emphasis ............ .hero h1 em
       3. Section heading emphasis .......... h2 em
       4. Nav + footer logo "ONO" accent .... .nav-logo span,
                                              .footer-brand .logo span
       5. Step numbers (01/02/03) ........... .step-num
       6. Eyebrow labels .................... .eyebrow
       7. Card numbers / prices ............. .card-num, .card-price,
                                              td.price
       8. ONO acronym letters ............... .ono-letter (.gold-deep on hover)
       9. Accent hairlines .................. .nav-links a::after,
                                              .card::before
      10. List markers / checks ............. .panel li::before,
                                              .check-list li::before
      11. Tag / callout tints, link hovers,
          form focus ring .................. (use --accent / rgba tints)
     To restore the previous BRONZE: gold/accent #221A0D,
     light #3A2C18, deep #150F06, glow rgba(34,26,13,0.30),
     --accent-rgb 122, 95, 47.
     ========================================================= */
  --gold:        #000000;  /* primary accent (legacy var name kept) */
  --gold-light:  #1A1A1A;  /* lifted shade — hover */
  --gold-deep:   #000000;
  --accent:      #000000;
  --accent-light:#1A1A1A;
  --accent-glow: rgba(0, 0, 0, 0.30);
  --accent-rgb:  0, 0, 0;  /* drives all subtle accent tints */
  --blue:        #3F6FB0;  /* secondary accent (links) */

  /* Text — dark espresso on light bg */
  --white:      #241F18;   /* primary text */
  --off-white:  #1C1A17;
  --gray-1:     #6B6253;   /* muted body text */
  --gray-2:     #847B6A;
  --gray-3:     #9A9180;

  /* Lines */
  --border:        rgba(28, 26, 23, 0.12);
  --border-strong: rgba(28, 26, 23, 0.20);
  --border-warm:   rgba(var(--accent-rgb), 0.35);
  --border-light:  #D8CDB6;

  /* Text used on filled bronze buttons */
  --on-accent:  #F6F1E6;

  /* Type */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --max:   1140px;
  --r:     14px;
  --r-sm:  10px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--white);
  background: var(--dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(var(--accent-rgb), 0.22); color: var(--off-white); }

/* ---- Layout ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---- NAV ---- */
/* Two-tier sticky header: primary collective ribbon + contextual sub-ribbon */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s;
}
/* Keep the primary bar (which contains the dropdown + mobile menu) painting
   above the sub-ribbon. nav's backdrop-filter traps its descendants in a
   stacking context, so without this the menu renders behind .nav-sub. */
.nav-primary { position: relative; z-index: 2; }
.nav-sub { position: relative; z-index: 1; }
nav {
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s, border-color 0.3s;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.nav-logo span {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

.nav-links a {
  position: relative;
  color: var(--gray-1);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after { transform: scaleX(1); }

.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 18px -6px var(--accent-glow) !important;
  transition: transform 0.2s var(--ease), box-shadow 0.2s !important;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px -6px var(--accent-glow) !important;
}

/* Mobile nav toggle (injected by JS) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- HERO ---- */
.hero {
  background: var(--dark);
  padding: 128px 0 104px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* layered ambient glow + subtle grid */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(34,26,13,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(34,26,13,0.03) 0%, transparent 70%);
  pointer-events: none;
  animation: glowShift 14s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28,26,23,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,26,23,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

@keyframes glowShift {
  0%   { transform: translateX(-3%) translateY(0); opacity: 0.9; }
  100% { transform: translateX(3%) translateY(2%); opacity: 1; }
}

.hero .wrap { position: relative; z-index: 1; }

.hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 30px;
  backdrop-filter: blur(4px);
}

.hero h1 {
  font-family: var(--font);
  font-size: clamp(38px, 6vw, 66px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--white);
  max-width: 860px;
  margin: 0 auto 24px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero p {
  font-size: 19px;
  color: var(--gray-1);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

.hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* hero entrance animation */
.hero-tag, .hero h1, .hero p, .hero-btns, .hero .wrap > div {
  animation: heroRise 0.9s var(--ease) both;
}
.hero h1     { animation-delay: 0.06s; }
.hero p      { animation-delay: 0.14s; }
.hero-btns   { animation-delay: 0.22s; }
.hero .wrap > div:last-child { animation-delay: 0.3s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- ONO ACRONYM ROW ---- */
.ono {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.ono-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: default;
}

.ono-letter {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
  transform-origin: center;
  transition: transform 0.4s var(--ease), color 0.4s;
}

.ono-item:hover .ono-letter {
  transform: scale(1.2);
  color: var(--gold-deep);
}

.ono-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
  transition: color 0.4s;
}

.ono-item:hover .ono-label { color: var(--gray-1); }

/* slick connecting hairline + arrowhead between letters */
.ono-connector {
  position: relative;
  flex: 0 1 92px;
  min-width: 44px;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, transparent, var(--border-warm) 28%, var(--border-warm) 72%, transparent);
}

@media (max-width: 600px) {
  .ono-connector { display: none; }
  .ono { gap: 30px; }
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  letter-spacing: 0.01em;
}

.btn-gold {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 2px 12px -8px var(--accent-glow);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px var(--accent-glow);
  color: var(--on-accent);
}

.btn-ghost {
  background: rgba(28,26,23,0.02);
  color: var(--white);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: rgba(var(--accent-rgb),0.55);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-dark {
  background: #2A2620;
  color: #F4EFE4;
  border-color: rgba(28,26,23,0.15);
}
.btn-dark:hover {
  background: #1C1A17;
  border-color: rgba(var(--accent-rgb),0.5);
  transform: translateY(-1px);
}

/* Smaller secondary button tier (e.g. card "Learn more" links) */
.btn-sm {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
}

/* Full-width button (fills its container) */
.btn-block { width: 100%; }

/* ---- SECTIONS ---- */
.section { padding: 96px 0; position: relative; }
.section--mid { background: var(--dark-2); }
.section--card { background: var(--dark-3); }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

h2 {
  font-family: var(--font);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 18px;
}

h2 em {
  font-style: normal;
  color: var(--accent);
}

h3 {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 10px;
}

.lead {
  font-size: 18px;
  color: var(--gray-1);
  max-width: 660px;
  margin-bottom: 56px;
  line-height: 1.65;
}

/* ---- CARDS ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.card {
  position: relative;
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s, background 0.3s;
  overflow: hidden;
}

/* top accent line that animates in on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.card:hover {
  border-color: rgba(var(--accent-rgb),0.40);
  background: var(--dark-4);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -20px rgba(28,26,23,0.20), 0 0 0 1px rgba(var(--accent-rgb),0.08);
}
.card:hover::before { transform: scaleX(1); }

.card-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.card p { color: var(--gray-1); font-size: 15px; line-height: 1.65; }

.card-price {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

/* ---- SPLIT LAYOUT ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.split--flip > *:first-child { order: 2; }
.split--flip > *:last-child  { order: 1; }

/* ---- ASIDE PANEL ---- */
.panel {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: 0 12px 40px -28px rgba(28,26,23,0.25);
}

.panel h3 { margin-bottom: 20px; }

.panel ul { list-style: none; }
.panel ul li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--gray-1);
  font-size: 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.panel ul li:last-child { border-bottom: none; }
.panel ul li::before { content: "—"; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ---- STEPS ---- */
.steps { display: flex; flex-direction: column; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: padding-left 0.3s var(--ease);
}
.step:last-child { border-bottom: none; }
.step:hover { padding-left: 8px; }

.step-num {
  font-family: var(--font);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 2px;
  color: var(--accent);
}

.step-body h3 { margin-bottom: 6px; }
.step-body p { color: var(--gray-1); font-size: 15px; }

/* ---- CALLOUT ---- */
.callout {
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--gray-1);
  margin: 28px 0;
  line-height: 1.6;
}

/* ---- TABLE ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--dark-3);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

thead th {
  background: rgba(28,26,23,0.04);
  color: var(--gray-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 22px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--white);
}

tbody td small { color: var(--gray-1); font-size: 13px; display: block; margin-top: 3px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.2s; }
tbody tr:hover td { background: rgba(var(--accent-rgb),0.06); }

td.price { color: var(--accent); font-weight: 600; white-space: nowrap; }
td.type  { color: var(--gray-2); font-size: 14px; }

/* ---- FORM ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }

label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-1);
  letter-spacing: 0.03em;
}

input, textarea, select {
  padding: 13px 16px;
  background: var(--dark-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: var(--sans);
  color: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}

input::placeholder, textarea::placeholder { color: var(--gray-2); }
select option { background: var(--dark-3); }
textarea { min-height: 130px; resize: vertical; }

/* ---- CTA STRIP ---- */
.cta-strip {
  position: relative;
  background: var(--dark-3);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 14px;
  padding: 64px 56px;
  text-align: center;
  overflow: hidden;
}

/* ---- FOOTER ---- */
footer {
  background: var(--dark-2);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  display: block;
  margin-bottom: 14px;
}

.footer-brand .logo span {
  color: var(--accent);
}
.footer-brand p { color: var(--gray-2); font-size: 14px; line-height: 1.65; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: var(--gray-2); transition: color 0.2s; }
.footer-col ul a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  color: var(--gray-3);
  font-size: 13px;
}

/* ---- UTILITIES ---- */
.text-center { text-align: center; }
.text-gold   { color: var(--accent); }
.text-gray   { color: var(--gray-1); }
.mx-auto     { margin-left: auto; margin-right: auto; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.mb-48 { margin-bottom: 48px; }

/* ---- DIVIDER ---- */
hr { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---- CHECK LIST ---- */
.check-list { list-style: none; padding: 0; }
.check-list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--gray-1);
  font-size: 15px;
  align-items: flex-start;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- SCROLL REVEAL (progressive enhancement, JS adds .reveal) ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* staggered children within a revealed group */
.reveal-group.in > * { animation: revealRise 0.7s var(--ease) both; }
.reveal-group.in > *:nth-child(2) { animation-delay: 0.08s; }
.reveal-group.in > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-group.in > *:nth-child(4) { animation-delay: 0.24s; }

@keyframes revealRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ===== PREZI-STYLE ZOOM TRANSITIONS =====
   Headings and call-to-action blocks "zoom into focus" as they scroll in
   (class added by main.js). The hero acts as a camera that zooms through
   on scroll (transform set by main.js). GPU-friendly transforms only. */
.zoom-reveal {
  opacity: 0;
  transform: scale(0.975) translateY(10px);
  filter: blur(1.5px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
  will-change: opacity, transform, filter;
}
.zoom-reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.hero .wrap {
  transform-origin: 50% 36%;
  will-change: transform, opacity;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip > *:first-child,
  .split--flip > *:last-child { order: unset; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #FAF8F3;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.32s var(--ease), opacity 0.25s;
  }
  .nav-links.open {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 13px 28px;
    font-size: 15px;
  }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-cta {
    margin: 8px 28px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .hero { padding: 92px 0 72px; }
  .section { padding: 68px 0; }
  .step { grid-template-columns: 56px 1fr; gap: 20px; }
  .step-num { font-size: 34px; }
  .cta-strip { padding: 44px 24px; }
}

/* =============================================
   ONO COLLECTIVE — added layer
   Two-tier nav, dropdown, sub-ribbon, ONO box,
   process timeline, division cards, coming-soon.
   ============================================= */

/* ---- NAV: dropdown (desktop hover) ---- */
.nav-links .has-dropdown { position: relative; }

/* invisible bridge so the cursor can travel into the panel */
.nav-links .has-dropdown::before {
  content: '';
  position: absolute;
  top: 100%; left: -10px; right: -10px;
  height: 16px;
}

.nav-links .dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 252px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(252, 250, 245, 0.98);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 44px -22px rgba(28, 26, 23, 0.30);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 120;
}

.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-links .dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-1);
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav-links .dropdown a::after { display: none !important; }
.nav-links .dropdown a:hover,
.nav-links .dropdown a.active {
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--white);
}

/* ---- NAV: contextual sub-ribbon (tier 2) ---- */
.nav-sub {
  background: var(--dark-2);
  border-bottom: 1px solid var(--border);
  animation: subSlide 0.5s var(--ease) both;
}
@keyframes subSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-sub-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
  height: 50px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-sub-inner::-webkit-scrollbar { display: none; }

.nav-sub-brand {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-sub-brand span { color: var(--accent); }

.nav-sub ul {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
}
.nav-sub a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-1);
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav-sub a:hover,
.nav-sub a.active { color: var(--white); }
.nav-sub a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-sub-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ---- ONO BOX (hero acronym, contained treatment) ---- */
.ono-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 46px auto 0;
  padding: 26px 40px 30px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 22px 56px -34px rgba(28, 26, 23, 0.30);
}
.ono-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ono-box .ono {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 18px;
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  .ono-box { padding: 24px 26px 28px; }
  .ono-box .ono { flex-wrap: wrap; gap: 26px; }
}

/* ---- PROCESS TIMELINE (interactive, 1.2x zoom on hover) ---- */
.timeline {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
}
.tl-stage {
  position: relative;
  flex: 1;
  padding: 0 10px;
}
/* connecting hairlines either side of the node (not scaled on hover) */
.tl-stage::before,
.tl-stage::after {
  content: '';
  position: absolute;
  top: 27px;
  height: 2px;
  background: var(--border-warm);
  z-index: 0;
}
.tl-stage::before { left: 0;  width: calc(50% - 30px); }
.tl-stage::after  { right: 0; width: calc(50% - 30px); }
.tl-stage:first-child::before,
.tl-stage:last-child::after { display: none; }

.tl-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
  transform-origin: center top;
  transition: transform 0.4s var(--ease);
}
.tl-stage:hover { z-index: 3; }
.tl-stage:hover .tl-inner { transform: scale(1.2); }

.tl-num {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 1px solid var(--border-strong);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tl-stage:hover .tl-num {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.06);
}
.tl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.tl-desc {
  font-size: 13px;
  color: var(--gray-1);
  line-height: 1.55;
  max-width: 196px;
}

/* ---- EQUAL-HEIGHT PILLAR CARDS (aligned divider + button) ---- */
.pillar-grid .card { display: flex; flex-direction: column; }
.pillar-grid .card p { color: var(--gray-1); }
.pillar-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.pillar-foot .btn { margin-top: 4px; }

/* ---- DIVISION CARDS (collective home) ---- */
.division-grid .card { display: flex; flex-direction: column; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  width: fit-content;
}
.badge-live {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
}
.badge-soon {
  color: var(--gray-2);
  background: rgba(28, 26, 23, 0.03);
  border: 1px solid var(--border-strong);
}
.badge-live::before,
.badge-soon::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.division-foot { margin-top: auto; padding-top: 22px; }

/* ---- COMING SOON (Web / Automation) ---- */
.coming-hero .hero-tag { margin-bottom: 22px; }
.coming-badge {
  display: inline-block;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-2);
  border: 1px dashed var(--border-strong);
  border-radius: 100px;
  padding: 8px 20px;
  margin-top: 26px;
}
.coming-card {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 30px;
}
.coming-card h3 { margin-bottom: 8px; }
.coming-card p { color: var(--gray-1); font-size: 15px; }
.coming-muted { opacity: 0.92; }

/* ---- CARD-ROW ALIGNMENT (site-wide) ----
   Cards in a grid stretch to equal height, but their inner content still
   top-aligns independently. Reserve a consistent title height so the body
   paragraphs start at the same line across every card in the row, and pin
   any trailing price to the bottom so its divider aligns too. */
.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card { display: flex; flex-direction: column; }

.grid-2 > .card > h3,
.grid-3 > .card > h3,
.grid-4 > .card > h3 {
  line-height: 1.3;
  min-height: 2.6em;   /* room for a two-line title */
}

.grid-2 > .card .card-price,
.grid-3 > .card .card-price,
.grid-4 > .card .card-price { margin-top: auto; }

/* Pillar eyebrow labels vary between one and two lines ("Pillar 1 — Financial
   Coaching" vs "Pillar 3 — General Advisory"); reserve two lines so the title
   and body below them line up across all three cards. */
.pillar-grid > .card > .card-num { min-height: 3.4em; }

@media (max-width: 640px) {
  /* single column — cards no longer sit side by side, so drop the reserve */
  .grid-2 > .card > h3,
  .grid-3 > .card > h3,
  .grid-4 > .card > h3 { min-height: 0; }
}

/* ---- RESPONSIVE: collective layer ---- */
@media (max-width: 900px) {
  .timeline { flex-direction: column; align-items: stretch; }
  .tl-stage { padding: 0; }
  .tl-stage::before, .tl-stage::after { display: none; }
  .tl-inner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    padding: 10px 0 30px;
    transform: none !important;
  }
  .tl-num { margin-bottom: 0; flex-shrink: 0; }
  .tl-text { flex: 1; padding-top: 6px; }
  .tl-desc { max-width: none; }
  /* continuous vertical rail between nodes */
  .tl-stage:not(:last-child) .tl-num::after {
    content: '';
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    bottom: -30px;
    background: var(--border-warm);
  }
}

@media (max-width: 720px) {
  /* dropdown folds inline within the mobile menu */
  .nav-links .has-dropdown::before { display: none; }
  .nav-links .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links .dropdown a { padding: 11px 28px; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .zoom-reveal { opacity: 1; transform: none; filter: none; }
  .hero .wrap { transform: none !important; opacity: 1 !important; }
  .hero::before { animation: none; }
  .tl-stage:hover .tl-inner { transform: none; }
  .nav-sub { animation: none; }
}

/* ================================================================
   GLYPHS LABS SKIN — monochrome editorial restyle
   ----------------------------------------------------------------
   Self-contained override layer on top of the base theme, modelled
   on glyphslabs.com. Palette: light #F2F2F2 / ink #212121, no chroma.
   Extended light display type (Archivo Expanded), hairline rules,
   sharp corners, inverted dark CTA + footer bands, uppercase meta.
   Remove this whole block to revert to the previous warm theme.
   ================================================================ */
:root {
  --dark:        #F2F2F2;
  --dark-2:      #EAEAEA;
  --dark-3:      #FFFFFF;
  --dark-4:      #FFFFFF;
  --black:       #212121;
  --navy:        #E6E6E6;

  --gold:        #212121;
  --gold-light:  #3A3A3A;
  --gold-deep:   #000000;
  --accent:      #212121;
  --accent-light:#3A3A3A;
  --accent-glow: rgba(33, 33, 33, 0.26);
  --accent-rgb:  33, 33, 33;

  --white:       #212121;
  --off-white:   #161616;
  --gray-1:      #6A6A6A;
  --gray-2:      #8C8C8C;
  --gray-3:      #ABABAB;

  --border:        rgba(33, 33, 33, 0.14);
  --border-strong: rgba(33, 33, 33, 0.26);
  --border-warm:   rgba(33, 33, 33, 0.28);
  --border-light:  #D4D4D4;

  --on-accent:   #F2F2F2;

  --font:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --display: 'Archivo Expanded', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --r:    2px;
  --r-sm: 2px;
  --max:  1200px;
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
}

/* ---- Display typography: extended + light, bold inline emphasis ---- */
.hero h1, h1 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.06;
}
.hero h1 { font-size: clamp(40px, 6.4vw, 74px); max-width: 920px; }
.hero h1 em, h1 em { font-style: normal; font-weight: 700; color: var(--accent); }

h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.005em;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.12;
}
h2 em { font-style: normal; font-weight: 700; color: var(--accent); }

h3 { font-weight: 600; letter-spacing: -0.005em; }

/* ---- Eyebrow / hero tag: flat editorial labels ---- */
.hero-tag {
  display: inline-block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 26px;
  color: var(--gray-1);
  font-weight: 600;
  letter-spacing: 0.2em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-1);
  font-weight: 600;
  letter-spacing: 0.2em;
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ---- Buttons: sharp, uppercase, ink ---- */
.btn {
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  height: 52px;
}
.btn-sm { height: 42px; font-size: 11px; }
.btn-gold { box-shadow: none; }
.btn-gold:hover { box-shadow: none; transform: translateY(-2px); background: var(--gold-light); color: var(--on-accent); }
.btn-dark { background: var(--black); color: var(--on-accent); border-color: var(--black); }
.btn-dark:hover { background: #000; }
.nav-cta {
  border-radius: var(--r-sm) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px !important;
  box-shadow: none !important;
}
.nav-cta:hover { box-shadow: none !important; }

/* ---- Mixed-weight wordmark logos ---- */
.nav-logo span,
.nav-sub-brand span { color: var(--white); font-weight: 400; }

/* ---- Translucent nav surfaces in neutral grey ---- */
nav { background: rgba(242, 242, 242, 0.85); }
.nav-links .dropdown { background: rgba(242, 242, 242, 0.98); }
@media (max-width: 720px) { .nav-links { background: rgba(242, 242, 242, 0.98); } }

/* ---- Cards / panels: flat, hairline, sharp ---- */
.card, .panel { box-shadow: none; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -24px rgba(33, 33, 33, 0.30);
  border-color: var(--border-strong);
}

/* ---- ONO acronym in the display face ---- */
.ono-letter { font-family: var(--display); }

/* ---- Neutralise hero backdrop glow ---- */
.hero::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(33, 33, 33, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(33, 33, 33, 0.03) 0%, transparent 70%);
}

/* ---- Full-width hairlines between sections ---- */
.section { border-top: 1px solid var(--border); }

/* ---- Inverted dark CTA band ---- */
.cta-strip {
  background: var(--black);
  border: 1px solid var(--black);
  border-radius: var(--r);
  color: var(--on-accent);
}
.cta-strip .eyebrow { color: rgba(242, 242, 242, 0.72); }
.cta-strip .eyebrow::before { background: rgba(242, 242, 242, 0.55); }
.cta-strip h2 { color: var(--on-accent); }
.cta-strip h2 em { color: #FFFFFF; }
.cta-strip .lead { color: rgba(242, 242, 242, 0.78); }
.cta-strip .btn-gold { background: var(--on-accent); color: var(--black); }
.cta-strip .btn-gold:hover { background: #FFFFFF; color: var(--black); }

/* ---- Inverted dark footer band ---- */
footer {
  background: var(--black);
  color: var(--on-accent);
  border-top: 1px solid var(--black);
}
.footer-brand .logo { color: var(--on-accent); }
.footer-brand .logo span { color: rgba(242, 242, 242, 0.6); font-weight: 300; }
.footer-brand p { color: rgba(242, 242, 242, 0.6); }
.footer-col h4 { color: rgba(242, 242, 242, 0.55); }
.footer-col ul a { color: rgba(242, 242, 242, 0.72); }
.footer-col ul a:hover { color: #FFFFFF; }
.footer-bottom {
  border-top: 1px solid rgba(242, 242, 242, 0.16);
  color: rgba(242, 242, 242, 0.5);
}

/* ---- ONO overlapping monogram + meaning key ----
   Replaces the labelled "What ONO stands for" box. Three fine-outline
   letters that overlap into a single interwoven mark; on hover they
   ease apart so O · N · O reads cleanly. The key line beneath spells
   out the meaning with the O-N-O initials emphasised. */
.ono-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 0;
}
.ono-logo .ol {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(82px, 14vw, 170px);
  line-height: 1;
  color: var(--accent);                    /* solid ink fill */
  -webkit-text-stroke: 7px var(--dark);    /* background-colour knockout halo */
          text-stroke: 7px var(--dark);
  paint-order: stroke fill;
  position: relative;
  transition: transform 0.9s var(--ease);
}
/* O's sit in front; the full N tucks behind them */
.ono-logo .ol:nth-child(1),
.ono-logo .ol:nth-child(3) { z-index: 2; }
.ono-logo .ol:nth-child(2) { z-index: 1; }

/* the two O's and the N overlap into a monogram */
.ono-logo .ol + .ol { margin-left: -0.30em; }

/* A background-colour fill over each O's counter hides the N's stems at
   rest. Because the fill (and the O itself) ride together, the N is
   uncovered ALONG the curve of each O as the letters slide apart — no
   flat wipe. The N is never masked, so it reveals as a whole. */
.ono-logo .ol:nth-child(1)::before,
.ono-logo .ol:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.64em;
  height: 0.94em;
  background: var(--dark);
  border-radius: 50%;
  z-index: -1;
}
/* nudge each fill toward the N and toward its free stem-end (the left
   stem's foot / the right stem's top) so no sliver shows; any overflow
   onto the ring is hidden behind the O's own ink */
.ono-logo .ol:nth-child(1)::before { transform: translate(-42%, -44%); }
.ono-logo .ol:nth-child(3)::before { transform: translate(-58%, -56%); }

/* Hover: the O's swing apart like double doors (0.9s), revealing the
   full N behind them along their own curved edges. */
.ono-logo:hover .ol:nth-child(1) { transform: translateX(-0.36em); }
.ono-logo:hover .ol:nth-child(3) { transform: translateX(0.36em); }

.ono-key {
  margin-top: 26px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.ono-key span { white-space: nowrap; }
.ono-key span + span::before {
  content: '·';
  margin: 0 14px;
  color: var(--gray-3);
}
.ono-key b { color: var(--accent); font-weight: 700; }

/* keep the mark legible if text-stroke is unsupported */
@supports not ((-webkit-text-stroke: 1px black)) {
  .ono-logo .ol { color: var(--accent); -webkit-text-stroke: 0; }
}

/* ---- Sub-ribbon: span the full width so the brand lines up with the
   primary logo on the left and the last link lines up with the CTA on
   the right (same max-width + 28px padding as the primary nav). ---- */
.nav-sub-inner { gap: 24px; }
.nav-sub ul {
  flex: 1;
  gap: 18px;
  justify-content: space-between;
}

/* ---- Nav logo: overlapping ONO monogram mark + "Collective" ---- */
.logo-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav-logo .logo-mark .ol {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  -webkit-text-stroke: 0.13em var(--dark);
          text-stroke: 0.13em var(--dark);
  paint-order: stroke fill;
  position: relative;
}
/* mirror the hero monogram, scaled down: heavy overlap with the full N
   behind the O's, and a background fill over each O's counter that hides
   the stems — so only the diagonal shows, curving around the rings */
.nav-logo .logo-mark .ol + .ol { margin-left: -0.23em; }
.nav-logo .logo-mark .ol:nth-child(1),
.nav-logo .logo-mark .ol:nth-child(3) { z-index: 2; }
.nav-logo .logo-mark .ol:nth-child(2) { z-index: 1; }
.nav-logo .logo-mark .ol:nth-child(1)::before,
.nav-logo .logo-mark .ol:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.72em;
  height: 0.94em;
  background: var(--dark);
  border-radius: 50%;
  z-index: -1;
}
.nav-logo .logo-mark .ol:nth-child(1)::before { transform: translate(-37%, -44%); }
.nav-logo .logo-mark .ol:nth-child(3)::before { transform: translate(-63%, -56%); }

/* ---- Mobile sub-ribbon: stop the horizontal-scroll lurch on tap.
   Wrap the links instead of scrolling (so nothing jumps), and use a
   subtle 1.2x zoom to show hover / active. ---- */
@media (max-width: 720px) {
  .nav-sub-inner {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    height: auto;
    padding: 9px 20px;
    gap: 6px 16px;
  }
  .nav-sub-brand { flex-basis: 100%; text-align: center; }
  .nav-sub ul {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }
  .nav-sub a {
    display: inline-block;
    font-size: 12px;
    transform-origin: center;
    transition: transform 0.3s var(--ease), color 0.2s;
  }
  .nav-sub a:hover,
  .nav-sub a.active { transform: scale(1.2); }
  .nav-sub a.active::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ono-logo:hover .ol:nth-child(1),
  .ono-logo:hover .ol:nth-child(3) { transform: none; }
  .nav-sub a:hover,
  .nav-sub a.active { transform: none; }
}