/* Website Design Galaxy v245: sitewide refinement and interaction system. */

html[data-theme] {
  --v245-radius: 4px;
  --v245-radius-control: 3px;
  --v245-page-line: color-mix(in srgb, var(--studio-accent-soft) 24%, transparent);
  --v245-card-line: color-mix(in srgb, var(--studio-accent-soft) 38%, var(--studio-border-dark));
  --v245-card-line-strong: color-mix(in srgb, var(--studio-accent-soft) 68%, var(--studio-metal));
  --v245-card-surface: color-mix(in srgb, var(--studio-page-alt) 88%, white 3%);
  --v245-card-surface-raised: color-mix(in srgb, var(--studio-page-alt) 80%, white 7%);
  --v245-sheen: rgba(255, 255, 255, .11);
  --v245-shadow: 0 12px 34px rgba(1, 6, 11, .2);
  --v245-shadow-hover: 0 20px 48px rgba(1, 6, 11, .3);
  --v245-shadow-panel: 0 16px 46px rgba(1, 6, 11, .17);
  --v245-focus: color-mix(in srgb, var(--studio-accent-soft) 74%, white 18%);
  --v245-footer: color-mix(in srgb, var(--studio-page) 91%, black 9%);
  --v245-footer-copy: var(--studio-on-dark-muted);
  --v245-footer-heading: var(--studio-on-dark);
  --v245-grid-line: rgba(255, 255, 255, .032);
}

html[data-theme="light"] {
  --v245-page-line: rgba(27, 91, 96, .16);
  --v245-card-line: rgba(27, 91, 96, .2);
  --v245-card-line-strong: rgba(27, 91, 96, .5);
  --v245-card-surface: #ffffff;
  --v245-card-surface-raised: #f7fafb;
  --v245-sheen: rgba(255, 255, 255, .62);
  --v245-shadow: 0 10px 28px rgba(17, 35, 45, .1);
  --v245-shadow-hover: 0 18px 42px rgba(17, 35, 45, .16);
  --v245-shadow-panel: 0 14px 38px rgba(17, 35, 45, .11);
  --v245-focus: #175c66;
  --v245-footer: #e6ecef;
  --v245-footer-copy: #46515c;
  --v245-footer-heading: #121920;
  --v245-grid-line: rgba(18, 25, 32, .035);
}

html[data-theme="solar"] {
  --v245-card-line-strong: rgba(208, 160, 98, .65);
  --v245-sheen: rgba(238, 200, 138, .12);
}

html[data-theme="emerald"] {
  --v245-card-line-strong: rgba(99, 204, 152, .62);
  --v245-sheen: rgba(126, 232, 177, .1);
}

html[data-theme="crimson"] {
  --v245-card-line-strong: rgba(227, 166, 173, .66);
  --v245-sheen: rgba(255, 190, 199, .11);
}

html[data-theme] body {
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

html[data-theme] body.v245-sitewide-ready main {
  position: relative;
  isolation: isolate;
}

html[data-theme] body.v245-sitewide-ready main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--v245-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--v245-grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  opacity: .44;
}

html[data-theme] body.v245-sitewide-ready,
html[data-theme] body.v245-sitewide-ready * {
  letter-spacing: 0 !important;
}

html[data-theme] body.v245-sitewide-ready :is(h1, h2, h3) {
  text-wrap: balance;
}

html[data-theme] body.v245-sitewide-ready :is(p, li) {
  text-wrap: pretty;
}

/* Persistent header: stable geometry, clearer identity, and quieter motion. */
html[data-theme] body.v245-sitewide-ready .site-header {
  border-bottom-color: var(--v245-page-line) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  box-shadow: 0 8px 26px rgba(1, 6, 11, .16) !important;
  transition: box-shadow 220ms ease, border-color 220ms ease !important;
}

html[data-theme] body.v245-sitewide-ready.v245-header-scrolled .site-header {
  border-bottom-color: var(--v245-card-line-strong) !important;
  box-shadow: 0 13px 34px rgba(1, 6, 11, .25) !important;
}

html[data-theme] body.v245-sitewide-ready .site-header .brand::before {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px;
  border: 1px solid var(--v245-card-line-strong) !important;
  border-radius: 50% !important;
  background: #060a0f url("../img/website-design-galaxy-logo-v235.png") center / cover no-repeat !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent) 15%, transparent), 0 0 18px color-mix(in srgb, var(--studio-accent-soft) 24%, transparent) !important;
  transform: translateZ(0);
  transition: box-shadow 240ms ease, border-color 240ms ease, transform 240ms ease !important;
}

