/* Framer-style finish: composition, continuity, and feedback without a framework dependency. */
:root {
  --framer-ease: cubic-bezier(.16, 1, .3, 1);
  --framer-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --framer-shadow: 0 28px 74px rgba(0, 0, 0, .3);
}

.hub-page .hub-hero {
  position: relative;
  isolation: isolate;
}

.hub-page .hub-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(44vw, 680px);
  aspect-ratio: 1;
  right: 6%;
  top: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163, 82, 255, .11), transparent 66%);
  filter: blur(12px);
  pointer-events: none;
}

.hub-page .hub-copy h1 {
  max-width: 650px;
  text-wrap: balance;
}

.hub-page .hub-copy h1 em {
  display: inline-block;
  text-shadow: 0 0 34px rgba(197, 132, 255, .16);
}

.hub-page .hero-lead {
  max-width: 535px;
  color: #c2bcc9;
}

.hero-service-selector a {
  position: relative;
  overflow: hidden;
  transition: border-color 220ms var(--framer-ease), background-color 220ms var(--framer-ease), transform 220ms var(--framer-ease), box-shadow 220ms var(--framer-ease);
}

.hero-service-selector a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(213, 164, 255, .14) 50%, transparent 72%);
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity 180ms ease, transform 520ms var(--framer-ease);
  pointer-events: none;
}

.hero-service-selector a:hover,
.hero-service-selector a:focus-visible {
  border-color: rgba(193, 119, 255, .6);
  background: rgba(150, 71, 230, .1);
  box-shadow: 0 16px 38px rgba(95, 31, 153, .12);
  transform: translateY(-3px);
}

.hero-service-selector a:hover::after,
.hero-service-selector a:focus-visible::after { opacity: 1; transform: translateX(120%); }

.hero-mosaic {
  perspective: 1200px;
}

.hero-frame {
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
  transform: translate3d(0, 0, 0) rotateX(var(--framer-tilt-y, 0deg)) rotateY(var(--framer-tilt-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 420ms var(--framer-ease), border-color 260ms ease, box-shadow 360ms var(--framer-ease);
}

.hero-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: 0;
  background: radial-gradient(280px circle at var(--framer-x, 50%) var(--framer-y, 50%), rgba(229, 196, 255, .18), transparent 46%);
  transition: opacity 240ms ease;
  pointer-events: none;
}

.hero-frame:hover {
  z-index: 4;
  border-color: rgba(203, 138, 255, .45);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34), 0 0 0 1px rgba(225, 187, 255, .06) inset;
}

.hero-frame:hover::before { opacity: 1; }
.hero-frame:hover > span { transform: translateY(-2px); }
.hero-frame > span { transition: transform 300ms var(--framer-ease); }

.framer-motion-ready .hero-mosaic.framer-motion-group:not(.framer-motion-visible) > .hero-frame {
  clip-path: inset(16% 12% round 20px);
  filter: blur(9px);
}

.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible > .hero-frame {
  clip-path: inset(0 round 20px);
  filter: blur(0);
  transition-property: opacity, transform, clip-path, filter, border-color, box-shadow;
}

.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-repair { animation: framer-frame-settle 980ms 160ms var(--framer-ease); }
.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-digital { animation: framer-frame-settle 900ms 280ms var(--framer-ease); }
.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-detailing { animation: framer-frame-settle 900ms 370ms var(--framer-ease); }

@keyframes framer-frame-settle {
  0% { transform: translate3d(0, 26px, 0) scale(.94); }
  66% { transform: translate3d(0, -4px, 0) scale(1.012); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.mosaic-caption {
  padding-top: 4px;
  letter-spacing: .2em;
}

.trust-rail > div {
  position: relative;
  transition: background-color 220ms ease, transform 220ms var(--framer-ease);
}

.trust-rail > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rz-violet), transparent);
  opacity: 0;
  transform: scaleX(.55);
  transition: opacity 220ms ease, transform 220ms var(--framer-ease);
}

