/* Final packaged readability polish. */
body {
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
li,
dt,
dd,
label,
span {
  overflow-wrap: anywhere;
}

.hero,
.page-hero,
.studio-hero,
.intro-block,
.option-card,
.card,
.summary-card,
.portrait-card,
.service-card,
.specialty-card,
.resource-card,
.testimonial-card,
.fit-card,
.process-card,
.detail-card {
  isolation: isolate;
}

html body .intro-block {
  max-width: 100%;
  overflow: hidden;
}

html body .nav-links {
  align-items: center;
  row-gap: 8px;
}

html body .nav-links a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 2px;
}

html body .hero-actions,
html body .actions,
html body .cta-actions {
  gap: 12px;
  flex-wrap: wrap;
}

html body .button,
html body button,
html body input[type="submit"],
html body a[class*="button"],
html body .card-link,
html body .open,
html body .link-more {
  min-height: 36px;
  align-items: center;
}

html body .card,
html body .card-link,
html body article[class*="card"],
html body .service-card,
html body .specialty-card,
html body .resource-card,
html body .testimonial-card,
html body .fit-card,
html body .process-card,
html body .detail-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

html body .detail-jumpbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: visible !important;
}

html body .detail-jumpbar a {
  flex: 0 1 auto;
  min-height: 38px;
  white-space: normal;
}

html body .viewer-note-banner a,
html body .detail-cta a,
html body .site-footer a,
html body .article-footer a,
html body .contact-copy a,
html body .contact-section a,
html body .resource-cta a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
}

html body .button,
html body button,
html body input[type="submit"],
html body a[class*="button"],
html body .viewer-note-banner .button,
html body .layered-section .button,
html body .hero-actions .button,
html body .contact-form button {
  color: #071214 !important;
  background: linear-gradient(135deg, #fff8d6, #ffffff) !important;
  border-color: rgba(7, 18, 20, .3) !important;
  text-shadow: none !important;
}

html body .button.secondary,
html body a.button.secondary {
  color: #071214 !important;
  background: rgba(255, 255, 255, .92) !important;
}

.eyebrow,
.tag,
.badge,
.pill,
.label,
.kicker {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100%;
  align-items: center;
  color: #102326 !important;
  background-color: rgba(255, 255, 255, .88) !important;
  text-shadow: none !important;
}

html body .viewer-note-banner,
html body .section.viewer-note-banner {
  color: #102326 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 248, 214, .9)) !important;
}

html body .viewer-note-banner *,
html body .section.viewer-note-banner * {
  color: #102326 !important;
  text-shadow: none !important;
}

html body .page-hero h1,
html body .page-hero h2,
html body .hero h1,
html body .hero h2,
html body .studio-hero h1,
html body .intro-block h1,
html body .testimonial-page h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  h1 {
    line-height: 1.04;
  }

  html body .nav-links {
    justify-content: flex-start;
  }

  html body .nav-links a {
    min-height: 38px;
    padding-block: 8px;
  }

  html body .detail-jumpbar {
    justify-content: flex-start;
  }

  html body .detail-jumpbar a {
    flex: 1 1 130px;
    text-align: center;
  }
}

/* Keep Linda Medbiller portraits from dominating the sample pages. */
html body .portrait-card {
  width: 100%;
  max-width: clamp(220px, 24vw, 340px) !important;
  justify-self: center;
  align-self: start;
}

html body .complete-home-intro .portrait-card {
  max-width: clamp(220px, 22vw, 320px) !important;
}

html body .portrait,
html body .portrait-glass,
html body .photo,
html body .portrait-orbit {
  width: 100% !important;
  max-width: clamp(190px, 22vw, 310px) !important;
  margin-inline: auto;
}

