/* ==================================================================
   VITALIS IV — cohesive presentation layer
   Presentation only: no IDs, names, data attributes, URLs, scripts,
   treatment data, payment data, medical copy, or flow logic are changed.
   ================================================================== */

:root {
  --v-ink: #070706;
  --v-ink-soft: #0d0c0a;
  --v-panel: rgba(13, 12, 10, .72);
  --v-panel-quiet: rgba(13, 12, 10, .48);
  --v-ivory: #f4f0e6;
  --v-muted: #c6c0b4;
  --v-gold: #c7a64b;
  --v-gold-soft: rgba(199, 166, 75, .46);
  --v-line: rgba(244, 240, 230, .16);
  --v-font-ui: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  --v-font-display: Georgia, "Times New Roman", serif;
}

body { color: var(--v-ivory); background: var(--v-ink); }
#vitalis-bg {
  opacity: .25;
  filter: brightness(.52) saturate(.65) contrast(1.03);
}
#page-wrap { background: linear-gradient(180deg, rgba(7,7,6,.18), rgba(7,7,6,.48)); }
h1, h2, h3 { text-wrap: balance; }
p, li { color: var(--v-muted); }

/* One quiet header across the site. The wordmark carries the brand rather than a pasted logo graphic. */
.nav, header.nav, .main-nav, .nav-bar, .s-nav, .portal-nav,
body > nav:not(.nav), #page-wrap > nav:not(.nav), .admin-nav {
  width: 100% !important;
  min-height: 68px;
  margin: 0 !important;
  padding: 0 5.5vw !important;
  background: rgba(7,7,6,.93) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(199,166,75,.24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-bar > *, .s-nav-inner, .portal-nav > *, .admin-nav > * { min-height: 68px; }
.nav-logo, .s-logo, .nav-bar .logo, .portal-nav .logo, .admin-nav .nav-logo {
  color: var(--v-ivory) !important;
  font-family: var(--v-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 600;
  letter-spacing: .075em;
}
.nav-logo::before, .s-logo::before, .nav-bar .logo::before, .portal-nav .logo::before, .admin-nav .nav-logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 .38rem 0 0 !important;
  background: url('/assets/brand/vitalis-monogram-mark.webp') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  vertical-align: middle;
}
.s-nav-link, .nav-bar a, .portal-nav a, .nav-home-btn, .nav-signout-btn, .s-nav-btn {
  color: rgba(244,240,230,.78) !important;
  font-family: var(--v-font-ui) !important;
  font-size: .79rem;
  font-weight: 500 !important;
  letter-spacing: .025em;
  border-radius: 0 !important;
}
.s-nav-link:hover, .nav-bar a:hover, .portal-nav a:hover, .nav-home-btn:hover, .nav-signout-btn:hover, .s-nav-btn:hover { color: var(--v-gold) !important; background: transparent !important; }

/* Calm utility controls: legible, title case, and intentionally plain. */
button, .btn, .btn-gold, .t-card-btn, .nav-cta, .nav-book, .btn-primary, .primary-btn, .v-primary, .tele-btn,
.btn-secondary, .secondary-btn, .v-secondary, .tele-btn-outline, #membership-toggle {
  font-family: var(--v-font-ui) !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.nav-cta, .nav-book, .btn-primary, .primary-btn, .v-primary, .tele-btn, #membership-toggle {
  color: var(--v-ink) !important;
  background: var(--v-gold) !important;
  border: 1px solid var(--v-gold) !important;
}
.nav-cta:hover, .nav-book:hover, .btn-primary:hover, .primary-btn:hover, .v-primary:hover, .tele-btn:hover, #membership-toggle:hover {
  color: var(--v-ink) !important;
  background: #e0c779 !important;
  border-color: #e0c779 !important;
  box-shadow: 0 7px 19px rgba(199,166,75,.16) !important;
  transform: translateY(-1px);
}
.btn-secondary, .secondary-btn, .v-secondary, .tele-btn-outline {
  color: var(--v-ivory) !important;
  background: rgba(7,7,6,.20) !important;
  border: 1px solid rgba(244,240,230,.48) !important;
}
.btn-secondary:hover, .secondary-btn:hover, .v-secondary:hover, .tele-btn-outline:hover { color: var(--v-ivory) !important; border-color: var(--v-gold) !important; background: rgba(199,166,75,.10) !important; }

