/* Rivmedia shared styles — tokens, header, footer, common components */
:root {
  --navy: #10104b; --navy-deep: #0a0a33; --blue: #2f2fd9; --blue-bright: #4c6fff;
  --cyan: #35d0ff; --magenta: #e6007e; --magenta-deep: #b30063;
  --paper: #ffffff; --tint: #f2f4fc; --ink: #14143c;
  --color-bg: var(--paper); --color-text: var(--ink); --color-accent: var(--magenta);
  --color-accent-600: var(--magenta-deep); --color-accent-700: #8f004f; --color-divider: var(--navy);
  --hairline: #e4e7f3; --r-lg: 24px; --r-md: 14px;
  --soft-sm: 0 1px 3px rgba(16,16,75,.06), 0 4px 14px rgba(16,16,75,.05);
  --soft-md: 0 2px 6px rgba(16,16,75,.07), 0 18px 44px rgba(16,16,75,.12);
  --glass: rgba(255,255,255,.08); --glass-border: rgba(255,255,255,.16);
  --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); text-wrap: pretty; }
a { color: var(--blue); } a:hover { color: var(--magenta); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--edge); }
.btn { border-radius: 980px; padding: 14px 28px; font-size: 15px; line-height: 20px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn:active { transform: scale(.98); }
.btn-magenta { background: var(--magenta); color: var(--paper); }
.btn-magenta:hover { background: var(--magenta-deep); box-shadow: 0 8px 28px rgba(230,0,126,.35); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.grain { position: relative; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url(../images/grain.png); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: var(--half);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--magenta); margin: 0 0 var(--leading); }
.kicker::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--magenta); }
.on-dark .kicker { color: var(--cyan); } .on-dark .kicker::before { background: var(--cyan); }
.title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--navy); max-width: 24ch; }
.on-dark .title { color: var(--paper); }
.lede { font-size: 17px; line-height: var(--leading); max-width: 54ch;
  color: color-mix(in srgb, var(--ink) 76%, transparent); margin: var(--leading) 0 0; }
.on-dark .lede { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.bgfx { position: relative; overflow: hidden; }
.bgfx > .wrap { position: relative; z-index: 1; }
.bgfx::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 380px at 88% 8%, color-mix(in srgb, var(--blue-bright) 7%, transparent), transparent 70%),
    radial-gradient(480px 360px at 4% 92%, color-mix(in srgb, var(--magenta) 6%, transparent), transparent 70%); }
.bgfx::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--navy) 8%, transparent); }
/* a bgfx nested inside a .wrap would clip its washes to the container — disable them there */
.wrap .bgfx { overflow: visible; }
.wrap .bgfx::before, .wrap .bgfx::after { content: none; }
/* — utility bar — */
.topbar { background: var(--navy-deep); color: color-mix(in srgb, #ffffff 62%, transparent);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--blue-bright), var(--magenta) 55%, var(--cyan)) 1; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--leading);
  max-width: 1240px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.topbar span, .topbar a { font-size: 12px; line-height: 18px; letter-spacing: 0.05em;
  text-decoration: none; color: inherit; transition: color .15s ease; }
.topbar a:hover { color: var(--cyan); }
.topbar .group { display: flex; gap: calc(1.25 * var(--leading)); flex-wrap: wrap; }
.topbar b { color: var(--cyan); font-weight: 700; }
@media (max-width: 720px) { .topbar .group:last-child { display: none; } }
/* — island nav — */
.nav { position: sticky; top: 14px; z-index: 50; display: flex; align-items: center; gap: 26px;
  max-width: 1240px; margin: 14px auto 0; padding: 10px 12px 10px 26px;
  background: rgba(10,10,51,.5); backdrop-filter: saturate(1.4) blur(20px); -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.55); }
.nav .nav-brand { color: var(--paper); margin-right: auto; text-decoration: none;
  font-family: 'Baloo 2', var(--font-heading), sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1; }
.nav .nav-brand .stop { color: var(--magenta); font-size: 1.25em; line-height: 0; }
.nav a { position: relative; color: color-mix(in srgb, var(--paper) 80%, transparent); white-space: nowrap;
  text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 6px 0; transition: color .15s ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--cyan); transition: right .2s ease; }
.nav a:hover, .nav a[aria-current='page'], .nav a[aria-current='location'] { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current='page']::after, .nav a[aria-current='location']::after { right: 0; }
.nav .btn-primary { background: var(--magenta); padding: 10px 22px; white-space: nowrap; }
.nav .btn-primary:hover { background: var(--magenta-deep); }
@media (max-width: 1290px) { .nav { margin-inline: var(--edge); } }
@media (max-width: 1080px) { .nav { gap: var(--half); } .nav a { font-size: 13.5px; } }
@media (max-width: 940px) { .nav > a:not(.nav-brand):not(.btn-primary), .nav .navitem { display: none; } }
.navitem { position: relative; }
.navitem > a { display: inline-flex; align-items: center; gap: 6px; }
.navitem > a .car { font-size: 9px; opacity: .55; transition: transform .2s ease; }
.navitem:hover > a .car, .navitem:focus-within > a .car { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 8px);
  min-width: 250px; padding: 10px; border-radius: 18px; z-index: 60;
  background: rgba(10,10,51,.96); backdrop-filter: saturate(1.4) blur(22px); -webkit-backdrop-filter: saturate(1.4) blur(22px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.navitem:hover .dropdown, .navitem:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--paper) 84%, transparent); }
