:root {
  --ink: #0f2d38;
  --muted: #4f6065;
  --paper: #f8fbfb;
  --surface-2: #edf6f5;
  --blue: #007481;
  --blue-deep: #063f47;
  --teal: #168b8f;
  --green: #5e9a83;
  --gold: #b7a05d;
  --mark-opacity: 0.18;
  --mark-size: clamp(250px, 30vw, 420px);
  --hero-overlay: linear-gradient(90deg, rgba(6, 63, 71, 0.84), rgba(0, 116, 129, 0.36) 54%, rgba(183, 160, 93, 0.1));
}

.brand-title,
h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
}

.hero-panel {
  border-color: rgba(199, 164, 95, 0.34);
}

.hero h1 {
  color: #f0e4b5;
  text-shadow: 0 18px 38px rgba(3, 32, 42, 0.42), 0 5px 13px rgba(3, 32, 42, 0.26);
}

.hero-glow-heading {
  color: #f0e4b5;
}

.hero-glow-heading::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background:
    radial-gradient(
      circle at var(--hero-glow-x) var(--hero-glow-y),
      #ffffff 0,
      #fff6cf 14%,
      #f6e8ad 30%,
      #f0e4b5 56%,
      #dccb84 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  pointer-events: none;
  text-shadow: none;
  transition: opacity 120ms ease;
}

.hero-glow-heading.is-glowing::after {
  opacity: 1;
}

.hero-tagline {
  color: #f3e8b7;
  letter-spacing: 0.02em;
  text-shadow: 0 14px 32px rgba(3, 32, 42, 0.36), 0 0 22px rgba(255, 244, 199, 0.2);
}

.hero-glow-tagline::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background:
    radial-gradient(
      circle at var(--hero-glow-x) var(--hero-glow-y),
      #ffffff 0,
      #fff8d9 18%,
      #f7eab8 36%,
      rgba(243, 232, 183, 0.2) 62%,
      rgba(243, 232, 183, 0) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  pointer-events: none;
  text-shadow: none;
  transition: opacity 140ms ease;
}

.hero-glow-tagline.is-glowing::after {
  opacity: 1;
}

.section-glow-title.hero-glow-tagline::after {
  background:
    radial-gradient(
      circle at var(--hero-glow-x) var(--hero-glow-y),
      rgba(255, 255, 255, 0.92) 0,
      rgba(255, 255, 255, 0.58) 20%,
      rgba(255, 255, 255, 0.22) 42%,
      rgba(255, 255, 255, 0.06) 68%,
      rgba(255, 255, 255, 0) 100%
    );
}

.section-glow-title.hero-glow-tagline.is-glowing::after {
  opacity: 0.38;
}

body.theme-night .section-glow-title.hero-glow-tagline::after {
  background:
    radial-gradient(
      circle at var(--hero-glow-x) var(--hero-glow-y),
      rgba(255, 255, 255, 0.95) 0,
      rgba(241, 248, 255, 0.7) 18%,
      rgba(174, 219, 255, 0.34) 36%,
      rgba(174, 219, 255, 0.08) 58%,
      rgba(174, 219, 255, 0) 76%
    );
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 18px rgba(174, 219, 255, 0.14);
}

body.theme-night .section-glow-title.hero-glow-tagline.is-glowing::after {
  opacity: 0.52;
}

.kicker {
  color: var(--gold);
}

.section-heading h2,
.detail-content h2,
.location-copy h2 {
  color: var(--blue);
}

.service-flyout-card h3,
.product-card h3,
.provider-card-text h3 {
  color: var(--blue-deep);
}

.hero .eyebrow {
  display: none;
}

.hero-logo-backdrop {
  left: max(22px, calc((100vw - 1180px) / 2 + 10px));
  color: var(--gold);
  display: none;
}

.brand-mark {
  width: 76px;
  height: 64px;
}

.brand:hover .brand-mark {
  transform: scale(1.04);
}

.hero-business-logo-wrap {
  --nulune-logo-size: clamp(230px, 24vw, 370px);
  --nulune-content-left: max(20px, calc((100vw - 1180px) / 2));
  --nulune-heading-offset: clamp(330px, 31vw, 470px);
  --nulune-logo-left: max(26px, calc(((var(--nulune-content-left) + var(--nulune-heading-offset)) / 2) - (var(--nulune-logo-size) / 2)));
  --nulune-logo-visual-offset: calc(var(--nulune-logo-size) * 0.07);
  --nulune-logo-intro-shift: calc(50vw - var(--nulune-logo-left) - (var(--nulune-logo-size) / 2) + var(--nulune-logo-visual-offset));
  left: var(--nulune-logo-left);
  top: calc(50% + 10px);
  width: var(--nulune-logo-size);
  transform: translateY(-50%);
}