html[data-theme] body.v245-sitewide-ready .site-header .brand:is(:hover, :focus-visible)::before {
  border-color: var(--studio-metal) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-metal) 17%, transparent), 0 0 24px color-mix(in srgb, var(--studio-accent-soft) 37%, transparent) !important;
  transform: rotate(7deg) scale(1.05);
}

html[data-theme] body.v245-sitewide-ready .site-header .site-nav a:not(.nav-cta) {
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease !important;
}

html[data-theme] body.v245-sitewide-ready .site-header .site-nav a:not(.nav-cta):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--studio-accent) 11%, transparent) !important;
}

html[data-theme="light"] body.v245-sitewide-ready .site-header .site-nav a:not(.nav-cta):is(:hover, :focus-visible) {
  background: rgba(27, 91, 96, .08) !important;
}

html[data-theme] body.v245-sitewide-ready .header-discount-banner {
  position: relative;
  border-bottom-color: var(--v245-page-line) !important;
  box-shadow: 0 5px 16px rgba(1, 6, 11, .1) !important;
}

html[data-theme] body.v245-sitewide-ready .header-discount-banner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 2%, var(--studio-metal) 24%, var(--studio-accent-soft) 55%, transparent 94%);
  opacity: .6;
}

/* Section hierarchy: precise dividers and consistent, readable title rhythm. */
html[data-theme] body.v245-sitewide-ready main > section + section {
  border-top-color: var(--v245-page-line) !important;
}

html[data-theme] body.v245-sitewide-ready main :is(
  .eyebrow,
  .service-route-kicker,
  .service-menu-kicker,
  .social-plan-kicker,
  .contact-kicker,
  .work-label,
  .services-v177-kicker,
  .galaxy-intake-kicker,
  .builder-choice-kicker
) {
  font-weight: 850 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body.v245-sitewide-ready main :is(
  .section-intro,
  .services-router-intro,
  .growth-section-intro,
  .panel-intro,
  .service-detail-grid,
  .service-builder-hero-grid,
  .pricing-hero-grid,
  .process-hero-copy,
  .galaxy-intake-hero,
  .work-page-intro
) {
  scroll-margin-top: 150px;
}

html[data-theme] body.v245-sitewide-ready main :is(.section-intro, .growth-section-intro, .panel-intro) > :is(p, ul, ol) {
  line-height: 1.68 !important;
}

/* Static panels retain depth without pretending to be clickable. */
html[data-theme] body.v245-sitewide-ready main :is(
  .service-detail-panel,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .wizard-panel,
  .policy-shell,
  .trust-surface,
  .services-router-intro,
  .services-menu-box,
  .home-conversion-box,
  .builder-intro-card,
  .summary-card
) {
  border-radius: var(--v245-radius) !important;
  border-color: var(--v245-card-line) !important;
  box-shadow: var(--v245-shadow-panel) !important;
}

html[data-theme] body.v245-sitewide-ready main :is(
  .service-detail-panel,
  .service-builder-panel,
  .service-estimate-card,
  .contact-panel,
  .wizard-panel,
  .policy-shell,
  .trust-surface,
  .services-router-intro,
  .services-menu-box,
  .builder-intro-card,
  .summary-card
)::after {
  display: none !important;
}

/* Clickable cards get one coherent motion language across the site. */
html[data-theme] body.v245-sitewide-ready [data-v245-interactive] {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--v245-radius) !important;
  border-color: var(--v245-card-line) !important;
  box-shadow: var(--v245-shadow) !important;
  transform: translateZ(0);
  transition: transform 240ms cubic-bezier(.2, .7, .2, 1), border-color 200ms ease, box-shadow 240ms ease, filter 240ms ease !important;
}

html[data-theme] body.v245-sitewide-ready [data-v245-interactive] > .v245-card-sheen {
  position: absolute;
  inset: -10% -42%;
  z-index: 6;
  display: block;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 41%, var(--v245-sheen) 48%, transparent 55%);
  opacity: 0;
  transform: translateX(-28%);
  transition: opacity 190ms ease, transform 620ms cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body.v245-sitewide-ready [data-v245-interactive]:is(:hover, :focus-within, :focus-visible) {
    border-color: var(--v245-card-line-strong) !important;
    box-shadow: var(--v245-shadow-hover) !important;
    transform: translateY(-4px) !important;
  }

  html[data-theme] body.v245-sitewide-ready [data-v245-interactive]:is(:hover, :focus-within, :focus-visible) > .v245-card-sheen {
    opacity: .9;
    transform: translateX(28%);
  }
}

html[data-theme] body.v245-sitewide-ready [data-v245-interactive]:active {
  transform: translateY(-1px) !important;
  transition-duration: 90ms !important;
}

