/* ═══════════════════════════════════════════════════════════════════════
   RM GROWTH PARTNERS — Visuals (loaded after components.css)
   Background rhythm + bespoke infographics, mockups and data-viz so no
   section is text-only. On-brand vector art over stock photography.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Background rhythm ─────────
   Every section can opt into a different atmosphere. All decorative layers
   sit at z-index:0 behind .container (z-index:1). */
.bg-charcoal{ background:var(--bg-2) }
.bg-slate{ background:linear-gradient(180deg,var(--bg),#0B0D12 55%,var(--bg)) }
.bg-navy{ background:linear-gradient(180deg,#080A0F,#0A0E16) }

.bg-dots::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgb(var(--on-rgb)/.05) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 78%);
}
.bg-goldlines::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(115deg, transparent 0 38px, rgb(201 162 77/.06) 38px 39px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.bg-mesh::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 55% at 12% 18%, rgb(201 162 77/.10), transparent 60%),
    radial-gradient(45% 55% at 88% 82%, rgb(86 100 129/.12), transparent 60%);
}
/* animated aurora ribbon */
.aurora-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.aurora{ position:absolute; width:60vw; height:60vw; border-radius:50%; filter:blur(120px); opacity:.5 }
.aurora--1{ top:-20%; left:-10%; background:radial-gradient(circle,rgb(201 162 77/.24),transparent 65%); animation:drift 22s ease-in-out infinite }
.aurora--2{ bottom:-25%; right:-10%; background:radial-gradient(circle,rgb(86 100 129/.24),transparent 65%); animation:drift 28s ease-in-out infinite reverse }
@keyframes drift{ 50%{ transform:translate(6%,4%) scale(1.12) } }
@media (prefers-reduced-motion:reduce){ .aurora{ animation:none } }

.divider-fade{ height:1px; border:0; background:linear-gradient(90deg,transparent,rgb(201 162 77/.35),transparent); max-width:var(--maxw); margin-inline:auto }

/* small reusable CTA row that appears mid-page (never wait for footer) */
.cta-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; justify-content:center; text-align:center;
  padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.25rem,3vw,2.25rem); border-radius:18px;
  border:1px solid rgb(201 162 77/.28); background:linear-gradient(120deg, rgb(201 162 77/.09), rgb(var(--on-rgb)/.02)); }
.cta-inline p{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.05rem,1rem + .5vw,1.35rem); color:var(--ink); letter-spacing:-.02em; margin-right:auto }
@media (max-width:640px){ .cta-inline p{ margin-right:0 } }

/* floating micro-badge */
.badge-float{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .7rem; border-radius:100px;
  font-size:.72rem; font-weight:600; font-family:var(--f-display); letter-spacing:.02em;
  background:rgb(var(--on-rgb)/.06); border:1px solid var(--line-2); color:var(--ink-2); }
.badge-float i{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-glow) }

/* ───────── Funnel leak infographic ───────── */
.funnel{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:center }
.funnel > *{ min-width:0 }
@media (max-width:820px){ .funnel{ grid-template-columns:1fr } }
.funnel__viz{ position:relative; aspect-ratio:1/1; max-width:460px; width:100%; margin-inline:auto }
.funnel__viz svg{ width:100%; height:100%; overflow:visible }
.funnel__stage{ opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.reveal.is-in .funnel__stage{ opacity:1; transform:none }
.funnel__stage:nth-child(2){ transition-delay:.12s } .funnel__stage:nth-child(3){ transition-delay:.24s }
.funnel__stage:nth-child(4){ transition-delay:.36s } .funnel__stage:nth-child(5){ transition-delay:.48s }
.funnel__leaklabel{ font-family:var(--f-body); font-size:11px; fill:var(--ink-3) }
.funnel__pct{ font-family:var(--f-display); font-weight:700; font-size:14px }
.funnel__drop{ animation:leak 3s var(--ease) infinite }
.funnel__drop:nth-child(2){ animation-delay:.9s } .funnel__drop:nth-child(3){ animation-delay:1.8s }
@keyframes leak{ 0%{ opacity:0; transform:translateY(0) } 20%{ opacity:.9 } 100%{ opacity:0; transform:translateY(26px) } }
@media (prefers-reduced-motion:reduce){ .funnel__drop{ animation:none; opacity:.5 } }

/* ───────── Revenue flywheel ───────── */
.flywheel{ position:relative; width:min(440px,86vw); aspect-ratio:1/1; margin:1rem auto 0 }
.flywheel__ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed rgb(201 162 77/.3); animation:spin 60s linear infinite }
.flywheel__ring--2{ inset:14%; border-color:rgb(var(--on-rgb)/.08); animation-duration:44s; animation-direction:reverse }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .flywheel__ring{ animation:none } }
.flywheel__core{ position:absolute; inset:31%; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:radial-gradient(circle at 50% 35%, rgb(201 162 77/.18), rgb(var(--on-rgb)/.03));
  border:1px solid rgb(201 162 77/.35); box-shadow:0 0 60px -20px var(--gold-glow) inset; }