/* Homepage: one visual field, one gentle fade, one readable content column. */
#home.hero {
  min-height: min(810px, 94svh);
  display: grid;
  place-items: center;
  padding: 138px 0 82px;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a0a08 !important;
  background-image:
    linear-gradient(90deg, rgba(7,7,6,.93) 0%, rgba(7,7,6,.81) 28%, rgba(7,7,6,.50) 49%, rgba(7,7,6,.16) 71%, rgba(7,7,6,.05) 100%),
    none !important;
  background-size: cover !important;
  background-position: 72% center !important;
}
#home.hero::before { display: none !important; }
#home.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,6,.10), transparent 38%, rgba(7,7,6,.23));
}
#home.hero .container { position: relative; z-index: 1; }
#home .hero-content {
  max-width: 600px;
  margin: 0;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#home .hero-tagline {
  max-width: 11.5ch;
  margin: 0 0 23px !important;
  color: var(--v-ivory) !important;
  font-family: var(--v-font-display) !important;
  font-size: clamp(3.1rem, 5.2vw, 5.25rem) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -.047em;
}
#home .hero-content .body-large { max-width: 49ch !important; margin: 0 0 28px !important; color: rgba(244,240,230,.84) !important; font-size: 1.01rem !important; line-height: 1.7 !important; }
#home .hero-content > div:nth-of-type(1) { justify-content: flex-start !important; }
#home .hero-content > div:nth-of-type(2) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  max-width: 530px;
  margin-top: 39px !important;
  padding-top: 17px;
  border-top: 1px solid rgba(244,240,230,.26);
}
#home .hero-content > div:nth-of-type(2) > div { padding-right: 18px; text-align: left !important; }
#home .hero-content > div:nth-of-type(2) > div + div { padding-left: 18px; border-left: 1px solid rgba(244,240,230,.18); }
#home .hero-content > div:nth-of-type(2) > div[style*='width: 1px'] { display: none !important; }
#home .hero-content .heading-3 { margin-bottom: 5px; color: var(--v-gold) !important; font-family: var(--v-font-ui) !important; font-size: .67rem !important; font-weight: 700 !important; letter-spacing: .10em; text-transform: uppercase; }
#home .hero-content .body-small { color: rgba(244,240,230,.70) !important; font-size: .78rem !important; line-height: 1.42 !important; }

