/* Shared moving circles for every page. */
.dashboard-shell::before,
.dashboard-shell::after,
.dashboard-home .page::before,
body::before,
body::after,
body main:first-of-type::before {
  display: none !important;
}

.page {
  isolation: auto !important;
}

.dashboard-home .dashboard-shell {
  z-index: 10;
}

.sidebar .side-bottom {
  padding-top: 0.65rem;
}

.sidebar-theme-control,
.mobile-theme-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.sidebar-theme-control {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.mobile-theme-control {
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.dashboard-theme-toggle {
  position: relative;
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--wine);
  cursor: pointer;
}

.dashboard-theme-toggle:hover {
  background: var(--soft);
}

.dashboard-theme-toggle svg {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-theme-toggle .theme-icon-moon,
html[data-theme="dark"] .dashboard-theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: scale(0.7);
}

html[data-theme="dark"] .dashboard-theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: scale(1);
}

html[data-theme="dark"] .dashboard-theme-toggle {
  border-color: rgba(255, 214, 231, 0.25);
  background: rgba(255, 255, 255, 0.07);
  color: #fff7fb;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-header,
html[data-theme="dark"] .mobile-nav {
  background: #101010 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] img[src$="logo.svg"],
html[data-theme="dark"] img[src$="logo-header.svg"] {
  filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] #menu-button {
  background: #191919 !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .page {
  background: transparent !important;
}

html[data-theme="dark"] .dashboard-board,
html[data-theme="dark"] .tool-dock {
  background: #121212 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="dark"] .service-preview a,
html[data-theme="dark"] .fit-rows > div,
html[data-theme="dark"] .cert-preview > div,
html[data-theme="dark"] .home-sample-grid a,
html[data-theme="dark"] .system-pills span {
  background: #1b1b1b !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] .sidebar .nav a {
  background: #191919 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff7fb !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .sidebar .nav a:hover,
html[data-theme="dark"] .sidebar .nav a:focus-visible,
html[data-theme="dark"] .sidebar .nav a[aria-current="page"] {
  background: #3b292f !important;
  border-color: #d58aa9 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .sidebar .nav .nav-icon {
  color: currentColor !important;
}

html[data-theme="dark"] .sidebar .side-bottom > .button {
  background: #7f4057 !important;
  border-color: #d58aa9 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .sidebar .side-bottom > .button:hover,
html[data-theme="dark"] .sidebar .side-bottom > .button:focus-visible {
  background: #99506a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .availability-pill {
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 7px 20px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .availability-pill > .iconify {
  color: #63c985 !important;
  fill: #63c985 !important;
  stroke: #63c985 !important;
}

/* A deeper neutral dark mode without violet-tinted surfaces. */
html[data-theme="dark"] {
  --background: #0a0a0a;
  --surface: #171717;
  --text: #f8f8f8;
  --muted-text: #cccccc;
  --border: rgba(255, 255, 255, 0.16);
  --shadow: rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #080808 0%, #101010 52%, #090909 100%) !important;
}

html[data-theme="dark"] :is(.hero-section, .page-header-design) {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.05), transparent 17rem),
    radial-gradient(circle at 86% 68%, rgba(255, 255, 255, 0.035), transparent 22rem),
    linear-gradient(135deg, #111111, #0b0b0b) !important;
}

html[data-theme="dark"] :is(.hero-section, .page-header-design)::before,
html[data-theme="dark"] :is(.hero-section, .page-header-design)::after {
  filter: grayscale(1) !important;
  opacity: 0.12 !important;
}

html[data-theme="dark"] :is(
  article,
  form,
  .prose,
  .services-carousel-card,
  .dash-card,
  .sample-project,
  .about-detail-card,
  .development-card,
  .help-card,
  .service-details-section .editorial,
  .tool-use-card,
  .contact-form,
  .faq-list details,
  main .grid > div[class*="rounded"],
  main div[class*="rounded-xl"],
  main div[class*="rounded-2xl"],
  .bg-white,
  .bg-rose-50,
  [class*="bg-rose-50"]
) {
  background: #171717 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] :is(
  .footer,
  footer,
  nav,
  nav[class*="bg-"],
  #mobile-menu
) {
  background: rgba(12, 12, 12, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] :is(
  .portfolio-gallery-tools,
  .portfolio-jump-select,
  .portfolio-jump-summary,
  .portfolio-jump-options
) {
  background: #171717 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.background-circles {
  position: fixed;
  inset: 0 0 0 var(--side, 250px);
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.background-circle {
  position: absolute;
  display: block;
  border: 1px solid rgba(115, 70, 82, 0.17);
  border-radius: 50%;
  background: transparent;
  will-change: transform;
}

.circle-one {
  width: 460px;
  height: 460px;
  right: -125px;
  top: -145px;
  animation: site-circle-one 12s ease-in-out infinite alternate;
}

.circle-two {
  width: 520px;
  height: 520px;
  left: -150px;
  top: 27%;
  animation: site-circle-two 15s ease-in-out infinite alternate;
}

.circle-three {
  width: 580px;
  height: 580px;
  right: -170px;
  top: 55%;
  animation: site-circle-three 18s ease-in-out infinite alternate;
}

@keyframes site-circle-one {
  0% { transform: translate3d(0, -16px, 0) scale(0.98); }
  50% { transform: translate3d(-58px, 24px, 0) scale(1.025); }
  100% { transform: translate3d(-20px, 62px, 0) scale(1); }
}

@keyframes site-circle-two {
  0% { transform: translate3d(-18px, 20px, 0) scale(1); }
  50% { transform: translate3d(58px, -40px, 0) scale(0.975); }
  100% { transform: translate3d(18px, 52px, 0) scale(1.02); }
}

@keyframes site-circle-three {
  0% { transform: translate3d(16px, -28px, 0) scale(0.985); }
  50% { transform: translate3d(-68px, 18px, 0) scale(1.025); }
  100% { transform: translate3d(-20px, 66px, 0) scale(1); }
}

@media (max-width: 1000px) {
  .background-circles {
    left: 0;
  }

  .mobile-header {
    height: 71px;
  }

  .mobile-nav {
    top: calc(71px + 0.5rem);
    right: 1rem;
    left: 1rem;
    border-radius: 0.9rem;
  }

  .mobile-nav a {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus-visible,
  .mobile-nav a[aria-current="page"] {
    border-radius: 0;
    background: rgba(217, 139, 175, 0.1) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .mobile-nav a {
    border-bottom-color: rgba(255, 230, 240, 0.2);
  }

  html[data-theme="dark"] .mobile-nav a:hover,
  html[data-theme="dark"] .mobile-nav a:focus-visible,
  html[data-theme="dark"] .mobile-nav a[aria-current="page"] {
    background: rgba(255, 179, 210, 0.1) !important;
  }
}

@media (max-width: 700px) {
  html,
  body,
  .page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap,
  .dashboard-shell {
    width: calc(100% - 2rem) !important;
    margin-inline: auto !important;
  }

  .dashboard-intro,
  .tool-dock,
  .dashboard-board,
  .dash-card,
  .page-hero > .wrap,
  .section > .wrap {
    max-width: 100%;
  }

  .dash-card,
  .sample-project,
  .about-detail-card,
  .development-card,
  .help-card,
  .tool-use-card,
  .contact-card,
  .contact-form {
    overflow-wrap: anywhere;
  }

  .background-circle {
    border-color: rgba(115, 70, 82, 0.13);
  }

  .dashboard-home .mobile-profile-intro {
    width: 100%;
    gap: 0.55rem;
    margin: 0 auto 1.25rem;
  }

  .dashboard-home .mobile-profile-intro img {
    margin-inline: auto;
  }

  .dashboard-home .dashboard-intro .mobile-profile-intro > p {
    max-width: 250px;
    margin-inline: auto;
    line-height: 1.35;
    text-align: center;
  }

  .dashboard-home .mobile-profile-intro .availability-pill {
    display: grid;
    grid-template-columns: auto auto;
    width: min(100%, 308px);
    margin: 0.65rem auto 0;
    padding: 0.75rem 0.9rem;
    column-gap: 0.55rem;
    row-gap: 0.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    text-align: center;
  }

  .dashboard-home .mobile-profile-intro .availability-pill > .iconify {
    grid-column: 1;
    grid-row: 1;
  }

  .dashboard-home .mobile-profile-intro .availability-pill > span:not(.iconify) {
    grid-column: 2;
    grid-row: 1;
  }

  .dashboard-home .mobile-profile-intro .availability-pill small {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
    border: 0;
    line-height: 1.35;
  }

  html:not([data-theme="dark"]) .dashboard-home .mobile-profile-intro .availability-pill {
    background: #fff;
  }

  html[data-theme="dark"] .dashboard-home .mobile-profile-intro .availability-pill {
    background: #1b1b1b;
    border-color: rgba(255, 255, 255, 0.52) !important;
  }

  .about-intro-section .about-grid {
    width: auto !important;
    max-width: none !important;
    margin-inline: 1rem !important;
  }

  .about-intro-section .about-grid > div {
    width: 100%;
    max-width: 100%;
  }

  .circle-one { width: 380px; height: 380px; right: -115px; top: -95px; }
  .circle-two { width: 430px; height: 430px; left: -135px; top: 30%; }
  .circle-three { width: 480px; height: 480px; right: -145px; top: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .background-circle {
    animation: none !important;
    transform: none !important;
  }
}

.dashboard-intro,
.tool-dock,
.dashboard-board,
.dash-card,
.page-hero > .wrap,
.section > .wrap,
.footer > .wrap,
body > nav,
body > header,
body > main .mx-auto {
  position: relative;
  z-index: 10;
}

/* Keep the decoration behind every card and protect text and imagery from it. */
.dash-card,
.sample-project,
.about-detail-card,
.development-card,
.help-card,
.service-details-section .editorial,
.tool-use-card,
.contact-card,
.contact-form,
.faq-list details,
main article,
main .grid > div[class*="rounded-xl"],
main .grid > div[class*="rounded-lg"] {
  position: relative;
  z-index: 10;
  isolation: isolate;
}

/* A nearly solid light surface keeps the moving outlines from crossing copy. */
html:not([data-theme="dark"]) .dash-card,
html:not([data-theme="dark"]) .sample-project,
html:not([data-theme="dark"]) .about-detail-card,
html:not([data-theme="dark"]) .development-card,
html:not([data-theme="dark"]) .help-card,
html:not([data-theme="dark"]) .service-details-section .editorial,
html:not([data-theme="dark"]) .tool-use-card,
html:not([data-theme="dark"]) .contact-form,
html[data-theme="light"] main article {
  background-color: rgba(255, 255, 255, 0.98);
}

html:not([data-theme="dark"]) .dashboard-home .dash-card {
  background-color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dash-card img,
.sample-project img,
.about-detail-card img,
.development-card img,
.help-card img,
.service-details-section .editorial img,
.tool-use-card img,
.contact-card img,
.contact-form img,
main article img {
  position: relative;
  z-index: 2;
}

/* Final dark-mode contrast lock: no pale or tinted page-specific surfaces. */
html[data-theme="dark"] body {
  background: #050505 !important;
  color: #eeeeee !important;
}

html[data-theme="dark"] :is(
  .page,
  main,
  main[class*="bg-"],
  section,
  section[class*="bg-"]
) {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .sidebar,
  .mobile-header,
  .mobile-nav,
  .site-header,
  body > nav,
  body > header,
  footer,
  .footer
) {
  background: #080808 !important;
  border-color: #353535 !important;
}

html[data-theme="dark"] :is(
  .hero-section,
  .page-header-design,
  .page-hero,
  .dashboard-board,
  .tool-dock
) {
  background: #0b0b0b !important;
  border-color: #383838 !important;
}

html[data-theme="dark"] :is(
  article,
  form,
  .prose,
  .dash-card,
  .service-card,
  .services-carousel-card,
  .sample-project,
  .about-detail-card,
  .development-card,
  .help-card,
  .tool-use-card,
  .contact-card,
  .contact-form,
  .manage-item,
  .boundary,
  .sample-handoff,
  .service-details-section .editorial,
  .faq-list details,
  main .grid > div[class*="rounded"],
  main div[class*="rounded-xl"],
  main div[class*="rounded-2xl"],
  .bg-white,
  .bg-rose-50,
  [class*="bg-rose-50"]
) {
  background: #101010 !important;
  border-color: #3d3d3d !important;
  color: #eeeeee !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"] :is(
  .service-preview a,
  .fit-rows > div,
  .cert-preview > div,
  .home-sample-grid a,
  .system-pills span,
  .portfolio-gallery-tools,
  .portfolio-jump-select,
  .portfolio-jump-summary,
  .portfolio-jump-options,
  .portfolio-case-grid > *,
  .portfolio-process-panel,
  .portfolio-process-checklist li,
  .portfolio-after-card,
  .portfolio-after-metric,
  .portfolio-after-row,
  .portfolio-after-note,
  .portfolio-after-table,
  .mock-window,
  .overflow-hidden
) {
  background: #151515 !important;
  border-color: #424242 !important;
}

html[data-theme="dark"] :is(input, textarea, select) {
  background: #090909 !important;
  border-color: #505050 !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #a9a9a9 !important;
  opacity: 1;
}

html[data-theme="dark"] main :is(h1, h2, h3, h4, h5, h6, strong, label, th),
html[data-theme="dark"] footer :is(h1, h2, h3, h4, h5, h6, strong) {
  color: #f8f8f8 !important;
}

html[data-theme="dark"] main :is(p, li, small, span, em, blockquote, cite, dt, dd, td),
html[data-theme="dark"] footer :is(p, li, small, span, em) {
  color: #d2d2d2 !important;
}

html[data-theme="dark"] .dashboard-home .mobile-profile-intro .availability-pill {
  background: #101010 !important;
  border-color: #676767 !important;
}

/* Page-specific tiles must never fall back to their light-theme fills. */
html[data-theme="dark"] :is(
  .workspace-card,
  .industry-list span,
  .connection span,
  .tool,
  .quote-panel,
  .credential,
  .profile-socials a,
  .service-details-section .columns li,
  .service-details-section .editorial h3,
  .service-details-section .editorial h3 + p,
  .work-style-icon,
  .development-icon,
  .help-card-icon,
  .service-detail-icon,
  .tool-use-icon,
  .contact-assurances > div,
  .contact-step-icon,
  .contact-privacy,
  .faq-list summary::after,
  main [class*="bg-slate-"],
  main [class*="bg-gray-"],
  main [class*="bg-zinc-"],
  main [class*="bg-neutral-"],
  main [class*="bg-stone-"],
  main [class*="bg-rose-100"],
  main [class*="bg-amber-"],
  main [class*="bg-emerald-"],
  main [class*="bg-blue-"],
  main [class*="bg-violet-"]
) {
  background: #151515 !important;
  background-color: #151515 !important;
  background-image: none !important;
  border-color: #444444 !important;
  color: #eeeeee !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .about-detail-card:hover .work-style-icon,
  .development-card:hover .development-icon,
  .help-card:hover .help-card-icon,
  .editorial:hover .service-detail-icon,
  .tool-use-card:hover .tool-use-icon
) {
  background: #1b1b1b !important;
  background-color: #1b1b1b !important;
}

html[data-theme="dark"] :is(
  .timeline-number,
  .tool-category-number,
  .workflow-list .workflow-number,
  .workflow-list .current .workflow-number
) {
  background: #1b1b1b !important;
  border: 1px solid #505050 !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
}

/* My Work contains miniature light UI screens that need their own dark palette. */
html[data-theme="dark"] :is(
  .sample-disclosure,
  .sample-context > span,
  .sample-screen,
  .sample-screen-top,
  .sample-metrics > div,
  .sample-handoff,
  .workflow-list > div
) {
  background: #141414 !important;
  border-color: #3d3d3d !important;
  color: #eeeeee !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .sample-number,
  .workflow-list .workflow-number,
  .workflow-list .current .workflow-number,
  .sample-status,
  .sample-status.ready,
  .sample-status.live,
  .sample-status.active,
  .sample-table em,
  .sample-table .matched,
  .sample-table .review,
  .sample-table .scheduled,
  .workflow-list i,
  .workflow-list .current i
) {
  background: #1b1b1b !important;
  border: 1px solid #4a4a4a !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .sample-table > div {
  border-bottom-color: #353535 !important;
}

html[data-theme="dark"] .workflow-progress {
  background: #292929 !important;
}

html[data-theme="dark"] .sample-project b {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] .sample-context b {
  color: #bdbdbd !important;
}

html[data-theme="dark"] .workflow-progress span {
  background: #b86b8a !important;
}

html[data-theme="dark"] .profile-socials a {
  background: #141414 !important;
  border-color: #3d3d3d !important;
}

/* Keep the moving outlines softly visible against the neutral dark background. */
html[data-theme="dark"] .background-circle {
  border-color: rgba(255, 255, 255, 0.11);
}

html[data-theme="dark"] :is(
  a.button,
  button.button,
  .mobile-contact-cta,
  a.bg-brand-primary,
  button.bg-brand-primary,
  a.border-brand-primary,
  button.border-brand-primary
) {
  color: #ffe2ed !important;
}

html[data-theme="dark"] :is(
  a.button,
  button.button,
  .mobile-contact-cta,
  a.bg-brand-primary,
  button.bg-brand-primary,
  a.border-brand-primary,
  button.border-brand-primary
):is(:hover, :focus-visible) {
  color: #fff7fb !important;
}

/* Floating, scroll-compacting header for the dashboard-style mobile pages. */
@media (max-width: 1000px) {
  .mobile-header {
    position: fixed !important;
    top: 0.65rem;
    right: 0.75rem;
    left: 0.75rem;
    z-index: 60;
    width: auto;
    height: 64px;
    min-height: 64px;
    padding: 0.25rem 0.75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow: 0 12px 30px rgba(49, 35, 40, 0.15);
    transition: top 240ms cubic-bezier(0.22, 1, 0.36, 1),
      right 240ms cubic-bezier(0.22, 1, 0.36, 1),
      left 240ms cubic-bezier(0.22, 1, 0.36, 1),
      height 240ms cubic-bezier(0.22, 1, 0.36, 1),
      min-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 200ms ease;
  }

  .mobile-header .brand img,
  .mobile-header .brand strong,
  .mobile-header .brand span,
  .mobile-header .dashboard-theme-toggle,
  .mobile-header .menu-toggle {
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1),
      height 240ms cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 240ms cubic-bezier(0.22, 1, 0.36, 1),
      font-size 240ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-header .brand img {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .mobile-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-header.is-scrolled {
    top: 0.4rem;
    right: 1rem;
    left: 1rem;
    height: 50px;
    min-height: 50px;
    padding: 0.15rem 0.6rem;
    box-shadow: 0 10px 24px rgba(31, 22, 25, 0.22);
  }

  .mobile-header.is-scrolled .brand {
    gap: 0.5rem;
  }

  .mobile-header.is-scrolled .brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .mobile-header.is-scrolled .brand strong {
    font-size: 0.95rem;
  }

  .mobile-header.is-scrolled .brand span {
    font-size: 0.62rem;
  }

  .mobile-header.is-scrolled .menu-toggle {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
  }

  .mobile-header.is-scrolled .dashboard-theme-toggle {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .page {
    padding-top: 84px;
  }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .mobile-header,
  .mobile-header .brand img,
  .mobile-header .brand strong,
  .mobile-header .brand span,
  .mobile-header .dashboard-theme-toggle,
  .mobile-header .menu-toggle {
    transition: none !important;
  }
}

/* Fully opaque footer surfaces keep the moving background decoration outside them. */
.footer,
footer[role="contentinfo"] {
  position: relative;
  z-index: 10;
  opacity: 1;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html:not([data-theme="dark"]) .footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html:not([data-theme="dark"]) footer[role="contentinfo"] {
  background: #734652 !important;
  background-color: #734652 !important;
}

html[data-theme="dark"] :is(.footer, footer[role="contentinfo"]) {
  background: #080808 !important;
  background-color: #080808 !important;
  background-image: none !important;
}

/* Keep the complete mobile header title readable, including while scrolling. */
@media (max-width: 1000px) {
  .mobile-header { gap: .4rem; }
  .mobile-header .brand { flex: 1 1 0; min-width: 0; gap: .5rem; }
  .mobile-header .brand > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
  .mobile-header .brand strong { font-size: .95rem; font-size: min(.95rem, 11cqi); line-height: 1.15; }
  .mobile-header .brand span { font-size: .65rem; font-size: min(.65rem, 8cqi); line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .mobile-header.is-scrolled { height: 60px; min-height: 60px; }
  .mobile-header.is-scrolled .brand strong { font-size: .85rem; font-size: min(.85rem, 11cqi); }
  .mobile-header.is-scrolled .brand span { font-size: .62rem; font-size: min(.62rem, 8cqi); }
}

/* Size the visible mobile logo to the adjacent three-line title. */
@media (max-width: 1000px) {
  .mobile-header .brand img {
    width: clamp(44px, calc(37.4vw - 75.68px), 74px);
    height: auto;
    flex: 0 0 clamp(44px, calc(37.4vw - 75.68px), 74px);
    aspect-ratio: 1421 / 790;
    object-fit: contain;
  }
  .mobile-header.is-scrolled .brand img {
    width: clamp(42px, calc(34vw - 66.8px), 69px);
    height: auto;
    flex-basis: clamp(42px, calc(34vw - 66.8px), 69px);
  }
}

/* One availability card for desktop and mobile introductions on every page. */
body .availability-pill{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;width:min(100%,308px);box-sizing:border-box;gap:.3rem .55rem;margin:.85rem 0 0;padding:.75rem .9rem;border:1px solid #e8dadd;border-radius:.8rem;background:#fff;color:#734652;font:600 .75rem/1.4 "Poppins",sans-serif;text-align:center;box-shadow:0 5px 15px rgba(78,53,60,.04)}
body .availability-pill>.availability-icon{grid-column:1;grid-row:1;width:17px;height:17px;color:#42875d}
body .availability-pill>span{grid-column:2;grid-row:1}
body .availability-pill small{grid-column:1/-1;grid-row:2;padding:0;border:0;color:#716a6e;font:500 .7rem/1.35 "Poppins",sans-serif}
html[data-theme="dark"] body .availability-pill{background:#1b1b1b;color:#f9eef4;border-color:#65525c}
html[data-theme="dark"] body .availability-pill small{color:#d9c5ce}
html[data-theme="dark"] body .availability-pill>.availability-icon{color:#80c99a}
.page-header-design .availability-pill{margin-inline:auto}
@media(max-width:700px){.dashboard-intro .availability-pill{margin-inline:auto}}