html body .portrait img,
html body .portrait-glass img,
html body .photo img,
html body .portrait-orbit img,
html body img[src$="linda-medbiller-photo.png"] {
  display: block;
  width: 100% !important;
  max-height: 360px !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

html body .portrait-orbit img {
  max-height: 330px !important;
}

@media (max-width: 760px) {
  html body .portrait-card,
  html body .portrait,
  html body .portrait-glass,
  html body .photo,
  html body .portrait-orbit {
    max-width: min(300px, 82vw) !important;
  }
}

/* Final contrast guard for card-like surfaces across all sample sites. */
html body .card,
html body .card-link,
html body article[class*="card"],
html body .service-card,
html body .specialty-card,
html body .resource-card,
html body .testimonial-card,
html body .fit-card,
html body .process-card,
html body .detail-card,
html body .summary-card,
html body .portrait-card,
html body .contact-panel,
html body .trust-panel {
  text-shadow: none !important;
}

html body .card:hover,
html body .card-link:hover,
html body article[class*="card"]:hover,
html body .service-card:hover,
html body .specialty-card:hover,
html body .resource-card:hover,
html body .testimonial-card:hover,
html body .fit-card:hover,
html body .process-card:hover,
html body .detail-card:hover {
  text-shadow: none !important;
}

html body .card:hover *,
html body .card-link:hover *,
html body article[class*="card"]:hover *,
html body .service-card:hover *,
html body .specialty-card:hover *,
html body .resource-card:hover *,
html body .testimonial-card:hover *,
html body .fit-card:hover *,
html body .process-card:hover *,
html body .detail-card:hover * {
  text-shadow: none !important;
}

html body .button:hover,
html body button:hover,
html body a[class*="button"]:hover,
html body .link-more:hover,
html body .open:hover {
  text-shadow: none !important;
  filter: saturate(1.05) contrast(1.03);
}

/* Small UI text and actions should never depend on a pale inherited hover color. */
html body .eyebrow,
html body .tag,
html body .badge,
html body .pill,
html body .label,
html body .kicker {
  text-shadow: none !important;
  opacity: 1 !important;
}

html body .button,
html body button,
html body a[class*="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  color: #ffffff !important;
  background-color: #17333a !important;
  border-color: rgba(23, 51, 58, .35) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body .button *,
html body button *,
html body a[class*="button"] * {
  color: inherit !important;
  text-shadow: none !important;
}

html body .button.secondary,
html body a.button.secondary {
  color: #17333a !important;
  background-color: #ffffff !important;
}

html body .link-more,
html body .open,
html body a:not(.button):not(.card):not(.card-link) strong {
  color: #0f5f6d !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body .card:hover .link-more,
html body .card-link:hover .link-more,
html body article[class*="card"]:hover .link-more,
html body .card:hover .open,
html body .card-link:hover .open,
html body article[class*="card"]:hover .open {
  color: #0b4f5c !important;
}

/* Remove decorative numbering unless the content truly depends on a numbered list. */
html body .fit-ribbon article > span:first-child,
html body .workflow-track article > span:first-child,
html body .module-index,
html body .detail-index,
html body .timeline-index,
html body .step-index {
  display: none !important;
}

html body .fit-ribbon article,
html body .workflow-track article {
  gap: 10px !important;
}

html body .process-lane ol,
html body .steps {
  list-style: none !important;
  counter-reset: none !important;
}

html body .process-lane li::before,
html body .steps li::before,
html body .steps li::marker {
  display: none !important;
  content: none !important;
}

html body .process-lane li > span:first-child,
html body .steps li > span:first-child {
  display: none !important;
}

html body .process-lane li,
html body .steps li {
  padding-left: clamp(18px, 2.5vw, 24px) !important;
}

/* Package chooser pages: keep the three option cards structured, not plain links. */
html body:not(.vitalweb-remix) main > .grid {
  display: grid;
}

html body:not(.vitalweb-remix) main > .grid > a.card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 30px);
  text-decoration: none !important;
}

html body:not(.vitalweb-remix) main > .grid > a.card *,
html body:not(.vitalweb-remix) main > .grid > a.card:hover * {
  text-decoration: none !important;
}

html body:not(.vitalweb-remix) main > .grid > a.card > span:first-child {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

html body:not(.vitalweb-remix) main > .grid > a.card h2,
html body:not(.vitalweb-remix) main > .grid > a.card p,
html body:not(.vitalweb-remix) main > .grid > a.card strong {
  margin: 0;
}

html body:not(.vitalweb-remix) main > .grid > a.card strong {
  margin-top: auto;
}

@media (max-width: 820px) {
  html body.vitalweb-remix .hero,
  html body.vitalweb-remix .studio-hero,
  html body.vitalweb-remix .about-grid,
  html body.vitalweb-remix .intro-split,
  html body.vitalweb-remix .service-mosaic,
  html body.vitalweb-remix .trust-contact,
  html body.vitalweb-remix .service-list,
  html body.vitalweb-remix .support-grid,
  html body.vitalweb-remix .systems-grid,
  html body.vitalweb-remix .trust-grid,
  html body.vitalweb-remix .mosaic-grid,
  html body.vitalweb-remix .reason-stack,
  html body.vitalweb-remix .fit-ribbon,
  html body.vitalweb-remix .process-lane {
    grid-template-columns: 1fr !important;
  }

  html body.vitalweb-remix .summary-card,
  html body.vitalweb-remix .service-list article,
  html body.vitalweb-remix .support-grid article,
  html body.vitalweb-remix .systems-grid article,
  html body.vitalweb-remix .trust-grid article,
  html body.vitalweb-remix .mosaic-grid article,
  html body.vitalweb-remix .reason-stack article {
    grid-column: auto !important;
    transform: none !important;
  }
}