.trust-rail > div:hover { background: rgba(255, 255, 255, .018); }
.trust-rail > div:hover::after { opacity: 1; transform: scaleX(1); }

.hub-page .section-heading,
.hub-page .process-heading {
  position: relative;
}

.hub-page .section-heading::before,
.hub-page .process-heading::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: 19px;
  background: linear-gradient(90deg, var(--rz-violet), transparent);
}

/* Keep the decorative rule out of the two-column heading flow. */
.hub-page .section-heading::before { grid-column: 1 / -1; margin-bottom: 0; }

.hub-page .division-card,
.mini-site .package-card,
.mini-site .spotlight-card,
.mini-site .price-card,
.mini-site .detailing-price-card {
  transform: translate3d(0, 0, 0) rotateX(var(--framer-tilt-y, 0deg)) rotateY(var(--framer-tilt-x, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.hub-page .division-card {
  box-shadow: var(--framer-shadow), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.hub-page .division-card:hover,
.mini-site .package-card:hover,
.mini-site .spotlight-card:hover,
.mini-site .price-card:hover,
.mini-site .detailing-price-card:hover {
  transform: translate3d(0, -7px, 0) rotateX(var(--framer-tilt-y, 0deg)) rotateY(var(--framer-tilt-x, 0deg));
}

.hub-page .division-card figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(340px circle at var(--framer-x, 50%) var(--framer-y, 50%), rgba(212, 145, 255, .16), transparent 46%);
  transition: opacity 260ms ease;
  pointer-events: none;
}

.hub-page .division-card:hover figure::before { opacity: 1; }

.hub-page .division-card strong svg {
  width: 17px;
  height: 17px;
  transition: transform 220ms var(--framer-ease);
}

.hub-page .division-card:hover strong svg { transform: translate(3px, -3px); }

.button .button-icon,
.button > svg {
  transition: transform 200ms var(--framer-ease);
}

.button:hover .button-icon,
.button:hover > svg { transform: translate(3px, -3px); }

/* Progressive enhancement: content remains visible until the motion script is ready. */
.framer-motion-ready .framer-motion-group:not(.framer-motion-visible) > .framer-motion-item {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  filter: blur(5px);
}

.framer-motion-ready .hero-mosaic.framer-motion-group:not(.framer-motion-visible) > .framer-motion-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.97);
}

.framer-motion-ready .framer-motion-group > .framer-motion-item {
  transition: opacity 680ms var(--framer-ease), transform 820ms var(--framer-ease), filter 680ms ease;
  transition-delay: calc(80ms + var(--framer-index, 0) * 105ms);
}

.framer-motion-ready .hero-mosaic.framer-motion-group > .framer-motion-item {
  transition-delay: calc(150ms + var(--framer-index, 0) * 110ms);
}

.framer-motion-ready .framer-motion-group.framer-motion-visible > .framer-motion-item { opacity: 1; filter: blur(0); }

.framer-motion-ready .hub-copy.framer-motion-group.framer-motion-visible h1 {
  animation: framer-headline-resolve 950ms 140ms var(--framer-ease) both;
}

@keyframes framer-headline-resolve {
  0% { letter-spacing: -.02em; filter: blur(9px); }
  60% { letter-spacing: -.061em; filter: blur(0); }
  100% { letter-spacing: -.055em; filter: blur(0); }
}

@media (max-width: 760px) {
  html,
  body { overflow-x: clip; }

  .hub-page .hub-hero::before { width: 92vw; right: -36vw; top: 20%; opacity: .72; }
  .hub-page .section-heading::before,
  .hub-page .process-heading::before { margin-bottom: 14px; }
  .framer-motion-ready .hero-mosaic.framer-motion-group:not(.framer-motion-visible) > .hero-frame { clip-path: inset(12% 7% round 16px); }
  .hero-service-selector a:hover { transform: none; }
  .hub-page .division-card:hover,
  .mini-site .package-card:hover,
  .mini-site .spotlight-card:hover,
  .mini-site .price-card:hover,
  .mini-site .detailing-price-card:hover { transform: none; }

  .hub-page:not(.framer-past-hero) .rizen-agent,
  .hub-page:not(.framer-past-hero) .rizen-quick-actions {
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.94);
  }

  .hub-page .rizen-agent,
  .hub-page .rizen-quick-actions {
    transition: opacity 260ms var(--framer-ease), transform 320ms var(--framer-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-page .hub-hero::before,
  .hero-frame::before,
  .hero-service-selector a::after,
  .trust-rail > div::after,
  .hub-page .division-card figure::before { display: none; }

  .framer-motion-ready .framer-motion-group > .framer-motion-item,
  .framer-motion-ready .framer-motion-group:not(.framer-motion-visible) > .framer-motion-item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .framer-motion-ready .hero-mosaic.framer-motion-group > .hero-frame { clip-path: none; }
}

/* High-impact Framer-style choreography. Static content stays readable when scripting is unavailable. */
html.framer-motion-ready,
html.framer-motion-ready body { overflow-x: clip; }

.framer-impact-active .hero-mosaic { isolation: isolate; }
.framer-impact-active .hero-mosaic::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -9% 12%;
  border-radius: 44%;
  background: radial-gradient(circle at 50% 48%, rgba(191, 77, 255, .29), transparent 52%);
  filter: blur(26px);
  animation: framer-mosaic-breathe 3.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.framer-impact-active .hero-frame img,
.framer-impact-active .mini-hero-media img {
  animation: framer-image-drift 8.5s ease-in-out infinite alternate;
}

.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-repair {
  animation: framer-frame-launch-left 1260ms 80ms var(--framer-ease) both;
}

.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-digital {
  animation: framer-frame-launch-top 1100ms 230ms var(--framer-ease) both;
}

.framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-detailing {
  animation: framer-frame-launch-right 1180ms 350ms var(--framer-ease) both;
}

.framer-motion-ready .framer-motion-group:not(.framer-motion-visible) > .framer-motion-item {
  transform: translate3d(0, 72px, 0) scale(.9) rotateX(9deg);
  filter: blur(10px) saturate(.6);
}

.framer-motion-ready .framer-motion-group > .framer-motion-item {
  transition: opacity 760ms var(--framer-ease), transform 1100ms var(--framer-ease), filter 900ms var(--framer-ease);
  transition-delay: calc(60ms + var(--framer-index, 0) * 145ms);
}

.framer-motion-ready .hub-copy.framer-motion-group.framer-motion-visible h1 {
  animation: framer-headline-impact 1200ms 110ms var(--framer-ease) both;
}

.framer-impact-active .button {
  transform: translate3d(0, 0, 0) rotateX(var(--framer-tilt-y, 0deg)) rotateY(var(--framer-tilt-x, 0deg));
  transform-style: preserve-3d;
}

.framer-impact-active .button:hover,
.framer-impact-active .button:focus-visible {
  box-shadow: 0 18px 48px rgba(135, 38, 232, .34), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}

.framer-impact-active .division-card:hover,
.framer-impact-active .package-card:hover,
.framer-impact-active .spotlight-card:hover,
.framer-impact-active .price-card:hover,
.framer-impact-active .detailing-price-card:hover {
  transform: translate3d(0, -13px, 0) scale(1.012) rotateX(var(--framer-tilt-y, 0deg)) rotateY(var(--framer-tilt-x, 0deg));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .48), 0 0 56px rgba(147, 44, 255, .14);
}

@keyframes framer-frame-launch-left {
  0% { opacity: 0; clip-path: inset(40% 100% 0 0 round 22px); transform: translate3d(-130px, 72px, -120px) rotateY(23deg) rotateZ(-5deg) scale(.72); filter: blur(15px); }
  62% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(12px, -9px, 0) rotateY(-3deg) rotateZ(.7deg) scale(1.025); filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes framer-frame-launch-top {
  0% { opacity: 0; clip-path: inset(100% 0 0 0 round 22px); transform: translate3d(0, -110px, -80px) rotateX(18deg) rotateZ(4deg) scale(.75); filter: blur(14px); }
  64% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(-7px, 6px, 0) rotateX(-2deg) rotateZ(-.5deg) scale(1.03); filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes framer-frame-launch-right {
  0% { opacity: 0; clip-path: inset(0 0 42% 100% round 22px); transform: translate3d(126px, 86px, -100px) rotateY(-24deg) rotateZ(5deg) scale(.7); filter: blur(16px); }
  63% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(-12px, -6px, 0) rotateY(3deg) rotateZ(-.6deg) scale(1.03); filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 round 22px); transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes framer-headline-impact {
  0% { opacity: 0; transform: translate3d(-84px, 34px, 0) skewX(-8deg) scale(1.08); filter: blur(18px); letter-spacing: -.12em; }
  58% { opacity: 1; transform: translate3d(8px, -3px, 0) skewX(.5deg) scale(.995); filter: blur(0); letter-spacing: -.04em; }
  100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: -.055em; }
}

@keyframes framer-image-drift {
  0% { transform: scale(1.02) translate3d(-1.5%, -1%, 0); filter: saturate(.86) contrast(1.04) brightness(.78); }
  100% { transform: scale(1.105) translate3d(1.8%, 1.1%, 0); filter: saturate(1.08) contrast(1.08) brightness(.9); }
}

@keyframes framer-mosaic-breathe { from { transform: scale(.82); opacity: .45; } to { transform: scale(1.13); opacity: .9; } }

@media (max-width: 760px) {
  .framer-motion-ready .framer-motion-group:not(.framer-motion-visible) > .framer-motion-item { transform: translate3d(0, 42px, 0) scale(.94); filter: blur(7px); }
  .framer-impact-active .hero-frame img,
  .framer-impact-active .mini-hero-media img { animation-duration: 11s; }
  .framer-impact-active .division-card:hover,
  .framer-impact-active .package-card:hover,
  .framer-impact-active .spotlight-card:hover,
  .framer-impact-active .price-card:hover,
  .framer-impact-active .detailing-price-card:hover { transform: none; box-shadow: var(--framer-shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .framer-impact-active .hero-mosaic::before { display: none; }
  .framer-impact-active .hero-frame img,
  .framer-impact-active .mini-hero-media img,
  .framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-repair,
  .framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-digital,
  .framer-motion-ready .hero-mosaic.framer-motion-group.framer-motion-visible .hero-frame-detailing,
  .framer-motion-ready .hub-copy.framer-motion-group.framer-motion-visible h1 { animation: none; }
}

/* Conversion and hierarchy finish: keep the hero energetic, make the rest easier to scan. */
.hub-page .hero-service-selector {
  max-width: 536px;
  margin-top: 22px;
  gap: 0;
  border-block: 1px solid rgba(195, 113, 250, .19);
}

.hub-page .hero-service-selector a {
  min-height: 54px;
  padding: 0 14px;
  gap: 9px;
  border: 0;
  border-right: 1px solid rgba(195, 113, 250, .16);
  border-radius: 0;
  background: transparent;
}

.hub-page .hero-service-selector a:last-child { border-right: 0; }
.hub-page .hero-service-selector a:hover,
.hub-page .hero-service-selector a:focus-visible { transform: none; background: rgba(141, 55, 218, .11); }
.hub-page .hero-service-selector small { display: none; }
.hub-page .hero-service-selector strong { font-size: 12px; letter-spacing: .01em; }
.hub-page .hero-service-selector svg { width: 19px; height: 19px; }

.hub-page .hero-assurances { margin-top: 26px; color: #aaa2b3; }
.hub-page .hero-assurances span::before { box-shadow: 0 0 0 4px rgba(165, 92, 255, .1); }

.hub-page .trust-rail { margin-top: -4px; }
.hub-page .trust-rail p,
.hub-page .section-intro,
.hub-page .division-card p,
.hub-page .process-heading > p:last-child,
.hub-page .steps p { color: #bbb4c4; }

.hub-page .division-router.section { padding-top: clamp(68px, 7vw, 98px); padding-bottom: clamp(76px, 8vw, 112px); }
.hub-page .section-heading { margin-bottom: 42px; }
.hub-page .division-card { box-shadow: 0 18px 42px rgba(0, 0, 0, .16); }
.hub-page .division-card figure::after { background: linear-gradient(180deg, transparent 38%, rgba(13, 10, 20, .94) 100%); }
.hub-page .division-card-copy { min-height: 292px; padding-top: 4px; }
.hub-page .division-card h3 { margin-bottom: 12px; }

.hub-page .division-card-spotlight {
  width: fit-content;
  margin-top: 18px;
  padding: 7px 9px;
  border: 1px solid rgba(195, 113, 250, .25);
  border-radius: 999px;
  color: #d9c7ed;
  background: rgba(144, 57, 220, .1);
  font: 650 10px/1.2 var(--rz-ui);
  letter-spacing: .01em;
}

.hub-page .division-card-action {
  min-height: 46px;
  margin-top: auto;
  padding: 0 13px !important;
  border: 1px solid rgba(195, 113, 250, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.hub-page .division-card:hover .division-card-action,
.hub-page .division-card:focus-visible .division-card-action { border-color: rgba(212, 140, 255, .7); background: rgba(144, 57, 220, .18); }
.hub-page .division-card-action .icon-svg { width: 17px; height: 17px; }

.hub-page .site-header .nav-links > a.nav-active:not(.button) { color: #fff; }
.hub-page .site-header .nav-links > a.nav-active:not(.button)::after { opacity: 1; transform: scaleX(1); background: var(--rz-violet-soft); }

.footer-cta {
  width: fit-content;
  margin-top: 24px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  border: 1px solid rgba(195, 113, 250, .29);
  border-radius: 13px;
  color: #fff;
  background: rgba(141, 55, 218, .09);
  text-decoration: none;
  transition: transform 180ms var(--framer-ease), border-color 180ms ease, background-color 180ms ease;
}

.footer-cta span { color: #b6afc0; font: 600 10px/1.2 var(--rz-ui); }
.footer-cta strong { font: 700 12px/1.3 var(--rz-ui); }
.footer-cta .icon-svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: #d9a6ff; }
.footer-cta:hover,
.footer-cta:focus-visible { transform: translateY(-2px); border-color: rgba(212, 140, 255, .7); background: rgba(141, 55, 218, .18); }

.framer-motion-ready .framer-motion-group:not(.hero-mosaic):not(.hub-copy):not(.framer-motion-visible) > .framer-motion-item {
  transform: translate3d(0, 34px, 0) scale(.98);
  filter: blur(4px) saturate(.85);
}

.framer-motion-ready .framer-motion-group:not(.hero-mosaic):not(.hub-copy) > .framer-motion-item {
  transition-duration: 620ms, 720ms, 620ms;
  transition-delay: calc(35ms + var(--framer-index, 0) * 75ms);
}

@media (max-width: 640px) {
  .hub-page .hero-service-selector { grid-template-columns: 1fr; margin-top: 18px; }
  .hub-page .hero-service-selector a,
  .hub-page .hero-service-selector a:last-child { min-height: 48px; padding-inline: 4px; border-right: 0; border-bottom: 1px solid rgba(195, 113, 250, .13); }
  .hub-page .hero-service-selector a:last-child { border-bottom: 0; }
  .hub-page .hero-service-selector strong { font-size: 13px; }
  .hub-page .division-router.section { padding-top: 62px; }
  .hub-page .division-card-copy { min-height: 300px; padding: 10px 20px 20px; }
  .hub-page .division-card-spotlight { margin-top: 15px; }
  .hub-page .division-card-action { min-height: 48px; margin-top: 18px; }
  .footer-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta:hover,
  .footer-cta:focus-visible { transform: none; }
}