.flywheel__core b{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; color:var(--ink); letter-spacing:-.02em; line-height:1.1 }
.flywheel__core span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold) }
.flywheel__node{ position:absolute; top:50%; left:50%; width:0; height:0 }
.flywheel__node b{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:100px;
  font-family:var(--f-display); font-weight:600; font-size:.82rem; color:var(--ink);
  background:rgb(12 13 16 / .9); border:1px solid var(--line-2); box-shadow:0 8px 24px -12px #000;
  transition:border-color .3s var(--ease), transform .3s var(--ease) }
.flywheel__node b::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold) }
.flywheel__node b:hover{ border-color:var(--gold); transform:translate(-50%,-50%) scale(1.05) }

/* ───────── Roadmap / timeline ───────── */
.roadmap{ position:relative; display:grid; gap:1rem }
.roadmap::before{ content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--gold),rgb(201 162 77/.1)); }
.rstep{ position:relative; padding-left:56px }
.rstep__dot{ position:absolute; left:9px; top:2px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:.66rem; font-weight:700; font-family:var(--f-display);
  color:var(--on-gold); background:linear-gradient(140deg,var(--gold-lt),var(--gold-dk));
  box-shadow:0 0 0 5px rgb(var(--bg-rgb)/1), 0 0 0 6px rgb(201 162 77/.25) }
.rstep__k{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:.15rem }
.rstep h3{ font-size:1.1rem; margin-bottom:.3rem }
.rstep p{ font-size:.9rem; color:var(--ink-3); line-height:1.55; max-width:56ch }
/* horizontal variant */
.roadmap--h{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.roadmap--h::before{ left:8%; right:8%; top:19px; bottom:auto; width:84%; height:2px }
.roadmap--h .rstep{ padding:44px 1rem 0; text-align:center }
.roadmap--h .rstep__dot{ left:50%; top:8px; transform:translateX(-50%) }
.roadmap--h .rstep p{ margin-inline:auto }
@media (max-width:820px){ .roadmap--h{ grid-template-columns:1fr; gap:1rem } .roadmap--h::before{ left:19px; right:auto; top:8px; bottom:8px; width:2px; height:auto }
  .roadmap--h .rstep{ padding:0 0 0 56px; text-align:left } .roadmap--h .rstep__dot{ left:9px; transform:none } .roadmap--h .rstep p{ margin:0 } }

/* ───────── R + M engine (founders reimagined) ───────── */
.engine{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2rem); align-items:stretch }
.epillar{ position:relative; padding:clamp(1.5rem,3vw,2.25rem); border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, rgb(201 162 77/.08), rgb(var(--on-rgb)/.02)); border:1px solid rgb(201 162 77/.22) }
.epillar__mark{ font-family:var(--f-display); font-weight:800; font-size:clamp(3rem,2rem + 4vw,5rem); line-height:1;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold-dk)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.epillar__t{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:var(--ink); margin:.25rem 0 1rem; letter-spacing:-.01em }
.epillar__list{ display:flex; flex-wrap:wrap; gap:.45rem }
.epillar__list span{ font-size:.78rem; padding:.32rem .7rem; border-radius:100px; color:var(--ink-2);
  background:rgb(var(--on-rgb)/.05); border:1px solid var(--line) }