.dropdown a::after { display: none; }
.dropdown a:hover { background: rgba(255,255,255,.1); color: var(--paper); }
.dropdown a i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); font-style: normal; }
.dropdown a:nth-child(even) i { background: var(--magenta); }
.dropdown .dhead { display: block; padding: 8px 12px 4px; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--cyan); }
/* — dark hero base (page heroes pull up behind island nav) — */
.hero { background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 82%); color: var(--paper);
  position: relative; overflow: hidden; margin-top: -79px; }
.hero > .wrap { position: relative; z-index: 1; padding-top: calc(7 * var(--leading)); padding-bottom: calc(4 * var(--leading)); }
.hero .glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero .btn-ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 55%, transparent); }
.hero .btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); background: transparent; }
.display { font-family: var(--font-heading); font-weight: 800; font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.04; letter-spacing: -0.032em; margin: 0; max-width: 18ch; }
.display .hl { color: var(--cyan); } .display .hl2 { color: var(--magenta); }
.hero .sub { font-size: 17.5px; line-height: var(--leading); max-width: 50ch;
  color: color-mix(in srgb, var(--paper) 84%, transparent); margin: var(--leading) 0 0; }
.hero .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.hero .proof { display: flex; align-items: center; gap: 16px; margin-top: calc(1.75 * var(--leading));
  font-size: 13.5px; color: color-mix(in srgb, var(--paper) 68%, transparent); }
.hero .proof .stars { color: var(--cyan); letter-spacing: 2px; font-size: 13px; }
.hero .proof i { font-style: normal; opacity: .45; }
/* — CTA close — */
.close { background: linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 85%); color: var(--paper); position: relative; overflow: hidden; }
.close .glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
  width: 520px; height: 520px; right: -140px; top: -180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 42%, transparent), transparent 70%); }
.close .wrap { position: relative; z-index: 1; padding-top: calc(4 * var(--leading)); padding-bottom: calc(4 * var(--leading));
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(2 * var(--leading)) clamp(32px, 5vw, 96px); align-items: center; }
.close h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0; max-width: 16ch; }
.close h2 .hl2 { color: var(--magenta); }
.close .lede { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.close .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); align-items: center; }
.close .btn-ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 55%, transparent); }
.close .btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); background: transparent; }
.close-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: calc(1.5 * var(--leading)) calc(1.25 * var(--leading)); display: grid; gap: var(--leading); }
.close-card .line { display: grid; gap: 4px; min-width: 0; }
.close-card .llabel { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--paper) 62%, transparent); }
.close-card a.big { font-family: var(--font-heading); font-weight: 800; font-size: clamp(17px, 2vw, 24px);
  letter-spacing: -0.015em; color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
.close-card a.big:hover { color: var(--cyan); }
.close-card .small { font-size: 13.5px; line-height: 20px; color: color-mix(in srgb, var(--paper) 66%, transparent); margin: 0; }
@media (max-width: 900px) { .close .wrap { grid-template-columns: 1fr; } }
/* — footer — */
footer { background: var(--navy-deep); color: color-mix(in srgb, #ffffff 70%, transparent); border-top: 1px solid rgba(255,255,255,.08); }
footer .top { display: grid; grid-template-columns: 1fr auto; gap: var(--half) var(--leading); align-items: center;
  padding: calc(2 * var(--leading)) 0; border-bottom: 1px solid rgba(255,255,255,.1); position: relative; }
footer .top::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--blue-bright), var(--magenta), var(--cyan)); }
footer .brand { font-family: 'Baloo 2', var(--font-heading), sans-serif; font-weight: 800; font-size: 26px;
  color: var(--paper); margin: 0; letter-spacing: -0.02em; }
footer .brand .stop { color: var(--magenta); font-size: 1.25em; line-height: 0; }
footer .top .tagline { grid-column: 1; margin: 0; font-size: 14.5px; line-height: 21px;
  color: color-mix(in srgb, #ffffff 58%, transparent); max-width: 52ch; }
footer .top .tagline b { color: var(--cyan); font-weight: 700; }
footer .top .social { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
footer .top .social a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, #ffffff 76%, transparent); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
footer .top .social a:hover { color: var(--paper); border-color: var(--cyan); background: rgba(53,208,255,.12); }
footer .cols { padding-top: calc(2 * var(--leading)); padding-bottom: calc(2 * var(--leading));
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: var(--leading) clamp(20px, 3vw, 56px); }
footer h4 { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
footer a { color: color-mix(in srgb, #ffffff 70%, transparent); text-decoration: none; font-size: 14px; transition: color .15s ease; }
footer a:hover { color: var(--cyan); }
footer .legal { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  padding-top: var(--leading); font-size: 12.5px; line-height: 20px;
  display: flex; justify-content: space-between; gap: var(--leading); flex-wrap: wrap; }
footer .legal .links { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1040px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { footer .top { grid-template-columns: 1fr; } footer .top .social { grid-column: 1; grid-row: auto; justify-content: flex-start; } }