/* A continuous editorial cadence below the fold: quiet sections, limited panels, and soft dividers. */
.home-arrival, #membership, #services, #about, #reviews {
  position: relative;
  background: rgba(7,7,6,.44) !important;
  border: 0 !important;
}
.home-arrival::before, #membership::before, #services::before, #about::before, #reviews::before {
  content: "";
  position: absolute;
  left: max(5vw, 24px);
  right: max(5vw, 24px);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,166,75,.38), transparent);
}
.home-arrival-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(80px, 10vw, 130px) 0; }
.arrival-grid { display: grid; grid-template-columns: .82fr 1.45fr; gap: clamp(42px, 7vw, 98px); align-items: center; }
.arrival-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--v-gold-soft); }
.arrival-step { min-height: 215px; padding: 28px 22px; background: rgba(7,7,6,.34); border: 0; border-right: 1px solid var(--v-line); }
.arrival-step:last-child { border-right: 0; }
.arrival-no { color: var(--v-gold); font-family: var(--v-font-display); font-size: 1.5rem; }
.arrival-step h3 { margin: 17px 0 10px; color: var(--v-ivory); font-family: var(--v-font-ui); font-size: .73rem; font-weight: 700; letter-spacing: .11em; }
.arrival-step p { margin: 0; font-size: .9rem; line-height: 1.62; }
#membership-teaser { padding-block: clamp(76px, 10vw, 125px) !important; }
.membership-headline { max-width: 16ch; color: var(--v-ivory) !important; font-family: var(--v-font-display) !important; font-size: clamp(2.5rem, 4.2vw, 4.4rem) !important; font-weight: 500; line-height: 1.08 !important; letter-spacing: -.04em; }
.membership-headline span { color: var(--v-gold); }
#services .grid-3 { gap: 18px; }
#services .card, .t-card, .treatment-card, .service-card,
#reviewsTrack > *, .contact-card, .hours-section, .service-area, .faq-item,
.portal-card, .account-card, .appointment-card, .membership-card, .clearance-card {
  background: rgba(13,12,10,.67) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
#services .card { min-height: 300px; padding: 29px !important; text-align: left !important; }
#services .card:hover, .t-card:hover, .treatment-card:hover, .service-card:hover, .contact-card:hover { border-color: var(--v-gold-soft) !important; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.14) !important; }
#about .about-text-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: 1.05rem; line-height: 1.78; }

/* Transactional and support surfaces stay calm, simple, and consistent. */
.s-hero, .contact-hero { border-bottom: 1px solid rgba(199,166,75,.24) !important; }
.s-hero { min-height: 430px; padding: 144px 24px 72px !important; background: linear-gradient(90deg,rgba(7,7,6,.84),rgba(7,7,6,.38)),none center/cover !important; }
.contact-hero { min-height: 410px !important; padding: 138px max(7vw,32px) 70px !important; background: linear-gradient(90deg,rgba(7,7,6,.87),rgba(7,7,6,.34)),none center/cover !important; }
.s-hero > .container, .contact-hero > .container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.s-hero-title, .contact-hero h1 { color: var(--v-ivory) !important; font-family: var(--v-font-display) !important; font-weight: 500; letter-spacing: -.045em !important; line-height: 1.04 !important; }
.s-hero-title em, .contact-hero h1 span { color: var(--v-gold) !important; font-style: normal !important; }
.s-hero-sub, .contact-hero .subtitle { color: rgba(244,240,230,.82) !important; line-height: 1.7 !important; }
.cat-tabs, .portal-tabs, .portal-nav-tabs, .tab-list { background: rgba(7,7,6,.45) !important; border: 1px solid var(--v-line) !important; border-radius: 4px !important; }
.cat-btn, .portal-tabs button, .portal-nav-tabs button, .tab-list button { border-radius: 2px !important; }
.cat-btn.active, .cat-btn:hover, .portal-tabs button.active, .portal-nav-tabs button.active, .tab-list button.active { color: var(--v-ivory) !important; background: rgba(199,166,75,.15) !important; }
input, select, textarea { color: var(--v-ivory) !important; background: rgba(7,7,6,.72) !important; border: 1px solid rgba(244,240,230,.24) !important; border-radius: 3px !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--v-gold) !important; box-shadow: 0 0 0 3px rgba(199,166,75,.15) !important; }
#detailModal, #modal, .tele-card, #provider-app, .provider-shell, .policy-body-inner, .legal-container, .sms-container { background: rgba(13,12,10,.96) !important; border: 1px solid var(--v-line) !important; border-radius: 5px !important; box-shadow: 0 24px 60px rgba(0,0,0,.36) !important; }
.portal-header, .policy-hero, .legal-header, .sms-hero { background: linear-gradient(115deg,rgba(7,7,6,.90),rgba(28,22,10,.58)) !important; border-bottom: 1px solid rgba(199,166,75,.22) !important; }

footer, .footer { position: relative; margin-top: clamp(70px, 10vw, 135px); padding: clamp(42px, 6vw, 72px) 24px !important; background: rgba(7,7,6,.52); }
footer::before, .footer::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(199,166,75,.44),transparent); }