.engine__plus{ display:grid; place-items:center; width:64px }
.engine__plus span{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  font-family:var(--f-display); font-weight:700; font-size:1.5rem; color:var(--gold);
  background:rgb(12 13 16/.9); border:1px solid rgb(201 162 77/.4); box-shadow:0 0 40px -12px var(--gold-glow) }
.engine__sum{ margin-top:1.25rem; text-align:center; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.2rem,1rem + 1.2vw,1.8rem); color:var(--ink); letter-spacing:-.02em }
.engine__sum b{ color:var(--gold) }
@media (max-width:760px){ .engine{ grid-template-columns:1fr } .engine__plus{ width:auto; height:52px } }

/* ───────── Device mockups ───────── */
.mock-laptop{ position:relative; width:100%; max-width:640px; margin-inline:auto }
.mock-laptop__screen{ position:relative; border-radius:14px 14px 0 0; border:2px solid #1b1e25; border-bottom:0;
  background:#05060a; overflow:hidden; aspect-ratio:16/10; box-shadow:0 40px 80px -30px #000 }
.mock-laptop__screen img{ width:100%; height:100%; object-fit:cover; opacity:.92 }
.mock-laptop__screen::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(201 162 77/.06), transparent 40%, rgb(8 8 10/.35)) }
.mock-laptop__base{ height:14px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#20242c,#0d0f13);
  box-shadow:0 20px 40px -18px #000 }
.mock-laptop__base::after{ content:""; display:block; width:16%; height:5px; margin:0 auto; border-radius:0 0 8px 8px; background:#05060a }

.mock-browser{ border-radius:14px; overflow:hidden; border:1px solid var(--line-2); background:#05060a; box-shadow:0 30px 70px -30px #000 }
.mock-browser__bar{ display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; background:rgb(var(--on-rgb)/.04); border-bottom:1px solid var(--line) }
.mock-browser__bar i{ width:9px; height:9px; border-radius:50%; background:var(--line-2) }
.mock-browser__url{ margin-left:.6rem; flex:1; height:22px; border-radius:6px; background:rgb(var(--on-rgb)/.05);
  display:flex; align-items:center; padding:0 .6rem; font-size:.72rem; color:var(--ink-4) }
.mock-browser img{ width:100%; display:block; opacity:.94 }
.mock-phone{ width:190px; border-radius:26px; border:6px solid #14161c; background:#05060a; overflow:hidden;
  box-shadow:0 30px 60px -24px #000 }
.mock-phone img{ width:100%; display:block }

/* photo treatment for cohesion with dark+gold theme */
.duotone{ position:relative }
.duotone img{ filter:saturate(.85) contrast(1.05) brightness(.9) }
.duotone::after{ content:""; position:absolute; inset:0; mix-blend-mode:overlay;
  background:linear-gradient(140deg, rgb(201 162 77/.25), transparent 55%, rgb(86 100 129/.2)) }

/* ───────── Analytics widget (bespoke SVG dashboard) ───────── */
.widgets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem }
.widget{ padding:1.25rem; border-radius:16px; background:var(--glass); border:1px solid var(--line) }
.widget__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem }
.widget__k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4) }
.widget__v{ font-family:var(--f-display); font-weight:600; font-size:1.6rem; color:var(--ink); letter-spacing:-.02em }
.widget__d{ font-size:.72rem; font-weight:600; color:#4ADE80 }
.spark{ width:100%; height:44px; overflow:visible }
.spark path.l{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.spark path.f{ fill:url(#sg); opacity:.5 }
.bars{ display:flex; align-items:flex-end; gap:5px; height:44px }
.bars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--gold),rgb(201 162 77/.25)); min-height:6px }

/* ───────── Heatmap ───────── */
.heat{ display:grid; grid-template-columns:repeat(12,1fr); gap:4px; padding:1rem; border-radius:14px; background:var(--glass); border:1px solid var(--line) }
.heat i{ aspect-ratio:1; border-radius:3px; background:rgb(201 162 77/var(--a,.1)) }

/* ───────── Bento grid (services) ───────── */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; grid-auto-rows:minmax(150px,auto) }
.bento > *{ position:relative; padding:1.5rem; border-radius:18px; background:var(--glass); border:1px solid var(--line); overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease) }
.bento > *:hover{ transform:translateY(-4px); border-color:rgb(201 162 77/.4) }
.bento__lg{ grid-column:span 2; grid-row:span 2 }
.bento__w{ grid-column:span 2 }
.bento h3{ font-size:1.1rem; margin-bottom:.4rem }
.bento p{ font-size:.86rem; color:var(--ink-3); line-height:1.5 }
.bento__ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; margin-bottom:.9rem; color:var(--gold);
  background:rgb(201 162 77/.1); border:1px solid rgb(201 162 77/.22) }