.moon-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.moon-sparkle {
  position: absolute;
  left: var(--spark-x);
  top: var(--spark-y);
  width: var(--spark-size, 3px);
  height: var(--spark-size, 3px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 9px rgba(255, 255, 255, 0.72),
    0 0 18px rgba(210, 244, 255, 0.36);
  transform: translate3d(0, 0, 0) scale(0.4);
  animation: nulune-moon-sparkle var(--spark-duration, 2500ms) ease-in-out var(--spark-delay, 0ms) infinite;
}

.moon-sparkle::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0.85) 52%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 255, 255, 0.72) 52%, transparent 58%);
  opacity: 0.86;
}

.moon-sparkle-1 { --spark-x: 21%; --spark-y: 18%; --spark-size: 3px; --spark-delay: 0ms; --spark-duration: 3100ms; }
.moon-sparkle-2 { --spark-x: 28%; --spark-y: 21%; --spark-size: 2px; --spark-delay: 420ms; --spark-duration: 2800ms; }
.moon-sparkle-3 { --spark-x: 17%; --spark-y: 29%; --spark-size: 2px; --spark-delay: 870ms; --spark-duration: 3400ms; }
.moon-sparkle-4 { --spark-x: 34%; --spark-y: 15%; --spark-size: 3px; --spark-delay: 1220ms; --spark-duration: 3000ms; }
.moon-sparkle-5 { --spark-x: 23%; --spark-y: 36%; --spark-size: 2px; --spark-delay: 1680ms; --spark-duration: 3300ms; }
.moon-sparkle-6 { --spark-x: 40%; --spark-y: 24%; --spark-size: 2px; --spark-delay: 2100ms; --spark-duration: 2900ms; }
.moon-sparkle-7 { --spark-x: 12%; --spark-y: 43%; --spark-size: 2px; --spark-delay: 2500ms; --spark-duration: 3600ms; }
.moon-sparkle-8 { --spark-x: 30%; --spark-y: 44%; --spark-size: 3px; --spark-delay: 2960ms; --spark-duration: 3200ms; }
.moon-sparkle-9 { --spark-x: 18%; --spark-y: 55%; --spark-size: 2px; --spark-delay: 3420ms; --spark-duration: 3500ms; }
.moon-sparkle-10 { --spark-x: 37%; --spark-y: 34%; --spark-size: 2px; --spark-delay: 3900ms; --spark-duration: 3100ms; }
.moon-sparkle-11 { --spark-x: 26%; --spark-y: 62%; --spark-size: 2px; --spark-delay: 4380ms; --spark-duration: 3400ms; }
.moon-sparkle-12 { --spark-x: 11%; --spark-y: 24%; --spark-size: 2px; --spark-delay: 4860ms; --spark-duration: 3000ms; }
.moon-sparkle-13 { --spark-x: 44%; --spark-y: 18%; --spark-size: 2px; --spark-delay: 5360ms; --spark-duration: 3300ms; }
.moon-sparkle-14 { --spark-x: 15%; --spark-y: 64%; --spark-size: 3px; --spark-delay: 5860ms; --spark-duration: 3700ms; }

.hero-business-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 246, 203, 0.36), rgba(218, 188, 100, 0.2) 36%, rgba(255, 246, 203, 0) 70%);
  filter: blur(24px);
  opacity: 0.34;
  transform: translate3d(-1.5%, -1.5%, 0) scale(0.98);
  animation: nulune-logo-aura 8s ease-in-out infinite;
}

.hero-business-logo-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 233, 165, 0.28) 51%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255, 240, 179, 0.18), transparent 22%);
  background-size: 330% 180%, 180% 180%;
  background-position: -170% 0, 50% 50%;
  opacity: 0;
  mix-blend-mode: screen;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .hero-business-logo-wrap::after {
    display: block;
    -webkit-mask-image: url("../assets/nulune-logo-2026-08-24-final.png");
    mask-image: url("../assets/nulune-logo-2026-08-24-final.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: nulune-logo-sheen 28s ease-in-out 3.8s infinite;
  }
}

body.theme-night .hero-business-logo-wrap::after,
body.theme-night.home-intro .hero-business-logo-wrap::after {
  animation: none;
  display: none;
}

body.theme-night .moon-sparkles {
  opacity: 1.08;
}

body.theme-night .hero-business-logo {
  opacity: 0.86;
  filter:
    drop-shadow(0 34px 60px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 18px rgba(210, 244, 255, 0.2))
    drop-shadow(0 0 26px rgba(221, 202, 131, 0.12));
}

.hero-business-logo {
  opacity: 0.8;
  filter: drop-shadow(0 30px 50px rgba(3, 32, 42, 0.38)) drop-shadow(0 8px 22px rgba(7, 57, 73, 0.24)) drop-shadow(0 0 16px rgba(255, 244, 199, 0.14));
}

.hero-business-logo-wrap.reveal {
  transform: translateY(-50%) translateY(18px);
}

.hero-business-logo-wrap.reveal.is-visible {
  opacity: 0.8;
  transform: translateY(-50%) translateY(0);
}