@media (max-width: 767px) {
  .nav, header.nav, .main-nav, .nav-bar, .s-nav, .portal-nav, body > nav:not(.nav), #page-wrap > nav:not(.nav) { min-height: 57px; padding: 0 14px !important; }
  .nav-bar > *, .s-nav-inner, .portal-nav > * { min-height: 57px; }
  .s-nav-link.s-nav-home, .nav-bar .nav-links a:not(:first-child) { display: none !important; }
  #home.hero { min-height: 745px; padding: 105px 0 60px; background-image: linear-gradient(180deg,rgba(7,7,6,.22),rgba(7,7,6,.48) 42%,rgba(7,7,6,.91) 100%),none !important; background-position: 67% center !important; }
  #home .hero-content { margin-top: 175px; padding: 0 4px !important; }
  #home .hero-tagline { font-size: clamp(3rem, 13vw, 4.2rem) !important; }
  #home .hero-content > div:nth-of-type(2) { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 28px !important; padding-top: 17px; }
  #home .hero-content > div:nth-of-type(2) > div, #home .hero-content > div:nth-of-type(2) > div + div { padding: 0 !important; border: 0 !important; }
  .home-arrival-inner { width: calc(100% - 36px); padding-block: 70px; }
  .arrival-grid { grid-template-columns: 1fr; gap: 33px; }
  .arrival-steps { grid-template-columns: 1fr; }
  .arrival-step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--v-line); }
  .arrival-step:last-child { border-bottom: 0; }
  #services .grid-3 { grid-template-columns: 1fr; }
  .s-hero { min-height: 405px; padding: 112px 18px 52px !important; background-image:linear-gradient(180deg,rgba(7,7,6,.56),rgba(7,7,6,.87)),none !important; }
  .contact-hero { min-height: 390px !important; padding: 110px 24px 56px !important; background-image:linear-gradient(180deg,rgba(7,7,6,.52),rgba(7,7,6,.88)),none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* Preserve a single, quiet navigation line on tablets rather than allowing labels to wrap. */
@media (max-width: 1080px) {
  .nav, header.nav, .main-nav, .nav-bar, .s-nav, .portal-nav,
  body > nav:not(.nav), #page-wrap > nav:not(.nav), .admin-nav { padding-inline: 28px !important; }
  .nav-bar .nav-links, .s-nav-links { gap: 0 !important; }
  .nav-bar .nav-links a, .s-nav-link { padding-inline: 12px !important; font-size: .73rem !important; white-space: nowrap; }
}
@media (max-width: 920px) {
  .nav-bar .nav-links li:nth-child(3), .nav-bar .nav-links li:nth-child(4),
  .s-nav-links .s-nav-link:nth-child(3), .s-nav-links .s-nav-link:nth-child(4) { display: none !important; }
  .nav-cta, .nav-book { padding-inline: .85rem !important; }
}

/* Homepage navigation uses its existing accessible menu control at tablet widths; no labels wrap. */
@media (max-width: 1200px) {
  .nav .nav-links { display: none !important; }
  .nav .nav-container { justify-content: space-between; }
  .nav #mobile-menu-btn { display: inline-block !important; }
  .nav .nav-auth { display: none !important; }
}


/* Vitalis signature refinement: a compact original monogram treatment, rounded controls, and one coordinated editorial image family. */
.nav-logo::before, .s-logo::before, .nav-bar .logo::before, .portal-nav .logo::before, .admin-nav .nav-logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 .38rem 0 0 !important;
  box-sizing: border-box;
  background: url('/assets/brand/vitalis-monogram-mark.webp') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  vertical-align: middle;
}
button, .btn, .btn-gold, .t-card-btn, .nav-cta, .nav-book, .btn-primary, .primary-btn, .v-primary, .tele-btn,
.btn-secondary, .secondary-btn, .v-secondary, .tele-btn-outline, #membership-toggle {
  border-radius: 11px !important;
  min-height: 42px;
  padding-inline: 1.2rem !important;
}
.nav-cta, .nav-book, .btn-primary, .primary-btn, .v-primary, .tele-btn, #membership-toggle {
  background: linear-gradient(180deg, #d9bc68 0%, #c59f42 100%) !important;
  border-color: rgba(232,205,124,.9) !important;
}
.btn-secondary, .secondary-btn, .v-secondary, .tele-btn-outline {
  border-radius: 11px !important;
  background: rgba(12,11,9,.52) !important;
}
#home.hero {
  background-image:
    linear-gradient(90deg, rgba(7,7,6,.91) 0%, rgba(7,7,6,.77) 31%, rgba(7,7,6,.44) 52%, rgba(7,7,6,.14) 76%, rgba(7,7,6,.04) 100%),
    none !important;
  background-position: center !important;
}
.s-hero {
  background-image: linear-gradient(90deg,rgba(7,7,6,.84),rgba(7,7,6,.33)),none !important;
}
.contact-hero {
  background-image: linear-gradient(90deg,rgba(7,7,6,.88),rgba(7,7,6,.35)),none !important;
}
@media (max-width: 767px) {
  #home.hero { background-image: linear-gradient(180deg,rgba(7,7,6,.18),rgba(7,7,6,.42) 42%,rgba(7,7,6,.91) 100%),none !important; }
  .s-hero { background-image: linear-gradient(180deg,rgba(7,7,6,.54),rgba(7,7,6,.88)),none !important; }
  .contact-hero { background-image: linear-gradient(180deg,rgba(7,7,6,.52),rgba(7,7,6,.88)),none !important; }
}