html[data-theme] body.v245-sitewide-ready :is(
  .showcase-service-card,
  .service-route-card,
  .services-shortcut-card,
  .service-menu-card,
  .service-offer-card,
  .visual-bg-card,
  .work-case-study,
  .case-study-media,
  .premium-service-visual
) img {
  filter: saturate(1.03) contrast(1.035) brightness(1.025) !important;
  transition: transform 560ms cubic-bezier(.2, .7, .2, 1), filter 260ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body.v245-sitewide-ready [data-v245-interactive]:is(:hover, :focus-within) img {
    filter: saturate(1.1) contrast(1.055) brightness(1.055) !important;
    transform: scale(1.025);
  }
}

/* Buttons and form controls feel engineered, not ornamental. */
html[data-theme] body.v245-sitewide-ready :is(
  .btn,
  .package-card-cta,
  .footer-cta-link,
  .entry-discount-apply,
  .header-coupon-apply,
  .nav-cta,
  .wizard-actions button,
  .card-action-row a
) {
  min-height: 42px;
  border-radius: var(--v245-radius-control) !important;
  transition: transform 180ms ease, box-shadow 200ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body.v245-sitewide-ready :is(
    .btn,
    .package-card-cta,
    .footer-cta-link,
    .entry-discount-apply,
    .header-coupon-apply,
    .nav-cta,
    .wizard-actions button,
    .card-action-row a
  ):is(:hover, :focus-visible) {
    transform: translateY(-2px) !important;
  }
}

html[data-theme] body.v245-sitewide-ready :is(input, textarea, select) {
  border-radius: var(--v245-radius-control) !important;
  transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease !important;
}

html[data-theme] body.v245-sitewide-ready :is(input, textarea, select):is(:hover, :focus) {
  border-color: var(--studio-accent) !important;
}

html[data-theme] body.v245-sitewide-ready :is(input, textarea, select):focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent) 19%, transparent) !important;
}

html[data-theme] body.v245-sitewide-ready :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--v245-focus) !important;
}

/* Details remain compact until requested, with a clear interactive state. */
html[data-theme] body.v245-sitewide-ready details > summary {
  border-radius: var(--v245-radius-control) !important;
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease !important;
}

html[data-theme] body.v245-sitewide-ready details > summary:is(:hover, :focus-visible) {
  color: var(--studio-accent-hover) !important;
  -webkit-text-fill-color: var(--studio-accent-hover) !important;
}

html[data-theme] body.v245-sitewide-ready details[open] > summary {
  border-bottom-color: var(--v245-card-line-strong) !important;
}

/* Footer is part of the active theme and closes every page deliberately. */
html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer) {
  position: relative;
  overflow: hidden;
  border-top-color: var(--v245-card-line) !important;
  background: var(--v245-footer) !important;
  box-shadow: inset 0 1px color-mix(in srgb, var(--studio-metal) 17%, transparent) !important;
}

html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 3%, var(--studio-metal) 28%, var(--studio-accent-soft) 63%, transparent 96%);
  opacity: .72;
}

html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer) :is(.footer-brand, .footer-heading, strong) {
  color: var(--v245-footer-heading) !important;
  -webkit-text-fill-color: var(--v245-footer-heading) !important;
}

html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer) :is(p, small, .copyright, .ai-disclosure) {
  color: var(--v245-footer-copy) !important;
  -webkit-text-fill-color: var(--v245-footer-copy) !important;
}

html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer) a:not(.footer-cta-link) {
  color: color-mix(in srgb, var(--v245-footer-heading) 78%, var(--studio-accent-soft)) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--v245-footer-heading) 78%, var(--studio-accent-soft)) !important;
  text-underline-offset: 4px;
}

html[data-theme] body.v245-sitewide-ready :is(.footer, .site-footer) a:not(.footer-cta-link):is(:hover, :focus-visible) {
  color: var(--studio-accent-soft) !important;
  -webkit-text-fill-color: var(--studio-accent-soft) !important;
}

html[data-theme="light"] body.v245-sitewide-ready :is(.footer, .site-footer) a:not(.footer-cta-link):is(:hover, :focus-visible) {
  color: var(--studio-accent-hover) !important;
  -webkit-text-fill-color: var(--studio-accent-hover) !important;
}

/* Welcome and builder choice keep their cinematic identity, with a sharper mark. */
html[data-theme] body.v245-sitewide-ready:is(.welcome-page, .builder-choice-page) main::before {
  display: none;
}

html[data-theme] body.v245-sitewide-ready:is(.welcome-page, .builder-choice-page) .welcome-mark {
  border-color: var(--v245-card-line-strong) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--studio-accent) 10%, transparent), 0 0 28px color-mix(in srgb, var(--studio-accent-soft) 28%, transparent) !important;
}

html[data-theme] body.v245-sitewide-ready:is(.welcome-page, .builder-choice-page) .welcome-choices > a {
  border-radius: var(--v245-radius) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .15) !important;
}