body.home-intro .topbar {
  animation: nulune-intro-topbar 900ms ease 920ms both;
}

body.home-intro .hero-business-logo-wrap.reveal.is-visible {
  animation: nulune-intro-logo 1720ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

body.home-intro .hero-business-logo-wrap::after {
  animation: nulune-intro-logo-sheen 2400ms ease 260ms both, nulune-logo-sheen 28s ease-in-out 7.2s infinite;
}

body.home-intro .hero-glow-heading.reveal.is-visible {
  animation: nulune-intro-heading 950ms ease 1760ms both;
}

body.home-intro .hero-copy.reveal.is-visible {
  animation: nulune-intro-copy 850ms ease 2160ms both;
}

body.home-intro .hero-tagline.reveal.is-visible {
  animation: nulune-intro-tagline 780ms ease 2440ms both;
}

body.home-intro .section .reveal.is-visible {
  animation: nulune-intro-section 820ms ease 2680ms both;
}

@keyframes nulune-logo-aura {
  0%,
  100% {
    opacity: 0.26;
    transform: translate3d(-2%, -1.5%, 0) scale(0.98);
  }

  42% {
    opacity: 0.42;
    transform: translate3d(2%, -3%, 0) scale(1.03);
  }

  70% {
    opacity: 0.32;
    transform: translate3d(1%, 2%, 0) scale(1.01);
  }
}

@keyframes nulune-moon-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.3) rotate(0deg);
  }

  18% {
    opacity: 0;
  }

  30% {
    opacity: 0.95;
    transform: translate3d(0, 4px, 0) scale(1) rotate(25deg);
  }

  58% {
    opacity: 0.72;
    transform: translate3d(2px, 15px, 0) scale(0.82) rotate(70deg);
  }

  78% {
    opacity: 0;
    transform: translate3d(4px, 28px, 0) scale(0.38) rotate(110deg);
  }
}

@keyframes nulune-intro-logo {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(var(--nulune-logo-intro-shift)) scale(1.16);
    filter: blur(2px);
  }

  18% {
    opacity: 1;
    transform: translateY(-50%) translateX(var(--nulune-logo-intro-shift)) scale(1.14);
    filter: blur(0);
  }

  46% {
    opacity: 0.96;
    transform: translateY(-50%) translateX(var(--nulune-logo-intro-shift)) scale(1.1);
    filter: blur(0);
  }

  100% {
    opacity: 0.8;
    transform: translateY(-50%) translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes nulune-intro-heading {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nulune-intro-copy {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes nulune-intro-tagline {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nulune-intro-section {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nulune-intro-topbar {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nulune-intro-logo-sheen {
  0% {
    opacity: 0;
    background-position: -170% 0, 50% 50%;
  }

  48% {
    opacity: 0.3;
    background-position: -16% 4%, 48% 50%;
  }

  82% {
    opacity: 0.22;
    background-position: 82% 7%, 52% 50%;
  }

  100% {
    opacity: 0;
    background-position: 170% 8%, 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-business-logo-wrap::before,
  .hero-business-logo-wrap::after,
  .moon-sparkle {
    animation: none;
  }

  .hero-business-logo-wrap::before {
    opacity: 0.3;
    transform: scale(1);
  }

  .moon-sparkles {
    display: none;
  }
}

@media (min-width: 941px) {
  .hero {
    align-items: center;
    padding-top: 96px;
    padding-bottom: 54px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 720px);
    align-items: center;
    padding-left: clamp(330px, 31vw, 470px);
  }
}

@media (max-width: 640px) {
  .hero-logo-backdrop {
    left: 12px;
    top: 47%;
    width: 230px;
    height: 230px;
  }

  .hero {
    padding-top: 250px;
  }

  .brand-mark {
    width: 62px;
    height: 54px;
  }

  .hero-business-logo-wrap {
    left: 50%;
    top: 116px;
    width: 146px;
    transform: translateX(-50%);
  }

  .hero-business-logo-wrap::before {
    inset: 4%;
    filter: blur(18px);
  }

  .hero-business-logo {
    filter: drop-shadow(0 18px 34px rgba(3, 32, 42, 0.34)) drop-shadow(0 0 12px rgba(255, 244, 199, 0.12));
  }

  .hero-business-logo-wrap.reveal {
    transform: translateX(-50%) translateY(18px);
  }

  .hero-business-logo-wrap.reveal.is-visible {
    opacity: 0.8;
    transform: translateX(-50%) translateY(0);
  }

  body.home-intro .hero-business-logo-wrap.reveal.is-visible {
    animation: nulune-intro-logo-mobile 1320ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
  }
}

@keyframes nulune-intro-logo-mobile {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(1.12);
    filter: blur(2px);
  }

  44% {
    opacity: 0.9;
    transform: translateX(-50%) translateY(22px) scale(1.08);
    filter: blur(0);
  }

  100% {
    opacity: 0.8;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}