.bento__ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.bento__chip{ position:absolute; top:1rem; right:1rem; font-size:.68rem; padding:.25rem .55rem; border-radius:100px; color:var(--gold); background:rgb(201 162 77/.12); border:1px solid rgb(201 162 77/.25) }
@media (max-width:820px){ .bento{ grid-template-columns:repeat(2,1fr) } .bento__lg{ grid-column:span 2; grid-row:span 1 } }
@media (max-width:520px){ .bento{ grid-template-columns:1fr } .bento__lg,.bento__w{ grid-column:span 1 } }

/* ───────── Before / after comparison ───────── */
.baba{ display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center }
.ba{ padding:1.5rem; border-radius:16px; border:1px solid var(--line); background:var(--glass) }
.ba--after{ border-color:rgb(201 162 77/.3); background:linear-gradient(160deg,rgb(201 162 77/.08),transparent) }
.ba__tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-4); margin-bottom:1rem }
.ba--after .ba__tag{ color:var(--gold) }
.ba__row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-2) }
.ba__row b{ font-family:var(--f-display); color:var(--ink) }
.ba--after .ba__row b{ color:var(--gold) }
.baba__arrow{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--gold); background:rgb(201 162 77/.1); border:1px solid rgb(201 162 77/.3) }
.baba__arrow svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:680px){ .baba{ grid-template-columns:1fr } .baba__arrow{ transform:rotate(90deg); margin-inline:auto } }

/* ───────── Star rating ───────── */
.stars{ display:inline-flex; gap:2px; color:var(--gold) }
.stars svg{ width:15px; height:15px; fill:currentColor }

/* ───────── Journey map ───────── */
.journey{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; position:relative }
.jstep{ position:relative; padding:1.25rem 1rem; text-align:center }
.jstep::before{ content:""; position:absolute; top:34px; left:50%; right:-50%; height:2px; background:repeating-linear-gradient(90deg,rgb(201 162 77/.4) 0 6px,transparent 6px 12px) }
.jstep:last-child::before{ display:none }
.jstep__ic{ position:relative; z-index:1; display:grid; place-items:center; width:52px; height:52px; margin:0 auto .75rem; border-radius:14px; color:var(--gold); background:var(--bg-2); border:1px solid rgb(201 162 77/.3) }
.jstep__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.jstep b{ display:block; font-family:var(--f-display); font-size:.92rem; color:var(--ink) }
.jstep span{ font-size:.78rem; color:var(--ink-3) }
@media (max-width:680px){ .jstep::before{ display:none } }

/* elegant, lighter stat treatment (per brief: not overly bold) */
.metric{ text-align:center; padding:1.5rem 1rem }
.metric__v{ font-family:var(--f-display); font-weight:500; font-size:clamp(2rem,1.4rem + 2vw,3rem); letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums }
.metric__v em{ font-style:normal; color:var(--gold) }
.metric__k{ font-size:.82rem; color:var(--ink-3); margin-top:.35rem }
.metric__spark{ width:80px; height:24px; margin:.5rem auto 0 }