/* Classic and service builders: cleaner workspace, stronger selection states. */
html[data-theme] body.v245-sitewide-ready:is(.builder-calm-flow, .standalone-service-builder) main {
  background-color: transparent;
}

html[data-theme] body.v245-sitewide-ready:is(.builder-calm-flow, .standalone-service-builder) :is(
  .wizard-panel,
  .service-builder-panel,
  .service-estimate-card,
  .service-option-card,
  .service-type-card,
  .billing-term-card,
  .care-plan-card
) {
  border-color: var(--v245-card-line) !important;
}

html[data-theme] body.v245-sitewide-ready:is(.builder-calm-flow, .standalone-service-builder) :is(
  .service-option-card,
  .service-type-card,
  .billing-term-card,
  .care-plan-card
).selected {
  border-color: var(--v245-card-line-strong) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-accent) 20%, transparent), var(--v245-shadow) !important;
}

/* Simplified funnel: structured background, compact radii, and theme-aware depth. */
html:has(.funnel-shell) body.v245-sitewide-ready {
  background-image:
    linear-gradient(90deg, var(--v245-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--v245-grid-line) 1px, transparent 1px),
    linear-gradient(145deg, color-mix(in srgb, var(--studio-page) 96%, black), var(--studio-page-alt)) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
}

html:has(.funnel-shell) body.v245-sitewide-ready main::before {
  display: none;
}

html[data-theme] body.v245-sitewide-ready .funnel-shell {
  border-color: var(--v245-card-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 26px 72px rgba(1, 6, 11, .3) !important;
}

html[data-theme] body.v245-sitewide-ready .funnel-shell :is(
  .option,
  .trust-strip,
  .trust-strip span,
  .builder-mode-switch,
  .offer-continuity,
  .contact-form input,
  .contact-form textarea,
  .consent,
  .summary > div,
  .cost-note,
  .review-notice,
  .review-actions button,
  .sticky-action button
) {
  border-radius: 6px !important;
}

html[data-theme] body.v245-sitewide-ready .funnel-shell .option {
  box-shadow: 0 7px 20px rgba(1, 6, 11, .09) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 200ms ease, background-color 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body.v245-sitewide-ready .funnel-shell .option:hover {
    border-color: var(--studio-accent) !important;
    box-shadow: 0 12px 28px rgba(1, 6, 11, .14) !important;
    transform: translateY(-2px) !important;
  }
}

html[data-theme] body.v245-sitewide-ready .funnel-shell .option.selected {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-accent) 16%, transparent), 0 12px 28px rgba(1, 6, 11, .14) !important;
}

html[data-theme="light"] body.v245-sitewide-ready .funnel-shell .brand-block small {
  color: #566173 !important;
  -webkit-text-fill-color: #566173 !important;
}

html[data-theme] body.v245-sitewide-ready .funnel-shell .sticky-action {
  box-shadow: 0 -12px 32px rgba(1, 6, 11, .11) !important;
}

html[data-theme] body.v245-sitewide-ready .funnel-shell .sticky-action button:disabled,
html[data-theme] body.v245-sitewide-ready .funnel-shell .sticky-action button:disabled b {
  color: #505a6d !important;
  -webkit-text-fill-color: #505a6d !important;
  background: #e1e4eb !important;
  opacity: 1 !important;
}

/* Progressive reveals are enabled only after JavaScript confirms motion is allowed. */
html[data-theme] body.v245-motion-ready main > section.v245-reveal-section {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(.2, .7, .2, 1), transform 620ms cubic-bezier(.2, .7, .2, 1);
}

html[data-theme] body.v245-motion-ready main > section.v245-reveal-section.v245-in-view {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  html[data-theme] body.v245-sitewide-ready main::before {
    background-size: 56px 56px;
    opacity: .28;
  }

  html[data-theme] body.v245-sitewide-ready .site-header .brand::before {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px;
  }

  html[data-theme] body.v245-sitewide-ready [data-v245-interactive] {
    transform: none !important;
  }

  html:has(.funnel-shell) body.v245-sitewide-ready {
    padding: 0 !important;
  }

  html[data-theme] body.v245-sitewide-ready .funnel-shell,
  html[data-theme] body.v245-sitewide-ready .funnel-shell .sticky-action {
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.v245-sitewide-ready *,
  html[data-theme] body.v245-sitewide-ready *::before,
  html[data-theme] body.v245-sitewide-ready *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html[data-theme] body.v245-sitewide-ready [data-v245-interactive],
  html[data-theme] body.v245-motion-ready main > section.v245-reveal-section {
    opacity: 1 !important;
    transform: none !important;
  }

  html[data-theme] body.v245-sitewide-ready .v245-card-sheen {
    display: none !important;
  }
}